Cypress — мощный инструмент для сквозного тестирования веб-приложений. Он полностью написан на JavaScript, поэтому это прекрасное решение для разработчиков интерфейса, позволяющее использовать TDD с одновременной разработкой интерфейса и сквозным тестированием. Проверьте его другие характеристики!

Почему Кипарис?

Cypress выполняет тестовые случаи прямо в браузере. Напротив, Selenium работает вне браузера и отправляет команды компоненту WebDriver для их выполнения. Вот почему тесты Cypress имеют очень быстрое время отклика (менее 20 мс). Никаких дополнительных зависимостей или библиотек не требуется, Cypress — это автономный инструмент. Он поставляется с полным опытом тестирования и отладки. Он оснащен перезагрузкой в ​​реальном времени, возможностью отладки непосредственно в DevTools, что делает процесс тестирования похожим на процесс веб-разработки. Чтобы завершить тестирование, Cypress предоставляет функцию записи тестов, поэтому тестер может исследовать код во время и после выполнения теста и исследовать автоматические скриншоты во время выполнения в случае сбоя. Во время самой разработки теста Cypress предоставляет предопределенные интуитивно понятные и краткие команды, которые идеально подходят для небольших проектов.

Монтаж

В этой статье мы напишем наш первый тест на Cypress. Но сначала нам нужно установить несколько пакетов.
Прежде всего, вам нужно установить npm. Если вам необходима установка, следуйте инструкциям на
https://phoenixnap.com/kb/install-node-js-npm-on-windows. Чтобы проверить, прошел ли процесс успешно, используйте команду npm -v, чтобы узнать, какая версия npm была введена.

Однако давайте перейдем к установке Cypress.

  • Откройте IDE и введите команду «npm install -g cypress».
  • Обратите внимание, что для правильной установки Cypress требуется определенная структура проекта. Чтобы получить это, есть 3 варианта:
    — использовать команду «npm init»
    — иметь папку node_modules
    — существует файл package.json.
  • Чтобы запустить Cypress Test Runner, введите команду «cypress open».

Существует также возможность установить кипарис локально в качестве зависимости разработчика для определенного проекта. Затем вы предпримете следующие шаги:

  • перейдите в папку вашего проекта
  • используйте команду npm install cypress –save-dev
  • запустить кипарис: ./node_modules/.bin/cypress открыть ИЛИ npx кипарис открыть

В результате запускается Cypress Test Runner, содержащий все написанные кипарисовые тесты. На данный момент доступны только примеры тестов. Чтобы запустить его, нажмите на название теста.

Окно выполнения теста состоит из разных секций. Слева находится журнал команд [1], дающий нам информацию о шагах, предпринятых в тесте и утверждении. Над журналом команд находится меню состояния теста [2]. Он сообщает нам о количестве пройденных и непройденных тестов, а также о времени, которое потребовалось для выполнения теста. Справа находится предварительный просмотр приложения [3], показывающий, как в данный момент выглядит веб-страница.

Тем не менее, помимо способа запуска тестов в режиме браузера, есть также возможность запускать свои тесты в фоновом режиме и получать сводку выполнения тестов. Чтобы получить это, используйте команду: «npx cypress run –browser firefox» или «npx cypress run –browser firefox:dev» для локально установленного Cypress. Обратите внимание, что вы можете тестировать в различных веб-браузерах, например. для Chrome замените последнее слово в вашей команде на «chrome».

После завершения выполнения должна быть видна сводка теста.
Этот метод выполнения теста отлично подходит для регрессионных тестов, так как мы хотели бы проверить, проходят ли созданные тесты, пока разрабатываем новые функции в нашем проект.

Написание первого теста

Теперь мы напишем наш первый тест.
Создайте файл sample_spec.js в папке /integration. Введите следующий код:

В этом тесте мы хотели проверить поведение кнопки «Тип» на веб-странице. Ожидаемый результат здесь — перенаправление на новый URL.

description() помогает нам группировать связанные тесты вместе

cy — глобальный объект, обращающийся к командам Cypress;

