Cypress.io позволяет тестировать дизайн пользовательского интерфейса прямо в браузере. Но Cypress работает только с Chrome. Как вы проводите кроссбраузерное тестирование Cypress?

Визуальное тестирование и кросс-браузерное тестирование идут рука об руку. С этой командой тегов ваша способность создавать превосходные, согласованные и приятные графические интерфейсы пользователя (GUI) для ваших приложений на широком спектре устройств и браузеров покажутся детской игрой!

Огромная волна устройств, операционных систем, браузеров и разрешений экрана, наводняющая рынок, делает визуальное и кросс-браузерное тестирование важной составляющей любого жизненного цикла разработки программного обеспечения. Это обеспечивает стабильность ваших UX-проектов на всех этих устройствах.

Двумя ведущими инструментами в области тестирования программного обеспечения являются Cypress.io и Applitools. Cypress.io — это платформа с открытым исходным кодом, наиболее известная своими инструментами, которые помогают разработчикам писать интеграцию и сквозное (E2E) тестирование. Applitools, с другой стороны, интегрируется с Cypress.io, давая тестировщикам и разработчикам возможность обновить свои тестовые сценарии до визуальных.

В то время как Cypress.io не поддерживает кросс-браузерное тестирование, Applitools поддерживает его через свою Applitools Ultrafast Grid.

Вы можете объединить лучшее из обоих миров, используя Cypress.io для написания ваших интеграционных и E2E-тестов и позволяя Applitools Ultrafast Grid выполнять кросс-браузерное тестирование за вас.

Моя цель в этой статье — провести вас через пошаговое руководство, которое будет включать в себя:

  1. Написание E2E-теста Cypress.io.
  2. Запуск теста E2E локально с помощью Google Chrome.
  3. Преобразование теста E2E в визуальный тест с помощью Applitools Eyes Cypress SDK.
  4. Запуск визуального теста в нескольких браузерах через Applitools Ultrafast Grid.

Давайте начнем!

Добро пожаловать на Cypress.io

Cypress.io дает вам полный комплексный опыт тестирования, предоставляя вам нужные инструменты для локальной настройки среды тестирования, написания тестов E2E, запуска тестов и их записи. Он был написан с нуля без какой-либо зависимости от других инструментов, таких как Selenium.

Чтобы изучить и использовать Cypress.io, я предлагаю посмотреть курс Introduction to Cypress Gil Tayar, так как он содержит всю необходимую информацию, необходимую для начала работы с Cypress.io.

Покажите мне тест E2E

Я не заставлю тебя больше ждать. Вот пример теста E2E, который я написал на Cypress.io:

Приведенный выше пример тестового сценария E2E начинается так:

  1. Переход на корневую страницу приложения.
  2. Выбор двух товаров, отображаемых на странице.
  3. Убедитесь, что два выбранных элемента отображаются в разделе сравнения внизу страницы.

В демонстрационном разделе ниже я подробно расскажу об установке Cypress.io, настройке его для ваших проектов, написании E2E-тестов и многом другом. Быть в курсе!

О, Cypress.io работает только с Google Chrome!?!

Написание автоматизированных E2E-тестов с помощью Cypress.io — это весело и легко. Cypress.io набирает обороты в области тестирования программного обеспечения благодаря своей надежной архитектуре, хорошо разработанному API и обширной документации, и это лишь некоторые из них.

Cypress.io позволяет тестировщикам и разработчикам писать E2E-тесты, которые запускаются локально только в браузере Google Chrome. Были дебаты и просьбы разработчиков в целом о том, чтобы это распространилось и на другие браузеры. Команда Cypress.io прислушалась и сейчас делает это.

Вы можете следить за обсуждением этой проблемы GitHub Предложение: поддержка кросс-браузерного тестирования, чтобы получить дополнительную информацию и быть в курсе дорожной карты для поддержки этого. Однако на данный момент вы можете запускать свои тесты E2E только локально с помощью Google Chrome.

Есть ли решение? Да!

Вы можете использовать систему Applitools Ultrafast Grid для запуска E2E-тестов Cypress.io в нескольких браузерах и гарантировать результат кросс-браузерного тестирования.

Локально вы будете запускать свои тесты в Google Chrome, в то время как Applitools Ultrafast Grid будет заниматься настройкой кросс-браузерной среды для запуска ваших тестов в нескольких браузерах.

Посмотрим, как это работает!

Applitools для дополнения Cypress.io

Applitools предлагает тестовую среду для автоматизации визуального тестирования вашего приложения. Он фокусируется на визуальных аспектах вашего приложения и играет важную роль в выявлении визуальных различий между базовыми снимками и текущими и будущими снимками.

