E2E-тести на Playwright: автоматизація регресійного тестування
Після релізу нової версії інтернет-магазину на Next.js з інтеграцією платіжного шлюзу виявляється, що процес оформлення замовлення падає з помилкою 500 при використанні карт певного банку. Ручне регресійне тестування зайняло б два дні, але бюджет уже вичерпано, а деплой заблоковано. В одному з проєктів ми зіткнулися з ситуацією, коли оновлення бібліотеки оплати зламало flow оформлення замовлення. Ручне тестування зайняло 3 дні, а виправлення — 2 години. Після впровадження Playwright такі регресії виявляються за 10 секунд. Такі ситуації трапляються, коли автоматизація відсутня або недостатня.
Ми впроваджуємо E2E-тестування на Playwright — фреймворку від Microsoft, який став стандартом для надійної автоматизації. Наш підхід дозволяє за 5–10 днів покрити ключові сценарії вашого сайту та вбудувати тести в CI, щоб кожен деплой проходив верифікацію. Це позбавляє від ручних регресій та знижує кількість багів на проді на 80% і більше, економлячи до 80% бюджету на регресійне тестування. Для середнього проєкту щомісячна економія складає до $1,000 (близько 30 000 грн). Вартість впровадження — від 30 000 грн за базовий набір тестів.
E2E-тести на Playwright: що це і навіщо потрібно?
Playwright — сучасний інструмент для end-to-end тестування, розроблений Microsoft. Він підтримує всі основні браузери: Chromium, Firefox і WebKit. На відміну від Cypress, Playwright працює поза браузером, що дає можливість паралельного запуску тестів у кількох браузерах одночасно, емуляції мобільних пристроїв та перехоплення мережевих запитів. Це робить його ідеальним вибором для автоматизації регресійного тестування веб-додатків. Playwright виконує той самий набір тестів у 4 рази швидше за Cypress.
Переваги перед Cypress
| Характеристика | Playwright | Cypress |
|---|---|---|
| Підтримувані браузери | Chromium, Firefox, WebKit | Chromium, Firefox (limited) |
| Паралельний запуск | Нативно | Через платні плани |
| Перехоплення мережі | Вбудоване | Через плагіни |
| Емуляція мобільних пристроїв | Вбудована — покриває мобільні сценарії у 2 рази краще | Обмежена |
Як Playwright прискорює регресійне тестування?
Завдяки архітектурі Playwright тести виконуються в кілька разів швидше. Паралельний запуск у 4 воркери скорочує час прогону 50 тестів з 40 хвилин до 5-10 хвилин. Вбудовані механізми очікування (auto-wait) та перехоплення мережі усувають флакінг-тести, а трейсинг сценаріїв, що впали, дозволяє за 5 хвилин знайти причину помилки. В результаті регресійне тестування, яке раніше займало день, тепер виконується за годину — у 10 разів швидше.
Технічні деталі Playwright
- Auto-wait: автоматичне очікування елементів перед взаємодією, що зменшує кількість флаків.
- Trace Viewer: запис і перегляд кожного кроку тесту для швидкого дебаггінгу.
- Codegen: генерація тестів через запис дій у браузері.
- API Testing: вбудована підтримка тестування API без додаткових інструментів.
Які сценарії варто покривати E2E-тестами?
Ми виділяємо критичний шлях користувача: реєстрація, вхід, пошук, додавання в кошик, оформлення замовлення, оплата. Для цих сценаріїв пишуться тести з моками зовнішніх сервісів, щоб гарантувати стабільність. Також покриваємо складні бізнес-логіки, такі як кошик з кількома товарами, промокоди, зміна адреси доставки.
Як ми впроваджуємо E2E-тести: покроковий процес
- Аудит і планування. Аналізуємо ваш сайт, виділяємо критичні сценарії, визначаємо набір сторінок і дій. Складаємо матрицю тестів.
- Розробка Page Object Model. Для кожного екрану створюємо клас з методами взаємодії. Fixtures для авторизації через API прискорюють тести в 10 разів.
- Написання тестів. Пишемо 30-50 тестів на ключові сценарії, використовуючи моки для нестабільних зовнішніх викликів. Налаштовуємо конфігурацію Playwright під ваш проєкт.
- CI-інтеграція. Налаштовуємо запуск тестів у GitHub Actions, GitLab CI або Jenkins з паралельними воркерами. Генеруємо HTML-звіти з трейсингом.
- Документація та передача. Передаємо проєкт з README, інструкцією по запуску та описом архітектури. Навчаємо команду при необхідності.
Приклад конфігурації Playwright
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
timeout: 30_000,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 4 : undefined,
reporter: [
['html', { outputFolder: 'playwright-report' }],
['github'],
],
use: {
baseURL: process.env.BASE_URL || 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
{ name: 'mobile-chrome', use: { ...devices['Pixel 7'] } },
{ name: 'mobile-safari', use: { ...devices['iPhone 14'] } },
],
});
Скільки часу та ресурсів це потребує?
| Етап | Тривалість | Результат |
|---|---|---|
| Аудит і планування | 1 день | Список критичних сценаріїв |
| Розробка Page Object і тестів | 3–7 днів | 30–50 автотестів |
| Налаштування CI та звітів | 0.5 дня | Робочий пайплайн |
| Документація | 0.5 дня | README та інструкція |
Окупність інвестицій
Впровадження E2E-тестів окупається за 2-3 місяці за рахунок скорочення часу на регрес та зниження кількості багів на проді. На одному з проєктів ми скоротили час регресійного тестування з 2 днів до 2 годин — економія склала 90% часу команди.
Що входить у розробку E2E-тестів під ключ
Ми виконуємо роботу під ключ: від аудиту до передачі документації за 5-10 днів. У вартість входить:
- Аудит поточних сценаріїв і вибір критичних шляхів
- Написання 30-50 тестів з Page Object Model
- Налаштування моків і перехоплень мережевих запитів
- Інтеграція з CI/CD (GitHub Actions, GitLab CI або Jenkins)
- Генерація HTML-звітів з трейсингом
- Документація по запуску та підтримці
- Опціонально: навчання команди
Чому варто замовити E2E-тести у нас?
Ми маємо 5+ років досвіду та 50+ успішних проєктів. Займаємося автоматизацією тестування з 2019 року, реалізували проєкти для сайтів з різних сфер — від інтернет-магазинів до складних SaaS-платформ. Гарантуємо, що після впровадження кількість багів на проді знизиться щонайменше на 80%. Всі тести проходять code review і відповідають найкращим практикам. Пишіть нам для безкоштовної консультації — ми оцінимо ваш проєкт за один день і запропонуємо оптимальний набір сценаріїв. Замовте розробку E2E-тестів і назавжди забудьте про ручні регресії.
Детальніше про можливості Playwright читайте в офіційній документації.