Введение в Cypress

В мире разработки программного обеспечения тестирование является неотъемлемой частью обеспечения качества и надёжности вашего приложения. Среди различных инструментов, доступных для автоматизации тестирования, Cypress выделяется как мощный и удобный фреймворк для сквозного тестирования веб-приложений. Построенный на JavaScript, Cypress предлагает широкий набор функций, которые делают его популярным среди разработчиков и инженеров по обеспечению качества.

Почему стоит выбрать Cypress?

Прежде чем углубляться в тонкости настройки и использования Cypress, давайте разберёмся, почему он так популярен:

  • Тестирование в разных браузерах: Cypress поддерживает тестирование в нескольких браузерах, позволяя вам убедиться, что ваше приложение работает без сбоев в разных средах.
  • Простая настройка: процесс установки прост и не требует дополнительных зависимостей, что упрощает интеграцию в новые и существующие проекты.
  • Интерактивная разработка тестов: Cypress предоставляет функцию живой перезагрузки, которая автоматически перезапускает тесты при внесении изменений в тестовый код, упрощая отладку и устранение неполадок.
  • Автоматическое ожидание и повторные попытки: Cypress управляет асинхронными операциями и автоматически ожидает доступности элементов DOM, уменьшая необходимость в явных ожиданиях или тайм-аутах. Он также включает встроенные механизмы повтора для обработки нестабильных тестов.

Настройка Cypress

Чтобы начать работу с Cypress, выполните следующие действия:

  1. Установите Node.js.

Сначала убедитесь, что у вас установлен Node.js. Вы можете скачать его с официального сайта Node.js.

  1. Установите Cypress.

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

npm install cypress --save-dev
  1. Инициализируйте Cypress.

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

npx cypress open

Эта команда создаст необходимую структуру папок и файлы конфигурации для Cypress.

  1. Структура папок.

Вот краткий обзор структуры папок, с которой вы столкнётесь:

cypress/
├── integration/
│   ├── demo/
│   │   └── firsttest.js
├── plugins/
├── support/
├── fixtures/
├── screenshots/
└── videos/
cypress.json
package.json
package-lock.json

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

Чтобы написать первый тест, перейдите в папку cypress/integration и создайте новую папку (например, demo). Внутри этой папки создайте новый файл (например, firsttest.js) со следующим содержимым:

describe('Мой первый тест', () => {
  it('Запуск браузера и навигация', () => {
    cy.visit('https://www.browserstack.com/');
    cy.title().should('eq', 'Самая надёжная платформа для приложений и кроссбраузерного тестирования | BrowserStack');
  });
});

Этот тест посещает сайт BrowserStack и проверяет, соответствует ли заголовок ожидаемой строке.

Запуск первого автоматизированного теста

Для запуска теста вы можете использовать средство запуска тестов Cypress:

npx cypress open

Это откроет интерфейс средства запуска тестов Cypress, где вы сможете выбрать и запустить свои тесты.

Для работы в автономном режиме вы можете использовать:

npx cypress run --spec './cypress/integration/demo/firsttest.js'

Настройка Cypress

Вы можете настроить различные параметры в файле cypress.json. Вот пример того, как вы можете настроить базовый URL-адрес и отключить запись видео:

{
  "baseUrl": "https://www.example.com",
  "video": false,
  "screenshotOnRunFailure": false
}

Рекомендации по автоматизации Cypress

Независимые тесты

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

Программная аутентификация

Обрабатывайте аутентификацию программно с помощью вызовов API, чтобы уменьшить зависимость от тестирования. Вот пример:

cy.request({
  method: 'POST',
  url: '/api/login',
  body: {
    username: 'user',
    password: 'password'
  }
}).then((response) => {
  // Используйте ответ для аутентификации сеанса
});

Использование атрибутов данных

Добавьте атрибуты data-* к элементам пользовательского интерфейса, чтобы повысить тестируемость и снизить зависимость от селекторов:

<button data-cy="submit-button">Отправить</button>

cy.get('[data-cy="submit-button"]').click();

Расширенные функции Cypress

Отладка с перемещением во времени

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

sequenceDiagram participant Тест participant Приложение Тест->Приложение: Выполнить действие Приложение->Тест: Обновить состояние Тест->Тест: Приостановить выполнение Тест->Приложение: Проверить состояние Тест->Тест: Возобновить выполнение

Заглушка сети и шпионаж

Cypress позволяет вам подменять или перехватывать сетевые запросы, чтобы имитировать различные ответы сервера или тестовые сценарии:

cy.intercept('GET', '/api/data', {
  body: {
    data: 'Поддельные данные'
  }
}).as('getData');

cy.wait('@getData').then((xhr) => {
  expect(xhr.response.body.data).to.eq('Поддельные данные');
});

Интеграция Cypress с конвейерами CI/CD

Cypress можно легко интегрировать с конвейерами непрерывной интеграции (CI) и непрерывного развёртывания (CD). Вот пример того, как вы можете добавить скрипт в свой package.json для запуска тестов Cypress:

"scripts": {
  "test": "cypress run --spec './cypress/integration/demo/firsttest.js'"
}

Затем вы можете настроить свой инструмент CI/CD для запуска этого скрипта всякий раз, когда изменения кода отправляются в репозиторий.

Заключение

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

Последние советы

  • Используйте файл cypress.json, чтобы настроить такие параметры, как базовый URL и запись видео.
  • Создайте команды быстрого доступа для выполнения тестов.
  • При необходимости переопределите настройки тайм-аута по умолчанию.
  • Используйте пользовательский интерфейс Cypress Test Runner для просмотра и настройки параметров теста.

С Cypress вы не просто автоматизируете тесты; вы обеспечиваете надёжность и готовность вашего приложения к работе в реальных условиях. Удачного тестирования!