automationplaywrightlearning

Playwright: с чего начать и где учиться

Playwright стал стандартом веб-автоматизации в 2023-2025 годах. По сравнению с Selenium даёт auto-wait, лучшую отладку, нативную работу с iframe и shadow DOM. По сравнению с Cypress — мультибраузерность, мультитаб, нет ограничения на same-origin. Подборка ресурсов, которые помогут перейти на него или начать с нуля.

Официальные источники (must-read)

— playwright.dev/docs/intro — official docs. Очень хорошо написаны, читаются как туториал, не как справочник. — playwright.dev/docs/best-practices — best practices от команды Playwright. Особенно важно про web-first assertions и locators. — playwright.dev/docs/release-notes — что нового в каждой версии. Playwright развивается быстро, фичи добавляются почти каждый релиз.

С чего начать практически

  1. Поставь Playwright в новый проект: npm init playwright@latest.
  2. Открой Playwright Inspector — он сам пишет первый тест: npx playwright codegen <url>. Не идеальный код, но как стартер — норм.
  3. Прогоняй тесты с --ui флагом: npx playwright test --ui — графический trace viewer. Лучшая отладка автотестов которую я видел.

Темы которые надо понять отдельно

Locators и web-first assertions

Главное отличие Playwright от Selenium — Locator API + expect(). Это не просто переименованный By-selector — оно auto-retry’ит. Подробнее в моем посте про auto-wait.

Page Object Pattern в TypeScript

Playwright дружит с TS из коробки. Page Object получается естественнее, чем в Selenium:

class LoginPage {
  constructor(readonly page: Page) {}
  async login(email: string, password: string) {
    await this.page.getByLabel('Email').fill(email);
    await this.page.getByLabel('Password').fill(password);
    await this.page.getByRole('button', { name: 'Sign In' }).click();
  }
}

Тестирование API через Playwright

Playwright умеет не только UI, но и API-запросы — request.post(...). Удобно когда API-тесты нужны в том же фреймворке.

Fixtures и тестовые данные

Декларативные fixtures через test.extend — мощная штука. Например, если каждый тест должен начинаться с залогиненного юзера — описал один раз, используется везде.

CI integration

Playwright нативно понимает GitHub Actions / GitLab CI. Параллелизация, шардирование, retry на flaky-тестах, HTML-отчёт — всё из коробки.

Visual regression

await expect(page).toHaveScreenshot() — встроенный пиксель-перфект сравнение. См. мой пост про visual regression.

Что почитать сверх docs

— Playwright YouTube (@Playwrightdev) — короткие 5-10 минутные видео по фичам. Авторы — команда Playwright. — Test Automation University (каталог курсов) — бесплатные видео-курсы по Playwright, Selenium и автоматизации в целом. Поищи в каталоге курсы по Playwright. — Awesome Playwright (GitHub list) — куратированный список ресурсов: плагины, утилиты, видео.

Антипаттерны новичков

❌ Использовать page.click('css=...') — старый API. Переходи на page.locator(...) или page.getByRole/getByText. ❌ await page.waitForTimeout(2000) — это Thread.sleep. В CI ломает всё. Только для дебага. ❌ expect(await locator.textContent()).toBe(...) — синхронная проверка без retry. Правильно: await expect(locator).toHaveText('...').

Что делать прямо сейчас

✅ Если у тебя уже Selenium и работает — не мигрируй ради миграции. Добавь Playwright для новых тестов, старое оставь.

✅ Прогоняй npx playwright codegen на основном UX-сценарии своего продукта. Получишь черновик E2E-теста.

✅ Включи trace: 'on-first-retry' в playwright.config.ts — даёт offline-отладку с timeline всех действий.

Подробнее: Playwright docs, Test Automation University, Awesome Playwright.