Playwright и Cypress
Тема дорожной карты · Frontend разработчик
Playwright — это современный фреймворк end-to-end тестирования, разработанный Microsoft, автоматизирующий браузеры Chromium, Firefox и WebKit через единый API, что делает его основным инструментом кроссбраузерного тестирования React, Next.js, Remix и Astro-приложений. Тесты Playwright пишутся на TypeScript с использованием раннера @playwright/test, API test() и expect() для утверждений и встроенных фикстур page, browser и context, автоматически управляемых для каждого теста. Ключевые возможности: перехват сетевых запросов (page.route()), тестирование компонентов (@playwright/experimental-ct-react), снимки доступности, визуальное сравнение через expect(page).toHaveScreenshot() и параллельное выполнение тестов в нескольких воркерах. Playwright интегрируется в CI/CD-конвейеры через команду playwright test и создаёт подробные HTML-отчёты с трассировками, скриншотами и видеозаписями, что делает отладку нестабильных тестов значительно быстрее, чем с Selenium или Cypress.
Как это работает
Playwright и Cypress на frontend имеет слои: unit (Vitest/Jest для утилит + reducers), компонентные (React Testing Library / Vue Test Utils для поведения компонентов), end-to-end (Playwright, Cypress для полного browser-флоу). Философия RTL: запрашивайте DOM так же, как пользователь — по роли, label, тексту — не по деталям реализации. Мокайте на сетевой границе (msw), не внутри компонентов. pnpm test в CI на каждый PR.
Когда применять
Тестируйте критичные user-флоу end-to-end (регистрация, checkout, главные формы) через Playwright + msw. Сложная чистая логика — unit-тесты. Snapshot-тесты — пропустите для часто меняющегося. Цель — behavioural coverage на integration-уровне, не 100% строк (стимулирует тривиальные тесты). E2E — headless CI на каждый PR.
Типичные ошибки
Ловушки Playwright и Cypress: запросы по CSS-классу (data-testid лучше; ARIA role — лучшее); over-mocking React-внутренностей (тестируете моки, не код); flaky-тесты оставлены — каждый подрывает доверие; нет таймаутов в waitFor (висит в CI); snapshot-тесты на очень волатильном выводе. Карантинить, потом чинить или удалять.