Noveo Блог • Автоматизация тестирования: почему стоит попробовать Cypress

Краткий обзор достоинств фреймворка Cypress и подборка полезных ссылок от Test Engineer Noveo Ольги.

Noveo test automation Cypress

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

Cypress — это open-source фреймворк, в основе которого лежат тестовые JavaScript-библиотеки Mocha и Chai. Он подходит для end-to-end, интеграционных и unit-тестов. В отличие от Selenium, Cypress не запускает удаленные команды, а выполняется прямо в браузере одновременно с тестируемым приложением.

Почему Cypress?

Самым главным достоинством Cypress, на мой взгляд, является его удобный тест-раннер. Он позволяет отслеживать выполнение тестов в реальном времени, а также «путешествовать во времени» — переходить по шагам и видеть, что происходило на каждом этапе. А если тест падает, то отображается сообщение об ошибке, в котором подробно описано, в чем проблема. Кроме того, Cypress автоматически сохраняет скриншоты и видео.

Уникальной является способность Cypress самостоятельно бороться с проблемами асинхронной работы веб-приложений. Нестабильность тестов может быть вызвана разными причинами, например:

приложение не успело обновить DOM к моменту запуска команд,
приложение ожидает ответа от сервера перед заполнением элемента DOM и т.д

Рассмотрим алгоритм работы на примере простой команды:

Noveo test automation Cypress

Сперва сy.get() запрашивает DOM приложения и находит элементы, которые соответствуют селектору ‘.list li’. Затем пробует выполнить проверку количества элементов. Если команда проверки еще не может быть выполнена в силу какой-то из описанных выше причин, то cy.get() будет пытаться повторно запросить DOM, и так далее, пока не истечет таймаут команды (по умолчанию — 4 секунды, можно задать любой).

То есть Cypress автоматически ждет, пока приложение достигнет нужного состояния. Не нужно возиться с установкой ожиданий для элементов DOM или повторных попыток их поиска — Cypress сам позаботится об этом.

Чем хорош для новичков

Что касается новичков, то эти достоинства Cypress могут оказаться решающими при выборе первого инструмента для обучения автоматизации:

1. Официальная документация и есть лучший туториал! Создатели Cypress уделили ей особое внимание, поэтому, даже если вы никогда до этого не писали код, сможете легко разобраться.

2. Простота установки и настройки. Буквально пара команд, и уже можно написать первый тест.

https://docs.cypress.io/guides/getting-started/installing-cypress.html

3. Если вы уже знакомы с JavaScript, то будет еще проще. Cypress получает много положительных отзывов от фронтенд-разработчиков, решивших воспользоваться им для самостоятельного написания тестов.

4. В Cypress есть возможность скопировать готовый селектор прямо из окошка тест-раннера. На этапе обучения эта функция экономит время и позволяет писать рабочие тесты даже с минимумом знаний html/css. Причем подбор селектора идет с соблюдением приоритета — если элементам добавлены специальные тестовые атрибуты data-cy или data-test, то будут выбраны именно они.

Отдельно стоит отметить интуитивно понятные команды и сценарии выполнения. Огромное количество примеров кода есть в официальной документации:

https://example.cypress.io/

https://github.com/cypress-io/cypress-example-recipes

Например, типичный сценарий выглядит так: перейди на главную страницу приложения, на ней найди поля авторизации, введи данные пользователя, нажми отправить, проверь ответ. Код для такого сценария будет выглядеть примерно так:

Noveo Test automation Cypress

Для бывалых: особенности работы

Для автоматизаторов, которые до этого не имели дела c написанием тестов на JavaScript, работа Cypress может показаться необычной. Команды Cypress выполняются асинхронно, то есть непоследовательно. По сути, он выполняет тестовый код дважды. В первый раз — для чтения и постановки в очередь всех команд, которые нужны для выполнения. Затем загружает страницу и выполняет команды одну за другой.

В Cypress каждый it (тест) — это отдельная независимая сессия. То есть тем, кто, пользуясь другими инструментами, привык использовать одну и ту же сессию между тестами, нужно это учитывать. В Cypress реализован встроенный механизм очистки local/session storage, cookie и всего кэша, который срабатывает после прохождения каждого отдельного теста.

Cypress не позиционируется как универсальный инструмент для любых видов тестирования. Поддержка кроссбраузерности появилась в последней версии, ранее был только Chrome, сейчас тесты можно запускать в Chrome, Edge, Firefox(beta), Electron.

Существующие ограничения:

Cypress поддерживает только языки JavaScript и TypeScript и встроенный тест-раннер Mocha.
Нельзя открыть несколько вкладок и окон, перейти на сторонние ресурсы.
Не подходит для тестирования мобильных приложений.
Пока не поддерживает нативные события браузера.

Напоследок советы для тех, кто захотел попробовать:

Один тест (it) должен проверять только один кейс.
Отдельные тесты не должны зависеть друг от друга.
Запуск только одного теста: it.only, пропустить запуск: it.skip.
Пользуйтесь хуками Mocha: before(), beforeEach(), after(), afterEach().

https://docs.cypress.io/guides/references/bundled-tools.html#Mocha

Если элементам не добавлены тестовые атрибуты data-cy, использование cy.contains() — наименьшее из зол. Эта команда позволяет искать элемент по тексту в нем. Подробнее про лучшие практики подбора селекторов:

https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements