Запуск автоматических тестов в масштабе с использованием Cypress

В этой статье мы узнаем, как настроить Cypress и запустить веб-автоматизационные тесты (последовательно и параллельно) на облачной сети LambdaTest.

Сypress – это открытый фреймворк автоматизации на JavaScript, который может выполнять модульное, интеграционное, компонентное и интеграционное тестирование. Он создан для современных веб-приложений следующего поколения и позволяет легко выполнять перекрестное тестирование в разных браузерах и выполнение параллельных тестов.

С помощью Cypress команды могут легко создавать автоматизированные тесты для веб-приложений, визуально отлаживать их и автоматически выполнять в рамках CI/CD конвейеров, что помогает в реализации непрерывной интеграции и разработки.

Хотя часто Cypress сравнивают с Selenium WebDriver, он имеет фундаментальные и архитектурные отличия. Он не использует Selenium WebDriver для автоматизированного тестирования. Это позволяет пользователям писать более быстрые, простые и надежные тесты.

Установка и настройка Cypress также проще по сравнению с другими фреймворками автоматизации тестирования, поскольку это пакет node. Просто выполните команду npm npm install cypress и затем используйте фреймворк Cypress.

В этой статье мы узнаем, как настроить Cypress и запустить автоматизированные тесты (последовательно и параллельно) на облачной сетке LambdaTest.

Итак, приступим!

Основные возможности Cypress

Cypress предлагает ряд встроенных функций для масштабирования автоматизированного тестирования. Рассмотрим их.

Временная машина: Cypress позволяет “путешествовать во времени” по веб-приложению, что означает, что он проверяет, что происходит на каждом шаге выполнения тестов. Мы можем двигаться вперед, назад и даже приостанавливать выполнение теста в реальном времени. Это дает нам гибкость для проверки состояния приложения во время выполнения тестов.
Автоматическое ожидание: Cypress имеет встроенную функцию автоматического ожидания, которая автоматически ждет выполнения команды и утверждения перед переходом к следующему шагу. Таким образом, нет необходимости добавлять ожидания или задержки в автоматизированные тесты. Хотя у Cypress есть команда ожидания, ее использование в тестах не требуется.
Управление непостоянными тестами: Непостоянный тест – это тест, который проходит и не проходит через несколько попыток повтора без каких-либо изменений в коде. Например, когда тест выполняется в первый раз, он не проходит, а при повторном запуске без внесения изменений в код, он проходит.
У Cypress есть функция автоматического повтора неудачных тестов. Это может помочь сделать набор тестов неподверженным ошибкам. Управление непостоянством тестов может помочь предотвратить отказ всего набора тестов из-за непостоянных тестов.
Скриншоты, видео и простое воспроизведение тестов: Cypress позволяет автоматически делать скриншоты и видеозаписи во время выполнения тестов. Это можно настроить с помощью файла конфигурации Cypress. Когда набор тестов выполняется в безголовом режиме через CLI и включена настройка для видео и скриншотов, Cypress создаст видео и сделает скриншоты всего процесса выполнения тестов.
Скриншоты и видео могут помочь анализировать неудачи тестов и воспроизводить проблемы.
Тестирование на нескольких браузерах: Cypress позволяет запускать тесты на нескольких браузерах. Он поддерживает браузеры семейства Chrome, такие как Chrome, Chromium-based Microsoft Edge и Electron. Он также поддерживает Safari и Firefox.
Для выполнения тестов в локальной среде или в среде CI необходимо установить соответствующий браузер (за исключением Electron). Флаг --browser можно использовать с командой cypress, чтобы запустить тесты в требуемом браузере. Например, для запуска теста в браузере Firefox можно использовать следующую команду:
```
cypress run --browser firefox
```
Параллельное выполнение тестов: Cypress может выполнять параллельное тестирование. Это помогает сократить время выполнения тестов в общей сложности и обеспечивает быструю обратную связь.
Удобное отладка: С помощью интерактивного режима CLI Cypress вы можете легко находить ошибки в тестах и выявлять причины неудачи теста. Читаемые сообщения об ошибках и стеки вызовов позволяют быстро находить ошибки.
Заглушка и прослушивание сети: Cypress позволяет пользователям выбирать, мокировать ответы или разрешать им обращаться к серверу для получения ответа. Также можно комбинировать эти возможности в одном тесте, чтобы замокать некоторые запросы и разрешить другие обращения к серверу и получение ответа.
Поддержка тестирования API: Cypress также предоставляет дополнительную поддержку для тестирования API и отличный опыт разработчика при тестировании API. Его можно широко использовать для тестирования API и написания эффективных тестов API и интеграции.
Тестовый раннер Cypress: Cypress имеет встроенный GUI-интерфейс тестового раннера, который обеспечивает интерактивный интерфейс и может быть запущен с помощью команды Cypress open. Он может использоваться для запуска и отладки автоматизированных тестов веб-приложений. Команда Cypress open открывает окно тестового раннера, в котором можно выбирать и запускать отдельные тесты, отлаживать код и просматривать результаты тестов.