Applitools интегрируется с десятками фреймворков для тестирования, такими как Cypress.io, Storybook и Selenium. Он предоставляет SDK для использования в ваших проектах для беспрепятственного общения и взаимодействия с Applitools.

Applitools Ultrafast Grid быстро запускает визуальные тесты и поддерживает различные параметры конфигурации, такие как несколько браузеров, окон просмотра и устройств. Applitools Ultrafast Grid разделен на два компонента: серверный и клиентский. Вот схема того, как это работает:

Applitools Ultrafast Grid — Код настройки

Клиент Ultrafast Grid — это библиотека Node.js, используемая внутри Applitools, Storybook и Cypress SDK. Подробнее о клиенте Applitools Ultrafast Grid.

const {makeVisualGridClient} = require('@applitools/visual-grid-client');

// The code line above imports the Visual Grid client. 

const { openEyes } = makeVisualGridClient({
    apiKey: process.env.APPLITOOLS_API_KEY,
    showLogs: process.env.APPLITOOLS_SHOW_LOGS,
    proxy: process.env.APPLITOOLS_PROXY, // 'http://localhost:8888',
  });

Этот фрагмент кода создает экземпляр нового клиента Grid и возвращает объект. В данном случае нас интересует только возвращаемый метод openEyes().

Applitools Ultrafast Grid — Snapshot Capture

При вызове метод openEyes() запускает новый тестовый запуск и отправляет сведения о нем внутреннему серверу Grid. Эти сведения включают имя приложения, имя пакета или теста, используемые браузеры и различные варианты настроек браузера, которые необходимо адаптировать при выполнении тестов. Этот метод возвращает Promise объекту со следующими функциями: checkWindow() и close().

Этот вызов метода дает указание внутреннему серверу Ultrafast Grid подготовить среду тестирования для нового запуска теста, который требует выполнения теста в двух разных браузерах. Первый браузер эмулирует iPhone X, а второй указывает область просмотра рабочего стола для запуска теста.

Чтобы начать сбор снимков, тест вызывает функцию checkWindow(). Клиент Ultrafast Grid обрабатывает этот вызов и собирает все необходимые ресурсы для локального хранения моментального снимка.

В конце теста вы вызываете метод close(), чтобы закрыть и завершить выполнение теста.

Applitools Ultrafast Grid — тесты сетки

В этот момент все моментальные снимки DOM, собранные локально во время тестового запуска, отправляются на внутренний сервер Ultrafast Grid. На основании требований тестового запуска, отправленных ранее с помощью метода openEyes(), Ultrafast Grid:

  • Запускает несколько браузеров с разными видами окон и эмуляторами устройств.
  • Запускает все снимки DOM параллельно.
  • Собирает скриншоты изображений.
  • Отправляет все скриншоты на сервер Applitools AI для выполнения всего анализа тестирования и возврата результатов.

Мы сосредоточимся на возможностях Applitools Ultrafast Grid, чтобы настроить среду тестирования в облаке, которая позволяет запускать визуальные тесты в различных браузерах и разрешениях.

Прежде чем я перейду к написанию и запуску тестов Visual/E2E с помощью Applitools Ultrafast Grid, давайте посмотрим, как Applitools интегрируется в Cypress.io.

Интеграция Applitools/Cypress.io

Applitools интегрируется с Cypress.io и предлагает библиотеку общего назначения, которую можно встроить в ваш проект, будь то приложение Angular, Vue или React.

Applitools Eyes Cypress SDK — это простой плагин для Cypress.io. После установки он добавляет несколько команд к основному объекту cy. В частности, он добавляет три основных метода: cy.eyesOpen для запуска теста, cy.eyesCheckWindow для создания снимков экрана (для каждого шага теста) и cy.eyesClose для закрытия теста. Вот схема:

Теперь, когда вы понимаете, как работает интеграция Applitools/Cypress.io, давайте переключим передачу и начнем кодировать E2E-тест.

Пошаговое руководство по кроссбраузерному тестированию

Давайте запачкаем руки и создадим несколько E2E-тестов. В этом разделе вы узнаете, как:

  • Установите Кипарис.
  • Напишите тест E2E.
  • Запустите тест.
  • Установите Applitools Eyes Cypress SDK.
  • Напишите визуальный тест.
  • Запустите этот тест.
  • Наконец, сделайте анализ результатов теста.

