Разработка E2E-тестов для сайта (Cypress)
Сбой в критическом сценарии пользователя — потерянная конверсия и подпорченная репутация. Ручные регрессионные тесты отнимают часы перед каждым релизом, а найти баг после деплоя — дорого. Мы решаем эту проблему: внедряем сквозные тесты на Cypress, которые проверяют каждый пользовательский путь от клика до бэкенда. Автоматизация регрессии снижает расходы на ручное тестирование и ускоряет выпуск релизов. В отличие от Selenium или Puppeteer, Cypress запускается в том же цикле событий, что и приложение. Это даёт встроенный time-travel debugger, автоматическое ожидание элементов без sleep() и полный контроль над сетевыми запросами через cy.intercept(). Мы используем его для проектов на React, Vue, Angular и даже на чистом JavaScript.
Какие проблемы решает E2E-тестирование на Cypress?
- Флейковые тесты — главная боль E2E. Cypress автоматически ожидает элементы и не использует sleep(), что устраняет нестабильность.
- Долгий прогон регрессии — при параллельном запуске на CI время сокращается с часов до минут.
- Сложность отладки — time-travel позволяет пошагово просмотреть каждый шаг и понять, что пошло не так.
Кейс: тестирование многошагового заказа для интернет-магазина
Для одного клиента мы покрыли флоу оформления заказа с интеграцией Stripe. Написали 15 тестов, которые проверяли успешную оплату, отказ карты, таймаут и возврат к корзине. Использовали cy.intercept() для мока ответов Stripe, что сделало тесты полностью детерминированными. Результат: время регрессии сократилось с 4 часов до 15 минут, а частота багов на проде снизилась на 30%.
Почему Cypress — лучший выбор для E2E-тестирования?
Cypress позволяет писать тесты в 2–3 раза быстрее, чем Selenium, благодаря встроенному автоматическому ожиданию и отсутствию WebDriver. Он интегрируется напрямую с фреймворками, поддерживает перехват всех сетевых запросов и даёт возможность путешествовать во времени — видеть каждый шаг теста в интерфейсе. Это снижает время отладки флейковых тестов на 40%.
Что мы покрываем тестами?
- Аутентификация и сессии: логин, регистрация, восстановление пароля — с моками API для независимости от среды.
- Основные user flows: оформление заказа, добавление товара в корзину, создание сущностей — полная цепочка от UI до базы.
- Навигация и маршрутизация: проверка редиректов, хлебных крошек, 404 страниц.
- Обработка ошибок: недоступность сервиса, некорректные данные, сетевые таймауты — чтобы пользователь не видел белый экран.
Мы проверяем не только happy path, но и граничные случаи: пустые корзины, некорректные купоны, истечение сессии. Это обеспечивает пользовательский опыт на грани отказоустойчивости.
Как мы реализуем E2E-тесты на Cypress?
Установка и конфигурация
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 в CI/CD?
Настраиваем запуск тестов в GitHub Actions, GitLab CI или Jenkins. Для параллельного запуска используем Cypress Dashboard или GitHub Actions matrix strategy. Это сокращает время прогона 40 тестов до 3–4 минут. Также настраивается запись результатов для анализа флейковых тестов.
Сравнение подходов к E2E-тестированию
| Критерий | Cypress | Selenium | Playwright |
|---|---|---|---|
| Установка | npm i -D cypress |
Требует WebDriver | npm i @playwright/test |
| Скорость выполнения | Высокая (встроенный wait) | Средняя (явные ожидания) | Высокая (авто-ожидание) |
| Поддержка браузеров | Chrome, Firefox, Edge | Все основные | Все основные |
| Time-travel debugger | Встроенный | Нет | Нет |
| Перехват сети | cy.intercept() |
Требуется прокси | page.route() |
| Документация и сообщество | Огромное | Огромное | Растущее |
Что входит в работу?
- Аудит текущего UI — определяем ключевые сценарии и точки стабильности.
- Разработка фреймворка — настраиваем Cypress, пишем кастомные команды и фикстуры.
- Покрытие тестами — от 20 до 80 сценариев в зависимости от сложности проекта.
- Интеграция CI/CD — настраиваем запуск в GitHub Actions, GitLab CI или Jenkins.
- Документация и обучение — передаём команде инструкции по запуску и обновлению тестов.
- Гарантия стабильности — два цикла прогона на вашем стенде и фиксация flaky-тестов.
Сроки реализации
| Объём тестов | Срок |
|---|---|
| 20–40 сценариев (типовой сайт) | 5–8 дней |
| 40–80 сценариев (сложный UI) | 10–14 дней |
| Дополнительная кросс-браузерность | +2–3 дня |
Стоимость рассчитывается индивидуально после оценки проекта.
Мы гарантируем, что тесты будут стабильны: используем data-cy атрибуты, моким внешние API через cy.intercept() и избегаем sleep(). Это делает тесты детерминированными и снижает flaky-прогоны. В результате вы получаете надёжное покрытие, которое окупается за счёт стабильности релизов и снижения времени на регрессию. Наш опыт — более 5 лет и 30+ проектов с E2E-тестированием на Cypress.
Свяжитесь с нами — получите консультацию по вашему проекту. Оценим объём, сроки и приступим к внедрению. Закажите внедрение E2E-тестов уже сегодня — это окупится стабильностью релизов и спокойствием команды.