Диаграмма, показанная выше, взята из npmtrends, что ясно указывает на то, что Cypress стал доминирующим выбором в последние годы. Это можно объяснить несколькими причинами.
Введение
Cypress был специально разработан для оптимизации процессов разработки и тестирования за счет использования параллельного подхода, облегчающего разработку через тестирование (TDD). Он предлагает гибкость для написания модульных тестов, интеграционных тестов и сквозных тестов. В отличие от Selenium, который полагается на Webdriver для взаимодействия с браузерами, Cypress напрямую взаимодействует с объектной моделью документа (DOM), что делает его более удобным для разработчиков.
Вот некоторые ключевые преимущества использования Cypress:
- Удобство для разработчиков: Cypress написан на JavaScript и поставляется в комплекте с библиотеками утверждений Mocha и Chai, обеспечивая знакомую и удобную среду для разработчиков.
- Простая настройка. Настройка Cypress проста и удобна.
- Поддержка кросс-браузерного тестирования: Cypress поддерживает тестирование в разных браузерах.
- Более быстрое выполнение тестов: Cypress напрямую взаимодействует с DOM, что приводит к более быстрому выполнению тестов.
- Активное сообщество: Cypress может похвастаться активным и поддерживающим сообществом, обеспечивающим постоянное совершенствование и легкодоступные ресурсы.
Начнем
Настраивать
Прежде чем писать тесты с помощью Cypress, важно подготовить следующую настройку:
- Редактор: я предпочитаю использовать VS Code, но можно использовать любой редактор кода.
- Node.js: Node.js — это внутренняя среда выполнения JavaScript.
- npm: npm — это менеджер пакетов JavaScript, используемый для публикации и установки пакетов из общедоступного реестра npm. Инструкции по настройке Node.js и npm вы можете найти здесь.
Если вы планируете использовать Cypress для модульного тестирования, рекомендуется поместить базу кода Cypress в тот же репозиторий, что и кодовую базу вашей разработки. Однако, если у вас есть отдельный репозиторий для тестирования, создайте папку и выполните шаги, указанные ниже.
- Настройте новый пакет 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. А пока приятного чтения!