Тест E2E, который я буду использовать для демонстрации одного из клиентов Applitools, https://www.salesforce.com. Тест делает следующее:

  • Направляет браузер к контактной форме SalesForce, расположенной по адресу: https://www.salesforce.com/uk/form/contact/contactme/
  • Заполняет поля формы допустимыми данными.
  • Находит кнопку «Отправить» и нажимает ее.
  • Наконец, тестовый сценарий проверяет, что форма была успешно отправлена, убедившись, что на странице отображается сообщение об успешном завершении, пришедшее с сервера.

Давайте начнем!

Создайте новую папку проекта

Начните с создания новой папки, выполнив следующие команды:

```
mkdir projects
cd projects
mkdir cross-browser-testing
cd cross-browser-testing
```

скопировать код в буфер обмена

Теперь, когда вы находитесь в папке кросс-браузерного тестирования, выполните следующую команду для инициализации NPM:

```
npm init -y
```
The command initializes your project with a package.json file. Now you can start installing NPM packages to use inside your project.

скопировать код в буфер обмена

Установите Cypress.io

Добавьте пакет Cypress в проект, выполнив эту команду:

```
npm install cypress --save-dev
```

скопировать код в буфер обмена

Пакет Cypress npm добавляет набор тестовых файлов, которые помогут вам написать собственные автоматические тесты.

Откройте Cypress Test Runner (приложение Electron), выполнив:

```
npx cypress open
```

скопировать код в буфер обмена

Эта команда открывает приложение Cypress Electron, а также создает файл cypress.json и папку cypress в корневом каталоге вашего приложения. В папке cypress мы будем писать наши тесты.

Чтобы упростить наши тесты E2E, откройте файл cypress.json, расположенный в корне вашего проекта, и вставьте следующее содержимое:

```
{
"baseUrl": "https://www.salesforce.com/uk"
}
```

скопировать код в буфер обмена

Теперь, когда Cypress.io работает правильно, давайте добавим наш первый E2E-тест.

Напишите свой первый тест E2E

Внутри папки cypress\integration создайте файл salesforce-contactus.spec.js и вставьте следующее:

/// <reference types="Cypress" />

context('Applitools', () => {
    beforeEach(() => {
        cy.visit('/form/contact/contactme')
    });

    afterEach(() => { })

    it('fill the contact us form', () => {

        // Wait on the page to load
        cy.location('pathname', { timeout: 10000 })
            .should('include', '/contactme');

        cy.get('button[id="onetrust-accept-btn-handler"]', { timeout: 10000 })
            .click();

        // Fill First Name
        cy.get('input[id="reg_form_1-UserFirstName"]')
            .type('John')
            .should('have.value', 'John');

        // Fill Last Name
        cy.get('input[id="reg_form_1-UserLastName"]')
            .type('Smith')
            .should('have.value', 'Smith');

        // Fill User Title
        cy.get('input[id="reg_form_1-UserTitle"]')
            .type('Senior Manager')
            .should('have.value', 'Senior Manager');

        // Fill a email address
        cy.get('input[id="reg_form_1-UserEmail"]')
            .type('[email protected]')
            .should('have.value', '[email protected]');

        // Fill a Phone number
        cy.get('input[id="reg_form_1-UserPhone"]')
            .type('+1-202-555-0176')
            .should('have.value', '+1-202-555-0176');

        // Fill a Company Name
        cy.get('input[id="reg_form_1-CompanyName"]')
            .type('John Smith LTD')
            .should('have.value', 'John Smith LTD');

        // Select number of employees
        cy.get('select[id="reg_form_1-CompanyEmployees"]')
            .select('3')
            .should('have.value', '3');

        // Select Country
        cy.get('select[id="reg_form_1-CompanyCountry"]')
            .select('US')
            .should('have.value', 'US');

        // Select State
        cy.get('select[id="reg_form_1-CompanyState"]')
            .select('AZ')
            .should('have.value', 'AZ');

        // Select Product/Interest
        cy.get('select[id="reg_form_1-Lead.Primary_Product_Interest__c"]')
            .select('Sales')
            .should('have.value', 'Sales');

        // Fill the User Description
        cy.get('textarea[id="reg_form_1-UserDescription"]')
            .type('I am requesting a demo!')
            .blur()
            .should('have.value', 'I am requesting a demo!');

        // Submit the form
        cy.get('button[name="Submit"]').click();

        // Wait on the page to load
        cy.location('pathname', { timeout: 10000 })
            .should('include', '/conf/contactme');

        // Verify the message has went through
        cy.get('h2').contains("We'll be in touch").should('be.visible', true);
    });
})

Единственный тест E2E фокусируется на тестировании формы обратной связи путем заполнения ее полей на веб-сайте SalesForce.

