Розробка 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('успішно логінить з коректними даними', () => {
        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('показує помилку при неправильних даних', () => {
        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('відображає товари з 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('надсилає коректне навантаження при відправці форми', () => {
    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('валідує форму реєстрації', () => {
    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 }}

Часовий графік

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