Что такое End-To-End тест?

Сквозное тестирование — это методология, используемая в жизненном цикле разработки программного обеспечения для проверки функциональности и производительности приложений. Цель состоит в том, чтобы смоделировать, как будет выглядеть реальный пользовательский сценарий от начала до конца.

Что такое кипарис?

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

С кипарисом мы можем писать все типы тестов:

  • Сквозные тесты
  • Интеграционные тесты
  • Модульные тесты

Быстрое, простое и надежное тестирование всего, что работает в браузере.

Особенности кипариса

Cypress имеет множество функций, которые не могут предоставить многие другие среды тестирования:

  • Путешествие во времени. Моментальные снимки — это экземпляры данных, созданные кодом в определенный момент времени, что позволяет разработчикам возвращаться во времени к предыдущим состояниям при тестировании.
  • Отладка: отладка непосредственно из инструментов. Читаемые ошибки и трассировка стека значительно ускоряют отладку.
  • Никакого асинхронного ада: Cypress автоматически ожидает команд и утверждений, прежде чем продолжить.
  • Скриншоты и видео: Cypress позволяет записывать видео для каждого файла спецификации при выполнении тестов.
  • Кросс-браузерное тестирование: вы можете запускать тесты в Chrome, Firefox, Edge или Electron.

Теперь, когда мы получили представление о том, что такое кипарис, пришло время попробовать его и написать наш первый тест E2E (End of End).

Настройка проекта

В этом руководстве мы собираемся использовать базовое приложение NextJsTodo в качестве примера, чтобы продемонстрировать, как мы можем написать некоторые тесты кипариса.

кипарисовая инсталляция

После завершения установки мы можем запустить его в безголовом режиме в интерфейсе командной строки с помощью npx cypress run, но вы сможете запускать только одну спецификацию за раз. не будет снимков DOM или даже просмотра файлов. Вместо этого рекомендуется открывать панель запуска с помощью:

Через мгновение откроется приложение Cypress.

Как видите, нам нужно выбрать тип теста, который мы собираемся использовать. Cypress 10 представляет новую функцию — тестирование компонентов, но мы оставим это для другой статьи. А пока давайте просто сосредоточимся на тестировании E2E.

При первом открытии кипариса после установки он попросит вас настроить структуру тестовой папки вместе с необходимыми файлами.

Каждый раз, когда мы начинаем новый проект, cypress попросит нас выбрать один из вариантов, начиная с :

  • Примеры спецификаций и тестов
  • Пустая спецификация

После выполнения шагов у нас будет автоматически сгенерированная тестовая папка Cypress внутри проекта.

cypress/downloads: эта папка создается автоматически, когда тест загружает любой файл и сохраняет его в себе.

cypress/e2e : также известная как папка интеграции, в ней сохраняются все тестовые файлы, написанные на javascript в формате (.js) или (.ts).

cypress/fixtures: используется для хранения объектов данных или внешних статических данных, которые можно использовать в ваших тестах. Обычно они используются с командой cy.fixture(). Формат данных по умолчанию — JSON.

cypress/support: файлы в этой папке выполняются перед каждым файлом спецификации, содержащим некоторый повторно используемый код, плагины, библиотеки и пользовательские команды, которые могут сделать тесты намного чище.

Напишем наш первый тест

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

В папке проекта /cypress/e2e/todo.cy.js

Каждый тест должен быть заключен в блок describe(), он принимает строку, описывающую тестовый пример, и функцию обратного вызова.

Cypress использует синтаксис Mocha BDD для структурирования теста, который отлично подходит как для интеграции, так и для модульного тестирования:

  • describe() / context(): функция, используемая для группировки тестов.
  • it()/specify(): функция, используемая для выполнения отдельного теста, и вложенная в description().
  • before() : функция, которая будет выполняться первой, независимо от ее положения в коде.
  • beforeEach(): функция, которая будет выполняться перед каждым тестовым блоком.
  • afterEach(): функция, которая будет выполняться после каждого тестового блока.
  • after(): функция, которая будет выполняться последней, независимо от ее места в коде.
  • .only() : единственный блок теста, который будет выполняться.
  • .skip(): функция, используемая для пропуска определенного теста.

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

https://docs.cypress.io/guides/references/assertions#BDD-Assertions

Одним из наиболее важных аспектов написания тестов с использованием cypress является доступ к элементам DOM с помощью команды cy.get(), которая принимает строковый селектор, используемый для фильтрации соответствующих элементов DOM. , Не рекомендуется использовать динамические классы, теги или идентификаторы, которые изменяются и вызывают проблемы при попытке нацеливания на некоторые элементы. Вместо этого добавьте атрибуты (data-*), так как это упрощает поиск элементы в DOM.

Рекомендации по выбору элементов:

Вернемся к нашему приложению Todo, прежде чем писать какие-либо тесты, рекомендуется собрать пользовательские истории и требования к функциям.

в нашем случае

Функция 1 «следует добавить задачи»:

it(‘добавляет задачи’, () =› { … });

Функция 2 «пользователь может выполнять задачи»:

it("должны завершить todos", () =› { … });

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

а в спек файле пишем

  • before() выполняется перед всеми тестовыми примерами
  • visit() в третьей строке мы используем его для перехода по указанному пути.
  • Метод type() используется для ввода текста в выбранный элемент, и если мы вводим {enter}, он представляет собой событие клавиатуры.
  • Метод should() Создает утверждение. Утверждения автоматически повторяются до тех пор, пока они не пройдут или не истечет время ожидания.
  • Метод each() выполняет итерацию по массиву, подобному массивам структур или объектам. В нашем случае мы получили список элементов одного уровня ‹li› для проверки их длины.

Когда все настроено, давайте откроем панель запуска кипариса с помощью команды npx cypress open и посмотрим, что у нас получилось.

вроде все тесты прошли успешно

Подведение итогов

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

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