Настройка Cypress Framework

Прежде чем мы начнем настройку фреймворка, давайте обсудим технологический стек, который мы используем в этой статье для демонстрации. Будут использоваться следующие языки программирования/инструменты/фреймворки:

Язык программирования/Инструменты/Фреймворк	Версия
NodeJS	18.17.1
Cypress	13.3.0
@faker-js/faker	8.1.0
LambdaTest Cypress CLI	3.0.18

Мы будем запускать тесты на Cypress cloud grid, предоставляемом LambdaTest – платформой для автоматизации тестирования с использованием Cypress на различных браузерах и операционных системах. Это хороший выбор для команд, которым нужно выполнять тестирование на нескольких браузерах, реальных браузерах и параллельное тестирование.

Шаг 1 – Установка NodeJS

Для начала установочного процесса давайте начнем с NodeJS. Мы можем установить его, используя официальный сайт. Вы можете загрузить и установить подходящий файл в зависимости от вашей операционной системы.

После установки NodeJS мы можем проверить успешность установки, запустив следующую команду в терминале или командной строке:

node - v

Шаг 2 – Установка Cypress

Существует два способа установки Cypress: с использованием CLI и загрузкой zip-файла.

Использование CLI

Прямое скачивание zip-файла

Рекомендуется устанавливать Cypress с помощью CLI, так как это просто и удобно. CLI обрабатывает весь процесс установки, поэтому не требуется ручное вмешательство.

Для установки Cypress может быть выполнена следующая команда в терминале:

npm install cypress --save-dev

Чтобы проверить успешность установки Cypress, можно выполнить следующую команду для проверки его версии.

npx cypress --version

Шаг 3 – Установка LambdaTest Cypress CLI

LambdaTest Cypress CLI – это интерфейс командной строки, который помогает запускать тесты Cypress на облачной сетке LambdaTest. Для установки пакета lambdatest-cypress-cli можно выполнить следующую команду в терминале:

npm install -g lambdatest-cypress-cli

Чтобы проверить успешность установки, проверьте его версию, выполнив следующую команду в терминале.

lambdatest-cypress --version

Для работы пакета lambdatest-cypress-cli требуется файл конфигурации, который содержит все настройки, такие как имя браузера, детали операционной системы, аутентификационные данные lambdatest, настройки запуска и туннель. Файл конфигурации по умолчанию может быть сгенерирован с помощью следующей команды. Эта команда должна быть выполнена после перехода в корневую папку проекта.

lambdatest-cypress init --cv=10

После успешного выполнения команды, в корневой папке проекта должен быть сгенерирован файл с именем lambdatest-config.json.

Имя файла: lambdatest-config.json

{   "lambdatest_auth": {      "username": "LT_USERNAME",      "access_key": "LT_ACCESS_KEY"   },   "browsers": [      {         "browser": "Chrome",         "platform": "macOS Ventura",         "versions": [            "latest-1"         ]      },      {         "browser": "MicrosoftEdge",         "platform": "Windows 10",         "versions": [            "latest-1"         ]      }   ],   "run_settings": {      "reporter_config_file": "",      "build_name": "cypress-demo-run",      "parallels": 2,      "specs": "./cypress/e2e/*.cy.js",      "ignore_files": "",      "network": false,      "headless": false,      "npm_dependencies": {         "cypress": "13.2.0",         "@faker-js/faker": "^8.1.0"      }   },   "tunnel_settings": {      "tunnel": false,      "tunnel_name": null   }}

