Комплексный справочник Playwright: E2E тесты, WebSocket тестирование, мобильная эмуляция, паттерны Page Object. От базового до продвинутого.
Playwright Best Practices
Комплексное руководство по всем аспектам разработки Playwright-тестов: от написания новых тестов до отладки и поддержки существующих наборов.
Справочник по деятельности
Написание новых тестов
Когда использовать: создание новых файлов тестов, написание тест-кейсов, реализация тестовых сценариев
| Задача | Справочные файлы |
|---|
| E2E-тесты | test-suite-structure.md, locators.md, assertions-waiting.md |
| Компонентные тесты | component-testing.md, test-suite-structure.md |
| API-тесты | api-testing.md, test-suite-structure.md |
| GraphQL-тесты | graphql-testing.md, api-testing.md |
| Визуальные регрессионные тесты | visual-regression.md, canvas-webgl.md |
| Структурирование кода через POM | page-object-model.md, test-suite-structure.md |
| Настройка тестовых данных и фикстур | fixtures-hooks.md, test-data.md |
| Аутентификация | authentication.md, authentication-flows.md |
| Тестирование дата/времени | clock-mocking.md |
| Загрузка и скачивание файлов | file-operations.md, file-upload-download.md |
| Формы и валидация | forms-validation.md |
| Drag and drop | drag-drop.md |
| Доступность (accessibility) | accessibility.md |
| Безопасность (XSS, CSRF) | security-testing.md |
| Аннотации тестов | annotations.md |
| Теги тестов | test-tags.md |
| iFrames | iframes.md |
| Canvas/WebGL | canvas-webgl.md |
| Интернационализация (i18n) | i18n.md |
| Electron-приложения | electron.md |
| Браузерные расширения | browser-extensions.md |
Мобильное и адаптивное тестирование
Когда использовать: тестирование мобильных устройств, жестов, адаптивных макетов
| Задача | Справочные файлы |
|---|
| Эмуляция устройств | mobile-testing.md |
| Жесты (swipe, tap) | mobile-testing.md |
| Viewport и breakpoint | mobile-testing.md |
| Мобильный UI | mobile-testing.md, locators.md |
Real-Time и Browser API
Когда использовать: WebSocket, геолокация, разрешения, многовкладочные сценарии
| Задача | Справочные файлы |
|---|
| WebSocket / реальное время | websockets.md |
| Геолокация | browser-apis.md |
| Разрешения браузера | browser-apis.md |
| Clipboard | browser-apis.md |
| Камера / микрофон | browser-apis.md |
| Многовкладочные и popup-сценарии | multi-context.md |
| OAuth popup | third-party.md, multi-context.md |
Отладка и устранение проблем
Когда использовать: падения тестов, элемент не найден, таймауты, неожиданное поведение
| Задача | Справочные файлы |
|---|
| Отладка упавших тестов | debugging.md, assertions-waiting.md |
| Нестабильные (flaky) тесты | flaky-tests.md, debugging.md, assertions-waiting.md |
| Нестабильность при параллельном запуске | flaky-tests.md, performance.md, fixtures-hooks.md |
| Изоляция тестов / утечка состояния | flaky-tests.md, fixtures-hooks.md, performance.md |
| Проблемы с селекторами | locators.md, debugging.md |
| Таймауты | assertions-waiting.md, debugging.md |
| Trace viewer | debugging.md |
| Гонки состояний (race conditions) | flaky-tests.md, debugging.md, assertions-waiting.md |
| Console / JS ошибки | console-errors.md, debugging.md |
Тестирование ошибок и граничных случаев
| Задача | Справочные файлы |
|---|
| Error boundaries | error-testing.md |
| Сетевые сбои | error-testing.md, network-advanced.md |
| Офлайн-режим | error-testing.md, service-workers.md |
| Service workers | service-workers.md |
| Состояния загрузки | error-testing.md |
| Валидация форм | error-testing.md |
Многопользовательское и совместное тестирование
| Задача | Справочные файлы |
|---|
| Несколько пользователей в одном тесте | multi-user.md |
| Совместная работа в реальном времени | multi-user.md, websockets.md |
| Ролевой доступ | multi-user.md |
| Параллельные действия | multi-user.md |
Архитектурные решения
| Задача | Справочные файлы |
|---|
| POM vs фикстуры | pom-vs-fixtures.md |
| Выбор типа теста | test-architecture.md |
| Mock vs реальные сервисы | when-to-mock.md |
| Структура набора тестов | test-suite-structure.md |
Тестирование фреймворков
| Задача | Справочные файлы |
|---|
| React-приложения | react.md |
| Angular-приложения | angular.md |
| Vue/Nuxt-приложения | vue.md |
| Next.js-приложения | nextjs.md |
Инфраструктура и конфигурация
| Задача | Справочные файлы |
|---|
| Настройка Playwright-проекта | configuration.md, projects-dependencies.md |
| CI/CD-пайплайны | ci-cd.md, github-actions.md |
| GitHub Actions | github-actions.md |
| GitLab CI | gitlab.md |
| Docker/контейнеры | docker.md |
| Глобальный setup и teardown | global-setup.md |
| Зависимости проектов | projects-dependencies.md |
| Оптимизация производительности тестов | performance.md, test-suite-structure.md |
| Параллельное выполнение | parallel-sharding.md, performance.md |
| Покрытие тестами | test-coverage.md |
| Отчёты и артефакты | reporting.md |
Дерево решений
Что вы делаете?
│
├─ Пишете новый тест?
│ ├─ E2E → core/test-suite-structure.md, core/locators.md, core/assertions-waiting.md
│ ├─ Компонентный → testing-patterns/component-testing.md
│ ├─ API → testing-patterns/api-testing.md
│ ├─ GraphQL → testing-patterns/graphql-testing.md
│ ├─ Визуальная регрессия → testing-patterns/visual-regression.md
│ ├─ Доступность → testing-patterns/accessibility.md
│ ├─ Мобильный / адаптивный → advanced/mobile-testing.md
│ ├─ i18n / локаль → testing-patterns/i18n.md
│ ├─ Electron → testing-patterns/electron.md
│ ├─ Браузерное расширение → testing-patterns/browser-extensions.md
│ ├─ Многопользовательский → advanced/multi-user.md
│ ├─ Форма с валидацией → testing-patterns/forms-validation.md
│ └─ Drag and drop → testing-patterns/drag-drop.md
│
├─ Тестируете конкретные возможности?
│ ├─ Загрузка/скачивание файлов → testing-patterns/file-operations.md
│ ├─ Дата/время → advanced/clock-mocking.md
│ ├─ WebSocket / реальное время → browser-apis/websockets.md
│ ├─ Геолокация / разрешения → browser-apis/browser-apis.md
│ ├─ OAuth/SSO мокинг → advanced/third-party.md
│ ├─ Платежи/email/SMS → advanced/third-party.md
│ ├─ iFrames → browser-apis/iframes.md
│ ├─ Canvas / WebGL / charts → testing-patterns/canvas-webgl.md
│ ├─ Service workers / PWA → browser-apis/service-workers.md
│ ├─ Безопасность (XSS, CSRF) → testing-patterns/security-testing.md
│ └─ Производительность / Web Vitals → testing-patterns/performance-testing.md
│
├─ Тест падает или нестабилен?
│ ├─ Расследование flaky-тестов → debugging/flaky-tests.md
│ ├─ Элемент не найден → core/locators.md
│ ├─ Таймауты → core/assertions-waiting.md
│ ├─ Race conditions → debugging/flaky-tests.md
│ ├─ Нестабильность при нескольких воркерах → debugging/flaky-tests.md, performance.md
│ ├─ Утечка состояния → debugging/flaky-tests.md, core/fixtures-hooks.md
│ ├─ Console/JS ошибки → debugging/console-errors.md
│ └─ Общая отладка → debugging/debugging.md
│
└─ Настройка инфраструктуры?
├─ CI/CD → infrastructure-ci-cd/ci-cd.md
├─ GitHub Actions → infrastructure-ci-cd/github-actions.md
├─ Docker → infrastructure-ci-cd/docker.md
├─ Шардирование / параллелизм → infrastructure-ci-cd/parallel-sharding.md
├─ Отчёты → infrastructure-ci-cd/reporting.md
└─ Покрытие → infrastructure-ci-cd/test-coverage.md
Цикл проверки тестов
После написания или изменения тестов:
- Запустить тесты:
npx playwright test --reporter=list
- Если тесты упали:
- Изучить вывод ошибок и трассировку (
npx playwright show-trace)
- Исправить локаторы, ожидания или утверждения
- Перезапустить тесты
- Переходить дальше только когда все тесты проходят
- Для критичных тестов — несколько прогонов:
npx playwright test --repeat-each=5
