12 мая 2020

Автоматизация тестирования: почему стоит попробовать 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

  • Не используйте cy.wait(time), ищите альтернативы:

https://docs.cypress.io/guides/references/best-practices.html#Unnecessary-Waiting

  • Соблюдайте принцип DRY: выносите повторяющийся код в функции или создавайте кастомные команды Cypress.Commands.add.

https://docs.cypress.io/api/cypress-api/custom-commands.html

Источники и полезные ссылки:

Официальная документация Cypress: https://docs.cypress.io/guides/overview/why-cypress.html

Отличный туториал Cypress: https://testautomationu.applitools.com/cypress-tutorial/

Туториал MochaJS: https://testautomationu.applitools.com/mocha-javascript-tests/

Воркшопы (подходят для самостоятельного прохождения):

https://github.com/cypress-io/testing-workshop-cypress

https://noriste.github.io/reactjsday-2019-testing-course/book/course-description.html

Статьи:

https://bespoyasov.ru/blog/coin-e2e-with-cypress/

https://medium.com/asos-techblog/how-to-go-about-front-end-testing-with-cypress-io-a-success-story-898451ff1c79

https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/

https://itnext.io/await-do-not-sleep-your-e2e-tests-df67e051b409

Больше статей:

https://docs.cypress.io/examples/media/blogs-media.html#sidebar

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: