E2E-тестирование и существующие фреймворки
Selenium
Старейший фреймворк, все еще самый популярный. Поддерживает Java, Python, C#, Ruby, JavaScript. Эмулирует почти все возможные действия пользователя.
Cucumber
Фреймворк ориентирован на behavior-driven development (BDD) — “разработка через поведение”; удобный как для разработчиков, так и QA. Главное преимущество: простота.
Cypress
И наконец Cypress, делающий жизнь тестировщиков проще. В нем нет некоторых проблем, существующих в Selenium, потому что он имеет другую архитектуру — построен на основе JS-фреймворка Mocha. Преимущества: простота и удобство асинхронных тестов. Применяется BDD/TDD-библиотека (TDD = test-driven development).
Как он работает
Во первых, есть раннер с удобным интерфейсом. Он показывает все тесты и их состояние (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.
Итак, пользователь заходит на сайт и открывает страницу. Далее он расшаривает эту страницу. Далее оставляет отзыв-комментарий, и закрывает сайт.
В виде плана это будет выглядеть так:
- Пользователь заходит на сайт
- Проверяет название страницы
- Открывает одну из статей на сайте
- Ищет страницу, по ее названию
- Находит и расшаривает страницу
- Возвращается к ней
- Оставляет комментарий
- Закрывает сайт
Простая “user journey”; скрипт для нее выглядит примерно так:
Теперь запускаем тест в Chrome:
Теперь запускаем тест в раннере (видео):
Такой короткий туториал уже позволяет оценить возможности Cypress. Это достаточно мощный инструмент E2E-тестирования. Особенно, если проект не требует знания каких-то еще языков программирования, кроме JS.
Если тема заинтересовала, пишите в комментариях!
***
Выбираем правильные инструменты автоматизации (с таблицей)
Ускоряем свои тесты с помощью сypress-grep
Лучшие open-source инструменты для автоматизированного тестирования