cy.visit(‘url’) позволяет нам перейти на страницу URL

cy.contains(‘type’).click() — ищет элемент, содержащий строку «type», и щелкает по нему

Последняя команда является утверждением. Нажав на элемент, мы вошли на новую страницу. Утверждение проверяет, содержит ли новый URL строку «/commands/actions». Утверждение делается с помощью ключевого слова should().

Теперь попробуем написать новый тест. Мы перейдем на страницу https://example.cypress.io/commands/actions и проверим, есть ли возможность заполнить поле электронной почты.
Внутри скобок description(){} введем новый тест.

cy.get() ищет элемент на странице по классу «.action-email».

.type() вводит данные — [email protected] в найденном элементе

.should(‘have.value’, ‘x’) — утверждение для поля, имеющего значение x

Когда мы запускаем наши тесты, мы видим, что они завершились успешно. Мы успешно ввели адрес электронной почты.
Если тест завершится неудачно, он покажет нам дополнительную информацию о сбое, а неудачные шаги будут выделены красным цветом. Посмотрим, как он поведет себя, если мы попытаемся провалить тест.

Измените ожидаемый результат на несуществующее значение, например:

Мы ожидаем, что испытание провалится.

Мы можем наблюдать, как изменилось поведение Test Runner. Это показало нам, что один из наших тестов провалился. Более того, он выдал ошибку с четкой информацией:

"ожидалось, что ‘‹input#email1.form-control.action-email›’ будет иметь значение ‘[email protected]’, но значение было ‘[email protected]’»

Очень ясная и простая для понимания ошибка, не так ли?

Что Cypress дает нам заранее, так это снимки сделанных шагов, чтобы мы могли мгновенно отлаживать тест. Если мы наведем указатель мыши на команду в журнале команд, он покажет нам снимок предпринятых шагов. Мы также можем закрепить определенный шаг для проведения дальнейших исследований. Есть возможность увидеть снимок до и после выполнения шага. Мы также можем найти дополнительную информацию, запустив DevTools (F12) при закреплении определенного шага. Это предоставит более подробную контекстную информацию.

Кроме того, в нашем тесте Cypress добавил некоторые дополнительные комментарии, в том числе наиболее важные события, происходящие между шагами. В нашем примере мы видим, что щелчок по элементу вызвал перенаправление на новый URL-адрес.

Есть еще несколько способов отладить наш тест. Один из них — с помощью команды cy.pause():

Когда мы запускаем такой тест, он приостанавливается и позволяет нам сделать следующий шаг или возобновить тест.

Кроме того, как вы могли уже заметить, сделав некоторые изменения в коде и сохранив файл, Cypress автоматически перезагружает Test Runner, так что это удобно в процессе разработки.

В качестве бонуса давайте запустим тесты в фоновом режиме. Как вы, возможно, помните, предполагается использовать команду «npx cypress run –browser firefox» внутри нашего терминала IDE. При неудачном тесте результаты выполнения теста будут показывать ошибки.

Мы можем заметить, что Cypress автоматически сделал скриншот сбойного поведения.

Однако, если мы зафиксируем утверждение:

выполнение теста покажет успех.

Краткое содержание

Подводя итог, в этой статье мы написали наш первый тест и выполнили его. Ура! Было не сложно, правда? Cypress — очень быстрый и легкий инструмент для тестирования, поэтому написать базовый тест просто как раз, два, три.

Что меня больше всего удивило в Cypress как тестировщике, так это то, как он справляется с процессом тестирования. Благодаря перезагрузке в реальном времени и компиляции на локальном хосте он больше похож на процесс программирования внешнего интерфейса. Более того, нужно написать несколько строк кода, чтобы тест работал. Глобальный cy. объект, содержащий доступ ко всем командам и элементам на странице, делает выполнение теста понятным.

Тем не менее, есть еще много вещей, которые можно открыть, так что продолжайте двигаться и узнайте больше о Cypress.

Полезные ссылки:

https://docs.cypress.io/guides/getting-started/installing-cypress#npm-install

https://docs.cypress.io/guides/getting-started/writing-your-first-test