Cypress для e2e тестирования

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

Для начала работы с Cypress необходимо установить его в проект. Это можно сделать с помощью менеджера пакетов npm или yarn:

npm install cypress --save-dev

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

npx cypress open

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

Cypress использует структуру папок, которую по умолчанию создает при первой настройке. В корневой директории проекта появляется папка cypress, которая делится на несколько подпапок:

  • fixtures — содержит тестовые данные (например, JSON-файлы).
  • integration — директория, где располагаются сами тесты.
  • plugins — плагины для расширения функциональности Cypress.
  • support — вспомогательные файлы, например, для установки глобальных настроек тестов.

Основные принципы работы Cypress

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

  1. Реальное выполнение в браузере. Тесты выполняются непосредственно в браузере, что позволяет видеть, как работает приложение в реальных условиях. Это дает возможность лучше понять поведение приложения, выявлять ошибки взаимодействия с пользователем и проверять UI.

  2. Асинхронность. Cypress автоматически управляет асинхронными запросами, синхронизируя их выполнение с тестами. Это избавляет от необходимости вручную использовать async/await или другие средства для работы с асинхронностью.

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

Структура тестов

Тесты в Cypress пишутся с использованием Mocha и Chai — популярных JavaScript-библиотек для тестирования. Структура тестов базируется на блоках describe, it и утверждениях (expect или should):

describe('Тестирование страницы входа', () => {
  it('Должен отображать форму входа', () => {
    cy.visit('/login');
    cy.get('form').should('be.visible');
  });

  it('Должен показывать ошибку при неверных данных', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('invalid');
    cy.get('input[name="password"]').type('wrongpassword');
    cy.get('button[type="submit"]').click();
    cy.get('.error-message').should('contain', 'Неверный логин или пароль');
  });
});

Взаимодействие с элементами

Cypress предоставляет разнообразные методы для взаимодействия с элементами на странице:

  • cy.get() — находит элемент по селектору.
  • cy.contains() — находит элемент по его текстовому содержимому.
  • cy.find() — ищет элемент внутри другого элемента.
  • cy.click() — имитирует клик по элементу.
  • cy.type() — вводит текст в поле ввода.

Все эти команды могут быть использованы для выполнения типовых действий в тестах:

cy.get('input[name="username"]').type('user');
cy.get('input[name="password"]').type('password');
cy.get('button[type="submit"]').click();

Ожидания и тайм-ауты

Cypress автоматически управляет тайм-аутами для большинства команд, однако в некоторых случаях нужно явно настроить время ожидания. Например, можно использовать команду cy.wait(), чтобы задержать выполнение теста на некоторое время или ожидать завершения запроса:

cy.wait(2000); // Ожидание 2 секунды
cy.wait('@getData'); // Ожидание завершения запроса

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

Работа с запросами и API

Одной из ключевых возможностей Cypress является возможность перехвата HTTP-запросов и ответов. Для этого используется команда cy.intercept(), которая позволяет не только перехватывать запросы, но и изменять их:

cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');
cy.visit('/dashboard');
cy.wait('@getData');

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

Работа с данными и стейтом

Cypress позволяет работать с состоянием приложения, например, сохранять и восстанавливать данные между тестами. Для этого можно использовать cy.session() или работать с локальным хранилищем браузера:

cy.setCookie('session_id', '12345');
cy.visit('/profile');
cy.get('.user-info').should('contain', 'Пользователь');

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

Расширение Cypress с помощью плагинов

Cypress поддерживает множество плагинов, которые позволяют расширять его функциональность. Например, плагины для работы с визуальными тестами (Cypress-image-snapshot), для записи тестов (Cypress-io/command-log), для интеграции с другими инструментами CI/CD и много других.

Плагины устанавливаются через npm:

npm install cypress-image-snapshot --save-dev

После установки плагин настраивается в файле commands.js:

import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();

Это позволяет использовать команды для визуального тестирования, например:

cy.get('.header').matchImageSnapshot();

Запуск тестов в CI/CD

Cypress интегрируется с большинством инструментов для непрерывной интеграции (CI), таких как Jenkins, CircleCI, GitHub Actions и других. Для этого можно использовать команду cypress run, которая запускает тесты в headless-режиме, не открывая браузера.

Пример конфигурации для GitHub Actions:

name: Cypress Tests

on: [push]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Run Cypress tests
        run: npx cypress run

Это позволяет автоматизировать тестирование и интегрировать его в pipeline.

Преимущества Cypress

  1. Простота в использовании. Cypress предлагает интуитивно понятный API и простую настройку.
  2. Визуализация выполнения тестов. Благодаря встроенному интерфейсу можно в реальном времени отслеживать шаги выполнения тестов.
  3. Автоматическое управление тайм-аутами. Cypress автоматически ожидает завершения асинхронных операций, что упрощает написание тестов.
  4. Поддержка различных браузеров. Cypress поддерживает Chrome, Chromium, Edge и Firefox, что позволяет тестировать приложение в разных средах.
  5. Быстрое выполнение. Тесты выполняются быстро благодаря использованию встроенного браузера и асинхронному выполнению команд.

Cypress является мощным инструментом для тестирования приложений с богатым функционалом, ориентированным на end-to-end тесты. Его использование значительно ускоряет процесс разработки и повышает качество продукта, автоматизируя проверку всех ключевых сценариев.

Оглавление