Пакет lambdatest-cypress-cli поможет запустить тест на сетке облачного грида LambdaTest. Он будет использовать файл lambdatest-config.json для получения конфигураций теста.

Файл lambdatest-config.json содержит следующее:

lambdatest_auth

Этот раздел включает учетные данные LambdaTest для выполнения тестирования Cypress на сетке LambdaTest. Вы можете оставить поля по умолчанию, мы можем предоставить эти значения с помощью параметра CLI --user=<Имя пользователя LambdaTest> and --ak=<Ключ доступа LambdaTest> в терминале.

Согласно документации по CLI Cypress LambdaTest, для определения используемых учетных данных аутентификации LambdaTest в случае, если пользователь использует более одной опции для передачи учетных данных аутентификации LambdaTest, используется следующий порядок приоритета:

Аргументы CLI > Опции, установленные в lambdatest-config.json > Переменные окружения.

браузеры

Этот раздел используется для указания браузера, платформы и версии, на которой должно выполняться автоматизированное тестирование Cypress. Мы можем иметь несколько комбинаций браузера и ОС в массиве. Мы предоставим браузер и платформу, как обсуждалось в предыдущем разделе выше.

настройки_запуска

Этот раздел содержит желаемые возможности набора тестов Cypress. build_name указывает имя сборки, которое будет использоваться при выполнении тестирования Cypress на LambdaTest. parallels указывает количество тестов Cypress, которые будут выполняться параллельно на сетке LambdaTest. Значение для parallels должно быть установлено в зависимости от количества параллельных сессий, поддерживаемых в нашем плане LambdaTest.

Также есть объект с именем npm_dependencies, в котором мы должны указать зависимости, которые мы будем использовать в нашем проекте. По умолчанию предоставляется Cypress. Однако, мы должны вручную обновить здесь имена других зависимостей. Например, в этом проекте используется зависимость @faker-js/faker для управления тестовыми данными.

С помощью ignore_files мы можем игнорировать или исключать любой файл теста Cypress из выполнения.

tunnel_settings

Этот раздел включает настройки для туннеля LambdaTest. Если значение для ключа "tunnel" установлено на "true", это означает, что будет использоваться туннель; в противном случае, значение false указывает на отсутствие туннеля.

tunnelName – это имя туннеля, который соединяет локальную систему с серверами LambdaTest через интеграционный туннель SSH.

По умолчанию туннель LambdaTest отключен, поскольку его значение установлено на false. Туннель с указанным именем автоматически запустится после запуска теста Cypress. Следовательно, нет необходимости запускать туннель LambdaTest вручную.

Теперь давайте перейдем к написанию первого теста с использованием Cypress.

Написание первого тестового случая с использованием Cypress

Мы будем использовать демонстрационную страницу с вводом формы на Selenium Playground LambdaTest для демонстрации написания тестов автоматизации веб-приложений с использованием Cypress. Ниже приведен тестовый сценарий, над которым мы будем работать.

Тестовый сценарий

Открыть Selenium Playground LambdaTest
Нажмите на ссылку “Demo формы ввода”
Найти и ввести значения во все поля на странице “Demo формы ввода”
Нажать кнопку “Отправить”
Проверить, что после успешной отправки формы отображается сообщение “Спасибо за обращение, мы ответим вам в ближайшее время.”

Структура проекта

Структура проекта должна выглядеть как на скриншоте ниже после завершения всех установок.

Реализация тестовых сценариев

Для написания теста давайте создадим новый файл в папке e2e проекта и назовем его “seleniumplaygroundtests.spec.cy.js”. Тест будет написан в этом файле.

Имя файла: seleniumplaygroundtests.spec.cy.js

import mainPage from "../pages/MainPage.js";import formDemoPage from "../pages/FormDemoPage.js";describe("Тесты для демонстрационной страницы формы на Selenium Playground", () => {  it("должен заполнить форму на странице формы и проверить сообщение об успешной отправке", () => {    cy.visit('https://www.lambdatest.com/selenium-playground/');    mainPage.navigateToFormDemoPage();    formDemoPage.fillForm();    formDemoPage      .getSuccessMessageText()      .should(        "have.text",        "Спасибо за обращение, мы ответим вам в ближайшее время."      );  });});

Обзор кода

Метод cy.visit() поможет перейти на сайт Selenium Playground от LambdaTest.

