Playwright: end-to-end тесты
Настоящий браузер, локаторы, автоожидание и что стоит проверять E2E.
Обновлено
Что такое Playwright
Playwright — инструмент для end-to-end (E2E) тестов: он запускает настоящий браузер (Chromium, Firefox, WebKit), открывает ваше приложение и пользуется им как человек — переходит по страницам, заполняет формы, кликает — а затем проверяет результат.
Это единственный вид тестов, который проверяет всё вместе: фронтенд, бэкенд, базу данных, роутинг, cookie. Для асинхронных Server Components и Server Actions в Next это рекомендуемый вариант.
import { expect, test } from '@playwright/test'
test('пользователь решает упражнение', async ({ page }) => {
await page.goto('/ru/js/functions')
await page.getByRole('button', { name: 'Проверить' }).first().click()
await expect(page.getByText('Решено')).toBeVisible()
})Локаторы — как находить элементы
| Локатор | Когда |
|---|---|
page.getByRole('button', { name: 'Отправить' }) |
по умолчанию — как в Testing Library |
page.getByLabel('Email') |
поля формы |
page.getByText('Добро пожаловать') |
видимый текст |
page.getByTestId('cart-total') |
когда ничего семантического не работает |
page.locator('.css') |
последний вариант — хрупкий |
Автоожидание — почему не нужен sleep
Playwright автоматически ждёт, пока элемент станет видимым, активным и стабильным, прежде чем кликнуть, а expect(...) повторяет проверку, пока она не пройдёт или не истечёт таймаут (по умолчанию 5 с).
await expect(page.getByText('Сохранено')).toBeVisible() // повторяет, пока не появится
await page.waitForTimeout(2000) // ✗ никогда не используйте фиксированный «sleep»Фиксированные паузы делают тесты медленными и нестабильными (иногда проходят, иногда нет).
Что проверять E2E — а что нет
| E2E | Лучше unit / интеграционными |
|---|---|
| критичные сценарии: регистрация, вход, оформление заказа | все варианты одной валидации |
| интеграцию с настоящим бэкендом | чистую логику (вычисления) |
| редиректы, cookie, авторизацию | состояния интерфейса компонента |
E2E-тесты медленнее и дороже в поддержке — их немного, на сценариях, которые приносят деньги или блокируют пользователей, если сломаются.
Полезные инструменты
npx playwright codegen localhost:3000 # записываете шаги, Playwright пишет код
npx playwright test --ui # визуальный режим, шаг за шагом
npx playwright show-report # HTML-отчёт со скриншотами и трейсамиTrace viewer: для теста, упавшего в CI, видно каждый шаг, DOM, запросы и консоль — отладка без локального воспроизведения.
В CI
Запускаете приложение (npm run build && npm run start) и прогоняете тесты против него — или прямо против preview-деплоя каждого PR на Vercel.
Коротко
- Playwright = настоящий браузер, настоящее приложение, шаги как у пользователя.
- Локаторы по роли / подписи / тексту; автоожидание вместо sleep.
- Немного E2E-тестов, на критичных сценариях.