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

Введение

Cypress был специально разработан для оптимизации процессов разработки и тестирования за счет использования параллельного подхода, облегчающего разработку через тестирование (TDD). Он предлагает гибкость для написания модульных тестов, интеграционных тестов и сквозных тестов. В отличие от Selenium, который полагается на Webdriver для взаимодействия с браузерами, Cypress напрямую взаимодействует с объектной моделью документа (DOM), что делает его более удобным для разработчиков.

Вот некоторые ключевые преимущества использования Cypress:

  1. Удобство для разработчиков: Cypress написан на JavaScript и поставляется в комплекте с библиотеками утверждений Mocha и Chai, обеспечивая знакомую и удобную среду для разработчиков.
  2. Простая настройка. Настройка Cypress проста и удобна.
  3. Поддержка кросс-браузерного тестирования: Cypress поддерживает тестирование в разных браузерах.
  4. Более быстрое выполнение тестов: Cypress напрямую взаимодействует с DOM, что приводит к более быстрому выполнению тестов.
  5. Активное сообщество: Cypress может похвастаться активным и поддерживающим сообществом, обеспечивающим постоянное совершенствование и легкодоступные ресурсы.

Начнем

Настраивать

Прежде чем писать тесты с помощью Cypress, важно подготовить следующую настройку:

  1. Редактор: я предпочитаю использовать VS Code, но можно использовать любой редактор кода.
  2. Node.js: Node.js — это внутренняя среда выполнения JavaScript.
  3. npm: npm — это менеджер пакетов JavaScript, используемый для публикации и установки пакетов из общедоступного реестра npm. Инструкции по настройке Node.js и npm вы можете найти здесь.

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

  1. Настройте новый пакет npm, запустив npm init в терминале. Нажмите Enter, чтобы сохранить все значения по умолчанию, и будет создан файл package.json.

2. Установите Cypress как devDependency, запустив npm i cypress -D. Вы можете проверить установку в файле package.json. Дополнительно должна быть создана папка node_modules со всеми необходимыми зависимостями.

3. Обновите тег scripts в package.json, добавив "cy:open": "cypress open" и "cy:run": "cypress run". Обновленный файл package.json должен выглядеть так:

4. В терминале запустите npm run cypress:open, чтобы открыть пользовательский интерфейс Cypress, и создайте папку cypress в текущем каталоге.

5. Выберите «Тестирование E2E», и в проект будут добавлены несколько файлов конфигурации. Нажмите «Продолжить».

6. Выберите Chrome в качестве браузера и нажмите кнопку «Начать E2E-тестирование в Chrome». Chrome откроется с возможностью создания первой спецификации.

7. Нажмите Создать новую спецификацию, чтобы начать добавление нового файла спецификации теста. Чтобы импортировать примеры, нажмите Спецификации примеров Scaffold, которые добавят файлы спецификаций примеров в проект. Теперь вы можете добавить свой первый файл спецификаций, который откроет браузер и посетит https://example.cypress.io/.

Поздравляем! Вы успешно запустили свой первый тест с помощью Cypress. В вашем редакторе вы увидите следующие созданные папки:

  • e2e: Эта папка содержит файлы тестовых спецификаций. Вы найдете созданный файл test_spec.cy.js. Вы можете добавить дополнительные файлы спецификаций и запустить их. Как упоминалось ранее, файл спецификаций состоит из describe() и it() функций. describe() или context представляют набор тестовых наборов, а it() или specify() — отдельные тестовые наборы.

  • fixtures: Эта папка используется для хранения файлов приборов, содержащих тестовые данные. Мы рассмотрим, как читать файлы фикстур в следующей части этого блога.
  • support: Эта папка состоит из двух файлов: commands.js, который можно использовать для написания пользовательских команд или перезаписи существующих, и e2e.js, в котором хранятся глобальные конфигурации.

Заключение

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