На следующей строке будет вызван метод navigateToFormDemoPage() из класса MainPage. Этот метод откроет страницу “Form Demo”.

Имя файла: MainPage.js

class MainPage {    webElements = {    inputFormDemoLink: () => cy.get(":nth-child(18) > .text-black")  };  navigateToFormDemoPage() {    this.webElements.inputFormDemoLink().click();  }}module.exports = new MainPage();

В классе MainPage был создан словарь WebElements, который содержит все локаторы для Main Page сайта LambdaTest Selenium Playground. Свойство inputFormDemoLink находит ссылку Input Form Submit на главной странице.

Использование интерактивного режима Cypress упрощает поиск селекторов для WebElements. Чтобы запустить Cypress в интерактивном режиме, в терминале нужно выполнить следующую команду:

Шаг 1 – Выполните следующую команду

npx cypress open

После выполнения команды Cypress должен открыться в интерактивном режиме

Шаг 2 – Выберите E2E Testing

Шаг 3 – Выберите браузер для запуска теста; мы выберем Chrome

Шаг 4 – Выберите тестовую спецификацию для запуска теста

Шаг 5 – Определите WebElement с помощью встроенного в Cypress средства поиска WebElement

Чтобы найти WebElement в интерактивном режиме, выполните следующие действия:

Нажмите на кнопку Выбрать элемент.
Выберите WebElement, который нужно найти
Cypress автоматически найдет WebElement и предоставит его селектор в текстовом поле, отображаемом наверху рядом с кнопкой Выбрать элемент.
Селектор, отображаемый в текстовом поле, можно скопировать, используя кнопку Копировать в буфер обмена.

Здесь мы видим, что для ссылки “Input Form Submit” Cypress предоставил нам селектор – cy.get(':nth-child(18) > .text-black').

Этот селектор можно использовать в классе объекта страницы для поиска ссылки и выполнения на нее клика.

Свойство inputFormDemoLink вызывается в методе navigateToFromDemoPage() для выполнения действия клика на нем.

Следующая строка в тесте предназначена для заполнения формы на странице Form Demo.

В классе FormDemoPage был создан словарь WebElements, который содержит все объекты страницы для страницы с формой. Метод fillForm() в классе FormDemoPage выполняет все необходимые действия для заполнения формы.

Поскольку мы использовали интерактивный режим Cypress для нахождения ссылки Input Form Submit WebElement, аналогично мы можем использовать интерактивный режим для поиска всех полей на этой странице “Form Demo”.

Давайте найдем поле Name на этой странице “Form Demo”.

