E2E-тестирование веб-приложений: Playwright или Cypress
Практика3 минРедакция Innovialabs
Коротко
E2E-тесты проверяют ключевые пользовательские сценарии целиком, через настоящий браузер. Playwright сильнее в кроссбраузерности, параллельности и нескольких вкладках, Cypress — в удобной интерактивной отладке; для нового проекта чаще выбирают Playwright.
Короткий ответ
E2E-тест (end-to-end) открывает приложение в настоящем браузере и проходит сценарий так, как это сделал бы пользователь: заходит, кликает, заполняет формы, проверяет результат. Он ловит то, что не видят unit-тесты: сломанную связку фронтенда, API и базы данных.
Если выбирать коротко:
- Playwright — когда нужны разные браузеры (включая WebKit, движок Safari), параллельный запуск без доплат, несколько вкладок или доменов в одном тесте.
- Cypress — когда команде важна наглядная интерактивная отладка и тесты живут в основном в одном браузере.
Что покрывать E2E-тестами
E2E-тесты медленнее и капризнее unit-тестов, поэтому их должно быть немного, но на самых важных сценариях:
- вход, регистрация, восстановление пароля;
- основной путь денег: корзина, оформление, оплата в тестовом режиме;
- ключевая форма: заявка, бронирование, создание сущности;
- права доступа: пользователь не видит чужие данные и админские страницы.
Не стоит проверять через E2E каждую ветку валидации или вёрстку каждого экрана — для этого есть unit- и компонентные тесты.
Сравнение
| Критерий | Playwright | Cypress |
|---|---|---|
| Браузеры | Chromium, Firefox, WebKit | Семейство Chrome, Firefox, Edge; WebKit экспериментально |
| Языки | JS/TS, Python, Java, .NET | JS/TS |
| Параллельность | Встроенные воркеры | Через платный облачный сервис или сторонние решения |
| Несколько вкладок и доменов | Поддерживаются | Ограничены, для доменов есть cy.origin |
| Отладка | UI-режим, trace viewer | Интерактивный раннер с «машиной времени» |
| Ожидания | Автоматические | Автоматические |
Скорость сильно зависит от приложения и инфраструктуры, но встроенный параллельный запуск обычно даёт Playwright преимущество на больших наборах тестов.
Удобство разработчика: у Cypress очень наглядный раннер — видно каждый шаг и состояние страницы. У Playwright есть кодген (запись действий в код), UI-режим и трассировка, которую удобно разбирать после падения в CI.
Первый тест входа: Playwright
Установка создаёт конфиг и пример теста:
npm init playwright@latest
В playwright.config.ts укажите baseURL вашего приложения, затем тест:
import { test, expect } from "@playwright/test";
test("пользователь входит в систему", async ({ page }) => {
await page.goto("/login");
await page.getByLabel("Email").fill("user@example.com");
await page.getByLabel("Пароль").fill(process.env.TEST_PASSWORD!);
await page.getByRole("button", { name: "Войти" }).click();
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole("heading", { name: "Кабинет" })).toBeVisible();
});
Запуск: npx playwright test.
Тот же тест: Cypress
describe("вход", () => {
it("пользователь входит в систему", () => {
cy.visit("/login");
cy.get('[data-testid="email"]').type("user@example.com");
cy.get('[data-testid="password"]').type(Cypress.env("TEST_PASSWORD"), { log: false });
cy.get('button[type="submit"]').click();
cy.url().should("include", "/dashboard");
});
});
Как сделать тесты стабильными
- Ищите элементы по роли и подписи или по
data-testid, а не по CSS-классам. - Не ставьте фиксированные паузы — полагайтесь на автоожидания.
- Отдельная тестовая база и тестовые пользователи; каждый тест готовит свои данные.
- Вход через API в остальных тестах: UI-логин проверяйте один раз, а дальше сохраняйте сессию.
- Пароли — в переменных окружения, не в коде.
- Запуск в CI на каждый pull request.