testengineer.ru

E2E-тестирование и Cypress

Автор

Дата

Категория

E2E-тестирование и существующие фреймворки

Selenium

Старейший фреймворк, все еще самый популярный. Поддерживает Java, Python, C#, Ruby, JavaScript. Эмулирует почти все возможные действия пользователя. 

Cucumber

Фреймворк ориентирован на behavior-driven development (BDD) — “разработка через поведение”; удобный как для разработчиков, так и QA. Главное преимущество: простота.

Cypress

И наконец Cypress, делающий жизнь тестировщиков проще. В нем нет некоторых проблем, существующих в Selenium, потому что он имеет другую архитектуру — построен на основе JS-фреймворка Mocha. Преимущества: простота и удобство асинхронных тестов. Применяется BDD/TDD-библиотека (TDD = test-driven development).

Как он работает

как работает cypress

Во первых, есть раннер с удобным интерфейсом. Он показывает все тесты и их состояние (runned, passed, failed). Можно тестировать интерактивные приложения и сложные операции с DOM; чтение и запись данных в полях, отправку форм, перенаправление на другие страницы без модификаций кода.

Плюсы и минусы Cypress с точки зрения E2E-тестирования

Плюсы

  • Он ориентирован в первую очередь на JavaScript, то есть можно тестировать буквально все что происходит в браузере
  • Удобен для кроссбраузерного тестирования, отлично поддерживает Chrome, Firefox и Edge (и не только)
  • Стабилен, меньше головной боли со sleep- и wait- функциями: есть встроенный механизм обработки ожиданий DOM-элементов
  • Поддерживает end-to-end-тестирование API
  • Позволяет “откатить действия” по каждой команде (cy.snapshot), благодаря чему можно проверить, что произошло после какого-то действия (или перед ним)

Минусы 

  • Не поддерживает мобильное тестирование (увы)
  • Не обрабатывает все «нативные» события. Применяются «синтетические» события. Операции с файлами, наведение курсора и скролл (пока) не поддерживаются
  • Список поддерживаемых браузеров не то чтобы очень широк. Например IE, Opera и даже Safari не поддерживаются
  • Только JavaScript, и это все. Если с JS проблемы, тебе просто нужен другой фреймворк

К делу

Если все-таки твой выбор Cypress и E2E-тестирование в нем, то ставим Cypress. Сначала процесс на MacOS. (Позже и на Windows). Далее работа пойдет в редакторе, так что без разницы.

Итак, в MacOS открываем терминал и набираем brew update:

Когда brew обновился, вводим brew install node в терминале:

После (обязательной) установки Node.js, проверяем версию node и npm (устанавливаемого вместе с node) командами: node -v и npm -v. Появится следующий вывод:

На Windows-машине надо просто скачать отсюда и установить Node.js, и в командной строке ввести те же команды выше (node -v и npm -v) для проверки версий.

Итак установка npm завершена, можно ставить сам Cypress, командой npm install cypress

Появится вывод:

В Windows просто скачиваем Cypress здесь и ставим.

Знакомимся с интерактивным тест-раннером

Как должно быть видно на последнем скриншоте, там есть команда запуска Cypress. Это команда для запуска тест-раннера. Вводим ее в терминале: node_modules/.bin/cypress open. (Это для Mac, в Windows чуть отличается).

Cypress выполняет тесты в достаточно интересном раннере, позволяющем видеть команды во время их выполнения, также и состояние тестируемого приложения. Посмотрим работу раннера на примере тестового файла testSample. Запустим его нажатием Run 1 integration spec.

Подробнее о раннере.

Пишем первый скрипт

Настало время написать тестовый скрипт, но сначала посмотрим на структуру папок.

Папка sampleTest — здесь все файлы, в ней вложенные папки cypress и node_modules. В папке Cypress вложена папка fixtures, здесь данные для теста. Папка cypress содержит папку integration, здесь файлы для выполнения теста. Далее, там же папка plugins, это для расширений и дополнительных функций, и также videos, здесь записи теста. Папка node_modules: node-модули.

В нашем случае написан простейший скрипт, который заходит на сайт.

Команда describe задает имя тест-сьюта, it описывает тест-кейс. cy это сокращение от названия фреймворка. Далее точка ( . ) и команда visit. Выполняя ее, скрипт зайдет на сайт. 

Запускаем скрипт в раннере.

Можно также запустить тот же тест из IDE-терминала, нажав кнопку Run.

Полезные команды

cy.visit() – Как мы уже видели выше, команда применяется для открытия страницы

.and() – Создание assertion-ов («утверждений»).

cy.viewport() – Показ сайта в заданном разрешении

cy.contains() – Поиск DOM-элемента с указанным текстом

cy.should()Создание утверждения

cy.get() – Получить один (или несколько) DOM-элементов по селектору или маске

cy.url() – URL-адрес активной страницы

cy.click() – Клик по DOM-элементу

cy.check() – Отметить чекбоксы/радиокнопки

cy.log() – Отправить запись в лог

cy.dbclick() – Двойной клик на DOM-элементе

cy.clear() – Очистить значение в поле ввода

cy.type() – Операции с текстом в DOM-элементе (в том числе специальные символы и действия)

cy.focus() – Фокус на DOM-элементе

cy.focused() – Получить DOM-элемент на котором сейчас фокус, для операций с ним

(Полный список команд желательно просмотреть сейчас)

Практика

Итак Cypress поставлен, написан и выполнен первый тестовый скрипт. Погружаться в более глубокие “user journeys” сейчас не будем, а просто посмотрим, как выглядит несложный сценарий, реализованный в Cypress.

Итак, пользователь заходит на сайт и открывает страницу. Далее он расшаривает эту страницу. Далее оставляет отзыв-комментарий, и закрывает сайт.

В виде плана это будет выглядеть так:

  1. Пользователь заходит на сайт
  2. Проверяет название страницы
  3. Открывает одну из статей на сайте
  4. Ищет страницу, по ее названию
  5. Находит и расшаривает страницу
  6. Возвращается к ней
  7. Оставляет комментарий
  8. Закрывает сайт

Простая “user journey”; скрипт для нее выглядит примерно так:

Теперь запускаем тест в Chrome:

Теперь запускаем тест в раннере (видео):

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

Если тема заинтересовала, пишите в комментариях!

***

Выбираем правильные инструменты автоматизации (с таблицей)

Ускоряем свои тесты с помощью сypress-grep

Лучшие open-source инструменты для автоматизированного тестирования

Какой была ваша первая зарплата в QA и как вы искали первую работу?

Мега обсуждение в нашем телеграм-канале о поиске первой работы. Обмен опытом и мнения.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

$1100*
медианная зарплата в QA в ноябре

*по результатам опроса QA-инженеров в нашем телеграм-канале

Последние публикации

Последние комментарии