Cypress предоставляет селектор вместе с командой для поиска поля Name на странице – “cy.get('#name)“. Аналогичным образом мы можем найти другие поля на странице.

Для всех полей на странице был создан словарь WebElements, и в методе fillForm() используются все свойства из словаря webElements для взаимодействия со всеми соответствующими полями.

Тестовые данные играют важную роль в тестировании любой формы. Эти данные должны генерироваться автоматически, чтобы нам не приходилось каждый раз управлять ими при запуске тестов. Учитывая это, библиотека @faker-js/faker генерирует тестовые данные.

Имя файла: FormDemoPage.js

import { faker } from '@faker-js/faker';class FormDemoPage {  webElements = {    nameField: () => cy.get("#name"),    emailField: () => cy.get("#inputEmail4"),    passwordField: () => cy.get("#inputPassword4"),    companyField: () => cy.get("#company"),    websiteField: () => cy.get("#websitename"),    countryField: () => cy.get(":nth-child(3) > .pr-20 > .w-full"),    cityField: () => cy.get("#inputCity"),    addressLineOneField: () => cy.get("#inputAddress1"),    addressLineTwoField: () => cy.get("#inputAddress2"),    stateField: () => cy.get("#inputState"),    zipCodeField: () => cy.get("#inputZip"),    submitBtn: () => cy.get(".bg-lambda-900"),    successMessageText: () => cy.get(".success-msg"),  };  fillForm() {    this.webElements.nameField().type(faker.person.fullName());    this.webElements.emailField().type(faker.internet.email());    this.webElements.passwordField().type("Password@1234");    this.webElements.companyField().type(faker.company.name());    this.webElements.websiteField().type(faker.internet.domainName());    this.webElements.countryField().select("India");    this.webElements.cityField().type(faker.location.city());    this.webElements      .addressLineOneField()      .type(faker.location.streetAddress(false));    this.webElements.addressLineTwoField().type(faker.location.street());    this.webElements.stateField().type(faker.location.state());    this.webElements.zipCodeField().type(faker.location.zipCode());    this.webElements.submitBtn().click();  }  getSuccessMessageText() {    return this.webElements.successMessageText();  }}module.exports = new FormDemoPage();

Следующая строка в тесте после заполнения формы – выполнить проверку утверждением для подтверждения текста сообщения об успехе. В Cypress есть возможность выполнять встроенные проверки с помощью метода should() и сопоставления текста.

Метод getSuccessMessageText() вызывается из класса FormDemoPage. Этот метод возвращает текст сообщения в формате String.

Имя файла: FormDemoPage.js

Это завершает наш тест.

Теперь давайте обсудим, как выполнять тесты на сетке облака LambdaTest.

Запуск автоматизированных тестов с использованием Cypress на облачной сетке

Мы будем запускать тесты на облачной сетке LambdaTest с использованием следующей комбинации ОС и браузера.

Операционная система	Имя браузера	Версия браузера
MacOS Ventura	Chrome	116(Последняя)
Windows 10	Microsoft Edge	116(Последняя)

Мы выполним тесты параллельно, потому что нам нужно запустить один и тот же тест в двух разных браузерах, т.е. Chrome и Microsoft Edge. Параллельное выполнение тестов помогает сэкономить время выполнения тестов, так как все тесты выполняются одновременно.

Для запуска тестов в параллель, нам нужно обновить значение parallels в разделе run_settings файла lambdatest-config.json.

Мы будем использовать пакет lambdatest-cypress-cli, чтобы запустить тесты на облачной сетке LambdaTest. Для выполнения тестов нам нужно выполнить следующую команду из терминала:

lambdatest-cypress run --user=<"ВАШЕ ИМЯ ПОЛЬЗОВАТЕЛЯ LAMBDATEST"> --ak=< "ВАШ КЛЮЧ ДОСТУПА LAMBDATEST">

Имя пользователя и ключ доступа LambdaTest можно получить, войдя на веб-сайт LambdaTest и перейдя в Профиль > Настройки учетной записи > Пароль и безопасность.

Запущенные тесты на облачной сетке LambdaTest можно просмотреть на панели инструментов LambdaTest. Она предоставляет ясное представление о выполнении тестов, предоставляя детальные шаги выполнения теста в аналитике тестов LambdaTest. Подробности, такие как видеозаписи, журналы устройств, снимки экрана и т. д., также можно просмотреть.

Ознакомьтесь с нижеприведенными снимками экрана, которые предоставят вам отчет о панели инструментов для тестирования веб-автоматизации.

Информация о сборке и проведенных тестах видна на следующих снимках экрана. Каждый тест включает название теста, имя браузера, версию браузера, имя ОС, соответствующую версию ОС и разрешение экрана.

Также есть видео теста, которое было выполнено, что дает лучшее представление о том, как тесты были запущены в браузерах.

Запуск теста Cypress на локальной машине

Следующая команда может быть использована для запуска тестов Cypress в браузере Chrome на локальной машине.

npx cypress run --browser=chrome

По умолчанию все локальные тесты выполняются в безголовом режиме. После выполнения у нас есть видеозапись в папке videos. Также мы можем видеть путь к видеофайлу, который отображается в консоли.

Аналогично для выполнения тестов в браузере Microsoft Edge можно использовать следующую команду:

npx cypress run --browser=edge

Мы также можем добавить команду выполнения тестов в раздел “scripts” файла package.json. Таким образом, мы запускаем сокращенную команду для запуска тестов и не должны помнить длинные команды для выполнения тестов.

После обновления команд в разделе “scripts” вместо выполнения команды

npx cypress run --browser=chrome мы может запустить команду npm run cypress:chrome для запуска тестов в браузере Chrome.

Точно так же теперь можно использовать команду npm run cypress:edge для запуска тестов в браузере Microsoft Edge.

Заключение

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

Используя интеграцию Cypress с платформами облачного тестирования, такими как LambdaTest, вы можете запускать тестирование веб-автоматизации на разных платформах, браузерах и их версиях, не беспокоясь о установке операционной системы и браузера, поскольку все инфраструктура предоставляется по требованию.

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