Легкое сквозное тестирование с Cypress.io
Почему Кипарис?
Кипарис часто сравнивают с Селеном, однако у них есть принципиальные отличия в архитектуре. В конечном итоге Cypress - это инструмент для тестирования всего, что происходит в браузере. С его помощью вы можете писать все типы тестов: Сквозные тесты, Интеграционные тесты и Модульные тесты. Возможно, вы ищете способ легко и безболезненно писать сквозные тесты для реагирующего приложения (или, конечно, любого другого фреймворка). Возможно, вы, как и я, ищете альтернативу фреймворку Selenium. Этот короткий пример покажет вам, насколько легко создать свой первый сквозной тест с помощью Cypress.
Что такое сквозное тестирование?
Сквозное тестирование - это метод, который тестирует весь программный продукт от начала до конца, чтобы гарантировать, что поток приложения ведет себя так, как ожидалось. Он определяет зависимости системы и гарантирует, что все интегрированные компоненты работают вместе, как ожидалось.
Другими словами, цель сквозного тестирования - протестировать всю систему с точки зрения конечного пользователя. Вы моделируете поведение реального пользователя, чтобы проверить, как взаимодействуют все подсистемы. Например, взаимодействие со сторонними системами, интерфейсами, базами данных и т. Д.
Это именно тот тип теста, который находится на вершине пирамиды тестирования. Вы должны помнить, что на вершине пирамиды тесты становятся более сложными, медленными и более дорогими в обслуживании.
Создание тестового приложения
Предпосылки
Вам потребуется Node 8.16.0 или Node 10.16.0 или более поздняя версия на вашей локальной машине для разработки.
Создать приложение React
Используйте одну из этих команд, чтобы создать приложение для реагирования.
Команда npx:
npx create-react-app cypress-with-reactjs
команда пряжи:
yarn create react-app cypress-with-reactjs
команда npm:
npm init react-app cypress-with-reactjs
Вам не нужно устанавливать или настраивать такие инструменты, как Webpack или Babel. Они предварительно настроены и скрыты, поэтому вы можете сосредоточиться на коде.
Внутри только что созданного проекта вы можете запускать встроенные команды для запуска приложения:
yarn start
or
npm start
Запускает приложение в режиме разработки. Откройте http: // localhost: 3000, чтобы просмотреть его в браузере. Страница автоматически перезагрузится, если вы внесете изменения в код. Вы увидите ошибки сборки и предупреждения о ворсинах в консоли.
Установка Cypress
Давайте добавим Cypress.io в наш проект, используя одну из следующих команд
yarn add cypress --dev
or
npm install cypress --save-dev
Запускаем Cypress
Выполните одну из этих команд, чтобы открыть кипарис. Через мгновение запустится Cypress Test Runner.
yarn run cypress openor
npx cypress open
После первого запуска Сypress создает новые папки в вашем проекте. Вы можете найти там много полезных примеров. Конечно, позже вы можете удалить ненужные файлы и папки. Теперь мы можем закрыть это всплывающее окно и перейти к Cypress Runner Ui.
Написание своего первого теста
Настройка Cypress
Чтобы упростить запуск Сypress, добавим script к package.json
После добавления этого скрипта мы можем запустить Сypress следующим образом:
yarn cypress:open
or
npm run cypress:open
Когда проект добавляется в Cypress, в проекте создается файл cypress.json. Этот файл используется для хранения любых предоставленных вами значений конфигурации. В нашем случае нам нужно только одно значение.
Подготовить проект
Давайте добавим простую логику, которую мы будем тестировать. А именно несколько полей для ввода и форма для отображения введенной информации. Мы также добавим bootstrap реакции, чтобы он выглядел достойно.
- Установите response-bootstrap:
yarn add react-bootstrap bootstrap
or
npm i react-bootstrap bootstrap
- Удалите все из
./src/App.js - Вставьте следующий код в
./src/App.js
Первый тест
Создайте новый тестовый файл ./cypress/integration/form_spec.js для проверки формы.
Напишем наш первый тест. Чтобы помочь вам правильно написать имена тестов, вы можете использовать шаблон «единица работы - сценарий / контекст - ожидаемое поведение»:
describe('[unit of work]', () => {
it('should [expected behaviour] when [scenario/context]', () => {
});
});
Вы можете найти полезные предложения о том, как назвать тесты в этом репозитории. Чтобы увидеть тест в действии, запустите приложение реакции:
yarn start
откройте другой терминал и запустите сценарий, который мы добавили в package.json:
yarn cypress:open
После этого посмотрим, как заводится кипарисовик. В правом верхнем углу выберите браузер, в котором хотите протестировать. Затем выберите тест, который хотите запустить.
Вы можете увидеть результат теста с так называемым путешествием во времени.
Cypress автоматически возвращается во времени к моменту выполнения этой команды. Кроме того, поскольку cy.contains() находит элементы DOM на странице, Cypress также выделяет элемент и прокручивает его в поле зрения (в верхнюю часть страницы).
Cypress запускает тесты в уникальном интерактивном средстве выполнения, которое позволяет вам видеть команды по мере их выполнения, а также просматривать тестируемое приложение.
Тестирование формы
Мы хотим смоделировать действия реального пользователя. Итак, давайте создадим тест, который вводит имя и адрес электронной почты в поля ввода.
Здесь мы видим несколько новых методов:
.get(selector) - Получить один или несколько элементов DOM с помощью селектора или псевдонима.
.should(chainers, value) - Создать утверждение. Утверждения автоматически повторяются, пока они не пройдут или не истечет время ожидания.
.type(text) - Введите элемент DOM.
Как видите, мы создали пару локальных переменных. Этого можно избежать, используя приспособления. Для этого давайте добавим новый файл ./cypress/fixtures/form.fixtures.json для приборов и фиктивные данные:
{
"email": "[email protected]",
"name": "Max Mustermann"
}
Чтобы использовать светильники, мы используем еще один новый метод:
.fixture(filePath) - загрузить фиксированный набор данных, находящихся в файле.
Теперь наш тест выглядит следующим образом:
Подтвердить тестирование кнопки
Давайте создадим новый файл ./cypress/integration/submit.button_spec.js для тестирования кнопки отправки. Давайте смоделируем поведение реального пользователя. Для этого введите имя и адрес электронной почты, а затем нажмите кнопку отправки. Здесь мы увидим пару новых методов:
.click() - Щелкните элемент DOM.
.and() - Завершить цепочку команд.
Одна интересная особенность Cypress заключается в том, что вы можете связывать вызовы методов.
И вот наш результат. Легкий лимонный сок.
Кипарисовик без головы
С помощью этой команды вы можете запускать автономные тесты.
cypress runПо умолчанию он будет запускать все тесты автоматически в браузере Electron. Однако можно передавать разные варианты.
cypress run --browser chrome
Я надеюсь, что на этом коротком примере вы убедитесь, что сквозное тестирование не должно быть трудным. Сypress делает процесс плавным и приятным. Конечно, есть огромное количество функций, о которых в статье не упоминается. Однако Сypress документация просто великолепна, в ней можно найти множество примеров и лучших практик.
Здесь вы можете найти исходный код примера.
«Качество никогда не бывает случайным; это всегда результат разумных усилий ». - Джон Раскин