Файл спецификации не требует пояснений. Здесь нужно отметить только одну вещь в отношении селекторов, используемых внутри методов cy.get(). Лучше всего избегать использования идентификаторов и классов CSS для выбора элементов из DOM. Они сделают ваши тесты хрупкими, потому что они могут быть изменены. Лучшим подходом является использование атрибутов data-* или фактических имен компонентов.

В контролируемой среде я бы придерживался использования атрибутов данных. На данный момент мы продолжим использовать селекторы CSS ID и Class для запроса элементов DOM.

Запустить тест

Тест E2E готов, поэтому давайте запустим его, введя следующую команду:

```
npx cypress open
```

скопировать код в буфер обмена

Cypress.io открывает экземпляр браузера Google Chrome для запуска ваших тестов. Теперь, чтобы запустить тот же тест в других браузерах, нам нужно преобразовать этот тест E2E в визуальный тест и запустить его с помощью Applitools Ultrafast Grid.

Посмотрим, как это работает.

Установите Applitools Eyes Cypress SDK

Добавим в проект пакет Applitools Cypress NPM.

Добавьте пакет Applitools Eyes Cypress SDK в проект, выполнив следующую команду:

```
npm install @applitools/eyes-cypress --save-dev
```

скопировать код в буфер обмена

Настройте Applitools Eyes Cypress SDK, введя команду:

```
npx eyes-setup
```
Now that Applitools Eyes Cypress SDK is configured, we can start using it in our tests.

скопировать код в буфер обмена

На странице Applitools Eyes Cypress SDK есть подробная документация о том, как использовать и настраивать интеграцию Applitools-Cypress, а также о том, как настроить SDK для запуска тестов на сверхбыстрой сети.

В этой статье мы сосредоточимся на том, как мы можем дать команду Visual Grid запустить наш тест для нескольких браузеров и разрешений.

В общем, есть три способа указать тестовую конфигурацию:

  1. Аргументы для cy.eyesOpen().
  2. Переменные среды.
  3. Файл applitools.config.js.

Подробнее о каждом методе вы можете прочитать в разделе Дополнительная конфигурация.

Я воспользуюсь первым методом и предоставлю список браузеров и разрешений экрана в качестве аргументов функции cy.eyesOpen().

Настроить ключ API Applitools

Прежде чем вы сможете локально запустить Applitools Eyes Cypress SDK, убедитесь, что вы получили Applitools API Key и сохранили его на своем компьютере в качестве переменной среды.

Чтобы установить переменную среды APPLITOOLS_API_KEY, вы можете использовать команду экспорта на Mac или установить команду в Windows следующим образом:

// mac OS
export APPLITOOLS_API_KEY='YOUR_API_KEY'

// win OS
set APPLITOOLS_API_KEY='YOUR_API_KEY'

Напишите свой первый визуальный тест

Теперь, когда у вас запущен E2E-тест, давайте преобразуем этот E2E-тест в визуальный тест с помощью Applitools Eyes Cypress SDK.

Снова откройте файл cypress\integration\salesforce-contactus.spec.js и замените его содержимое на:

/// <reference types="Cypress" />

context('Applitools', () => {
    beforeEach(() => {

        // Open the Applitools Test
        cy.eyesOpen({
            appName: 'Cross Browser Testing',
            browser: [
                { width: 800, height: 600, name: 'firefox' },
                { width: 1024, height: 768, name: 'chrome' },
                { deviceName: 'iPhone X', screenOrientation: 'landscape', name: 'chrome' }
            ]
        });

        cy.visit('/form/contact/contactme')
    });

    afterEach(() => {
        // Close the active test
        cy.eyesClose();
    })

    it('fill the contact us form', () => {

        // Wait on the page to load
        cy.location('pathname', { timeout: 10000 })
            .should('include', '/contactme');

        // Take a snapshot of the contact form
        cy.eyesCheckWindow('Contact Form');

        // Fill First Name
        cy.get('input[id="reg_form_1-UserFirstName"]')
            .type('John')
            .should('have.value', 'John');

        // Fill Last Name
        cy.get('input[id="reg_form_1-UserLastName"]')
            .type('Smith')
            .should('have.value', 'Smith');

        // Fill User Title
        cy.get('input[id="reg_form_1-UserTitle"]')
            .type('Senior Manager')
            .should('have.value', 'Senior Manager');

        // Fill a email address
        cy.get('input[id="reg_form_1-UserEmail"]')
            .type('[email protected]')
            .should('have.value', '[email protected]');

        // Fill a Phone number
        cy.get('input[id="reg_form_1-UserPhone"]')
            .type('+1-202-555-0176')
            .should('have.value', '+1-202-555-0176');

        // Fill a Company Name
        cy.get('input[id="reg_form_1-CompanyName"]')
            .type('John Smith LTD')
            .should('have.value', 'John Smith LTD');

        // Select number of employees
        cy.get('select[id="reg_form_1-CompanyEmployees"]')
            .select('3')
            .should('have.value', '3');

        // Select Country
        cy.get('select[id="reg_form_1-CompanyCountry"]')
            .select('US')
            .should('have.value', 'US');

        // Select State
        cy.get('select[id="reg_form_1-CompanyState"]')
            .select('AZ')
            .should('have.value', 'AZ');

        // Select Product/Interest
        cy.get('select[id="reg_form_1-Lead.Primary_Product_Interest__c"]')
            .select('Sales')
            .should('have.value', 'Sales');

        // Fill the User Description
        cy.get('textarea[id="reg_form_1-UserDescription"]')
            .type('I am requesting a demo!')
            .should('have.value', 'I am requesting a demo!');

        // Take a snapshot before submitting the form
        cy.eyesCheckWindow('Contact Form before submitting');

        // Submit the form
        cy.get('button[name="Submit"]').click();

        // Wait on the page to load
        cy.location('pathname', { timeout: 10000 })
            .should('include', '/conf/contactme');

        // Verify the message has went through
        cy.get('h2').contains("We'll be in touch").should('be.visible', true);

        // Take a snapshot of the contact form submission
        cy.eyesCheckWindow('Contact Form Submission Results');
    });
})

