Краткий обзор достоинств фреймворка Cypress и подборка полезных ссылок от Test Engineer Noveo Ольги.
На сегодняшний день самым популярным инструментом для автоматизации тестирования веб-приложений остается Selenium. Но у него есть альтернативы, среди которых набирает известность Cypress. Я расскажу о возможностях этого относительно нового инструмента и о том, почему новичку в автоматизации стоит начать путь с него, а опытным автотестерам присмотреться поближе.
Cypress — это open-source фреймворк, в основе которого лежат тестовые JavaScript-библиотеки Mocha и Chai. Он подходит для end-to-end, интеграционных и unit-тестов. В отличие от Selenium, Cypress не запускает удаленные команды, а выполняется прямо в браузере одновременно с тестируемым приложением.
Почему Cypress?
Самым главным достоинством Cypress, на мой взгляд, является его удобный тест-раннер. Он позволяет отслеживать выполнение тестов в реальном времени, а также «путешествовать во времени» — переходить по шагам и видеть, что происходило на каждом этапе. А если тест падает, то отображается сообщение об ошибке, в котором подробно описано, в чем проблема. Кроме того, Cypress автоматически сохраняет скриншоты и видео.
Уникальной является способность Cypress самостоятельно бороться с проблемами асинхронной работы веб-приложений. Нестабильность тестов может быть вызвана разными причинами, например:
- приложение не успело обновить DOM к моменту запуска команд,
- приложение ожидает ответа от сервера перед заполнением элемента DOM и т.д
Рассмотрим алгоритм работы на примере простой команды:
Сперва с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://github.com/cypress-io/cypress-example-recipes
Например, типичный сценарий выглядит так: перейди на главную страницу приложения, на ней найди поля авторизации, введи данные пользователя, нажми отправить, проверь ответ. Код для такого сценария будет выглядеть примерно так:
Для бывалых: особенности работы
Для автоматизаторов, которые до этого не имели дела 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://itnext.io/await-do-not-sleep-your-e2e-tests-df67e051b409
Больше статей:
https://docs.cypress.io/examples/media/blogs-media.html#sidebar
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: