Разработка E2E-тестов для сайта (Cypress)

Разработка E2E-тестов для сайта (Cypress)

Cypress — наиболее популярный инструмент E2E-тестирования для веб-приложений. Запускает тесты прямо в браузере, имеет встроенный time-travel debugger, автоматическое ожидание элементов и перехват сетевых запросов.

Установка

npm install -D cypress
npx cypress open  # первый запуск — создаёт структуру директорий

Структура проекта

cypress/
├── e2e/          # тестовые спецификации
├── fixtures/     # статические данные для тестов
├── support/
│   ├── commands.ts   # кастомные команды
│   └── e2e.ts        # глобальная конфигурация
└── cypress.config.ts

Базовый тест: авторизация

// cypress/e2e/auth/login.cy.ts
describe('Login', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('successfully logs in with valid credentials', () => {
        cy.get('[data-cy="email-input"]').type('[email protected]');
        cy.get('[data-cy="password-input"]').type('password123');
        cy.get('[data-cy="login-btn"]').click();

        cy.url().should('include', '/dashboard');
        cy.get('[data-cy="user-name"]').should('contain', 'Иван');
    });

    it('shows error on invalid credentials', () => {
        cy.get('[data-cy="email-input"]').type('[email protected]');
        cy.get('[data-cy="password-input"]').type('wrongpass');
        cy.get('[data-cy="login-btn"]').click();

        cy.get('[data-cy="error-message"]')
            .should('be.visible')
            .and('contain', 'Неверный email или пароль');
    });
});

Перехват API-запросов

// Мок API — тест не зависит от бэкенда
it('displays products from API', () => {
    cy.intercept('GET', '/api/products*', {
        fixture: 'products.json',
        statusCode: 200,
    }).as('getProducts');

    cy.visit('/products');
    cy.wait('@getProducts');

    cy.get('[data-cy="product-card"]').should('have.length', 10);
});

// Проверка запроса
it('sends correct payload on form submit', () => {
    cy.intercept('POST', '/api/orders', (req) => {
        expect(req.body).to.deep.include({ productId: 1, quantity: 2 });
        req.reply({ statusCode: 201, body: { orderId: 100 } });
    }).as('createOrder');

    // ... действия
    cy.wait('@createOrder');
    cy.get('[data-cy="success-message"]').should('be.visible');
});

Кастомные команды

// cypress/support/commands.ts
Cypress.Commands.add('login', (email = '[email protected]', password = 'password') => {
    cy.request('POST', '/api/auth/login', { email, password })
        .then(({ body }) => {
            localStorage.setItem('auth_token', body.token);
        });
    cy.visit('/');
});

Cypress.Commands.add('createUser', (overrides = {}) => {
    return cy.request('POST', '/api/test/users', {
        name: 'Test User',
        email: `test-${Date.now()}@example.com`,
        ...overrides,
    }).its('body');
});

// Использование
before(() => cy.login());

Тестирование форм

it('validates registration form', () => {
    cy.visit('/register');
    cy.get('[data-cy="submit-btn"]').click();

    // Проверить сообщения об ошибках
    cy.get('[data-cy="name-error"]').should('contain', 'Обязательное поле');
    cy.get('[data-cy="email-error"]').should('contain', 'Обязательное поле');

    // Заполнить форму
    cy.get('[data-cy="name"]').type('Иван Петров');
    cy.get('[data-cy="email"]').type('invalid-email');
    cy.get('[data-cy="submit-btn"]').click();

    cy.get('[data-cy="email-error"]').should('contain', 'Некорректный email');

    cy.get('[data-cy="email"]').clear().type('[email protected]');
    cy.get('[data-cy="password"]').type('SecurePass123!');
    cy.get('[data-cy="submit-btn"]').click();

    cy.url().should('include', '/dashboard');
});

CI/CD интеграция

# .github/workflows/e2e.yml
name: E2E Tests

on: [push]

jobs:
  cypress:
    runs-on: ubuntu-latest
    services:
      app:
        image: myapp:latest
        ports: ['3000:3000']
    steps:
      - uses: actions/checkout@v3
      - uses: cypress-io/github-action@v6
        with:
          start: npm run start:ci
          wait-on: 'http://localhost:3000'
          record: true
          parallel: true
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

Типичное покрытие E2E

• Регистрация, логин, сброс пароля
• Основные user flows (оформление заказа, создание объекта)
• Навигация и маршрутизация
• Обработка ошибок и недоступности сервиса

Срок реализации

Настройка Cypress + 20–40 сценариев для типового коммерческого сайта: 5–8 дней.