Розробка E2E-тестів для сайту (Cypress)
Збій у критичному сценарії користувача — втрачена конверсія та підпорчена репутація. Ручні регресійні тести забирають години перед кожним релізом, а знайти баг після деплою — дорого. Ми вирішуємо цю проблему: впроваджуємо наскрізні тести на Cypress, які перевіряють кожен шлях користувача від кліка до бекенду. Автоматизація регресії знижує витрати на ручне тестування та прискорює випуск релізів.
На відміну від Selenium або Puppeteer, Cypress запускається в тому ж циклі подій, що й застосунок. Це дає вбудований time-travel debugger, автоматичне очікування елементів без sleep() та повний контроль над мережевими запитами через cy.intercept(). Як зазначено в документації, Cypress дозволяє писати тести в 2 рази швидше, ніж Selenium, завдяки вбудованому автоматичному очікуванню. Ми використовуємо його для проєктів на React, Vue, Angular та навіть на чистому JavaScript. Наш досвід — 10 років та 40+ проєктів з E2E-тестуванням. Вартість впровадження для типового сайту — від $2000, що окупається за 2–3 місяці за рахунок зниження витрат на регресію.
Які проблеми вирішує 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 дні |
Вартість розраховується індивідуально після оцінки проєкту. Наприклад, для сайту з 5 ключовими сценаріями вартість стартує від $2000.
Ми гарантуємо, що тести будуть стабільні: використовуємо data-cy атрибути, мокаємо зовнішні API через cy.intercept() та уникаємо sleep(). Це робить тести детермінованими та знижує flaky-прогони. У результаті ви отримуєте надійне покриття, яке окупається завдяки стабільності релізів та зниженню часу на регресію. Наш досвід — понад 10 років та 40+ проєктів з E2E-тестуванням на Cypress.
Зв'яжіться з нами — отримайте консультацію по вашому проєкту. Оцінимо обсяг, терміни та приступимо до впровадження. Замовте впровадження E2E-тестів вже сьогодні — це окупиться стабільністю релізів та спокоєм команди.