Код самодокументирован.

Внутри тестовой функции beforeEach() вы запускаете новый визуальный тест, вызывая функцию cy.eyesOpen({}), которая принимает объект конфигурации в качестве входных данных. Вы можете указать имя приложения, имя пакета, браузеры, которые вы хотите, чтобы Ultrafast Grid использовал для запуска ваших тестов, и многие другие параметры конфигурации, доступные вам, на Странице Applitools Eyes Cypress SDK.

Закройте текущий тест Applitools, вызвав функцию cy.eyesClose() внутри тестовой функции afterEach().

Сделайте снимок (вы можете повторить этот шаг везде, где хотите сделать снимок), вызвав функцию cy.eyesCheckWindow(). Эта функция может принимать имя снимка, если вы хотите отличать снимки друг от друга.

Тест делает три снимка на трех разных этапах:

  • Пустая страница контактов SalesForce.
  • После заполнения формы SalesForce Contact Us.
  • На странице подтверждения успеха после отправки формы «Свяжитесь с нами».

Давайте запустим тест и проверим результаты вместе.

Запустить тест

Визуальный тест готов. Запустим его, введя команду:

“`

npx кипарис открытый

“`

Все SDK Eyes Cypress регистрируются.

Давайте рассмотрим результаты тестирования в Applitools Test Manager.

Проверка результатов теста

Давайте посетим Applitools Test Manager и проверим результаты.

На левой боковой панели есть один тестовый запуск под названием «заполните форму обратной связи». На правой боковой панели есть три результата теста — по одному для каждого «браузера». Помните, мы настроили Eyes SDK для запуска этого визуального теста в трех разных браузерах/разрешениях экрана:

// Open the Applitools Test
cy.eyesOpen({
    appName: 'Cross Browser Testing',
    browser: [
        { width: 800, height: 600, name: 'firefox' },
        { width: 1024, height: 768, name: 'chrome' },
        { deviceName: 'iPhone X', screenOrientation: 'landscape', name: 'chrome' }
    ]
});

Для каждого указанного браузера Grid создает новый экземпляр браузера и запускает тест. Это объясняет, почему у нас есть три результата теста.

Applitools Ultrafast Grid снимет с вас бремя и создаст в облаке инфраструктуру кросс-браузерного тестирования.

Каждый результат теста содержит три моментальных снимка. Давайте рассмотрим снимки для одного результата теста браузера:

Первый снимок представляет тестируемую форму с пустыми полями.

Второй снимок представляет тестируемую форму со всеми заполненными полями.

Третий снимок представляет собой сообщение, отображаемое пользователю при заполнении формы «Свяжитесь с нами».

Используя Applitools SDK и Ultrafast Grid, мы смогли запустить один E2E-тест, написанный на Cypress.io, в среде тестирования, работающей на разных браузерах и устройствах!

Вывод

Applitools, являясь средой визуального тестирования, заполняет пробел в средах тестирования E2E, таких как Cypress.io, предлагая кросс-браузерное тестирование. Его UltrafastGrid может настроить кросс-браузерную среду тестирования в облаке и запускать там ваши тесты.

Другой связанный контент

Первоначально опубликовано на https://applitools.com.