Почему Cypress - лучший способ проверить
Как начать тестирование веб-приложений с Cypress, краткое руководство
Cypress - это фреймворк для сквозного тестирования JavaScript, который позволяет вам писать тесты, которые запускаются в браузере, как Selenium. Ключевое отличие состоит в том, что его легко настроить, у него нет зависимостей, и с ним приятно писать и использовать тесты. Это избавляет от хлопот по настройке и заменяет их радостью выполнения работы.
Начало работы с Cypress за считанные минуты
Я создал образец веб-приложения и хотел бы провести несколько простых тестов, чтобы проверить, работает ли вход в систему должным образом. Пример приложения, который мы рассмотрим, написан на JavaScript с использованием Preact, но Cypress может тестировать любое веб-приложение. Если вам интересно, прочтите мою предыдущую статью Сохранение пользовательских данных с помощью более легкой версии React, чтобы узнать немного о создании приложения с Preact.
Получить настройку
Начать работу так же просто, как npm install cypress --save-dev, вы можете открыть средство запуска тестов с помощью npx cypress open или добавив его в свои сценарии проекта:
Напишем тест
При первом запуске cypress он создает полный набор примеров тестов, которые действительно полезно просмотреть и выяснить, какие возможности предлагает Cypress и как сразу начать их использовать. Я рекомендую бегло взглянуть, чтобы вы начали, вы можете сохранить примеры на некоторое время для справки, пока не получите и не начнете некоторые из ваших собственных тестов.
Ниже представлена страница входа в систему, которую мы хотим протестировать с помощью Cypress. Есть несколько вещей, которые упростят тестирование. У вас должна быть возможность найти элементы, с которыми вы хотите взаимодействовать в DOM, это можно сделать с помощью селекторов запросов, и, поскольку это очень простой пример, я добавил идентификаторы к элементам, с которыми необходимо регулярно взаимодействовать: #email и #password.
В /cypress/integration/login.spec.js мы можем добавить наши тесты. Это должно быть знакомо любому, кто раньше использовал фреймворки для тестирования, такие как Jest. Вы заметите, что перед каждым тестом мы посещаем страницу входа, которая размещается локально с помощью простого сервера.
Если непонятно, что происходит, давайте разберемся в одном из тестов.
Цель теста - убедиться, что пользователь может ввести свой адрес электронной почты во входные данные. Сначала мы получаем элемент с cy.get("#email"), затем мы можем ввести адрес электронной почты, используя метод .type("[email protected]"), и, наконец, мы подтверждаем наше предположение с помощью .should("have.value", "[email protected]"). Это очень простой тест, но я думаю, он подчеркивает, насколько прост в использовании и понимании Cypress.
Давайте полностью протестируем страницу входа в систему для простого случая использования, когда пользователь пытается войти с неправильными учетными данными и получает сообщение об ошибке входа.
Этот тест читать не сложнее, чем любой другой, мы находим и заполняем поля электронной почты и пароля, прежде чем нажимать кнопку отправки. Мы можем протестировать неудачный вход в систему, когда сообщение в элементе с идентификатором login-message соответствует «Login Failed». Самое замечательное в Cypress заключается в том, что нам не нужно беспокоиться о том, чтобы ждать изменения элементов, это происходит автоматически. Таким образом, в нашем последнем тесте, когда мы проверяем, что URL-адрес изменился с помощью cy.location("pathname").should("include", "/user/profile"), Cypress не нужно указывать, чтобы он дождался завершения навигации, по умолчанию он использует тайм-аут. Это позволяет создавать четкие и краткие тесты, которые смогут понять и написать большее количество людей в вашей команде.
Интерактивное тестирование - узнайте, что происходит
Вы можете открыть средство запуска тестов с помощью cypress open и, если хотите, запускать тесты в интерактивном режиме. Это может быть весьма полезно при построении тестов, чтобы убедиться, что они делают то, что вы ожидаете. Ниже представлена запись тестов, проводимых Cypress.
Давайте прервем наши тесты, изменив идентификатор поля пароля.
Мы можем видеть ошибки, которые помешали прохождению теста, и визуальный результат выполнения тестов. Однако обычно вы хотите запускать набор тестов в командной строке, не открывая каждый раз браузер. Это может быть достигнуто с помощью cypress run, который будет запускать тесты с использованием автономного браузера.
Тестовый результат - самая крутая функция Cypress
Одна из лучших вещей, на мой взгляд, - это результаты тестов. Когда вы запустите Cypress, он запишет тестовый запуск как видео с высокой степенью сжатия. Он достаточно мал, чтобы не занимать слишком много места в исходной папке, и достаточно подробен, чтобы получить представление о цикле тестирования. Это особенно полезно, когда тест не проходит, вы можете воспроизвести видео и быстро выяснить, в чем проблема. Неудачный тест также создаст скриншоты, которые вы можете использовать, чтобы собрать воедино, что пошло не так, как показано ниже.
На скриншоте видно, что тест «можно найти и ввести пароль» не прошел, потому что Cypress не смог найти элемент с идентификатором #password.
Эта функция интересна тем, что вы даже можете проверить результаты теста в системе управления версиями или загрузить артефакты, если тест не прошел в CI. Я думаю, что это имеет большое значение для того, чтобы сделать сквозное тестирование более доступным, чем когда-либо, и доступным для большего числа членов вашей команды.
Стоит ли использовать Cypress?
Если вы хотите быстро приступить к работе со сквозным тестированием, я рекомендую попробовать Cypress. Начать работу настолько легко, и он очень независим, что может хорошо подойти для многих проектов в Интернете. Хотя проект, который я показал, использует JavaScript и Preact / React, он не привязан к экосистеме JS, и вы, вероятно, можете использовать его для любого веб-сайта. Cypress может быть интегрирован в ваш существующий проект или работать независимо от среды тестирования.
Самым большим преимуществом Cypress является то, что его легко настроить и легко использовать. Настройка так же проста, как пара простых команд, и вы готовы к работе. То, что им легко пользоваться, не означает, что они ограничены. Cypress имеет широкий спектр функций, которые необходимы для тестирования. Хотя в этой статье это не затрагивается, существуют также различные плагины, которые должны помочь добавить больше функций или облегчить интеграцию Cypress в ваш текущий рабочий процесс. Это экономит много времени и устраняет некоторые препятствия на пути к непрерывному тестированию. Как я обнаружил, Jest - это простой способ модульного тестирования, Cypress - это простой способ начать сквозное и интеграционное тестирование. Вы должны хотя бы попробовать Cypress и посмотреть, подходит ли он вам и, возможно, вашей команде.
Посетите веб-сайт Cypress, чтобы начать работу с их полезными руководствами.
Взгляните на полный исходный код примера на GitHub.
