← назад к разделу

Прежде чем писать сквозные сценарии, нужно поднять окружение. Конфиг Playwright — это один файл, который задаёт всё сразу: какие браузеры, какой адрес приложения, где лежат тесты, какие таймауты. Хорошая настройка с первого дня экономит много возни потом.

Зачем отдельный инструмент для e2e

Можно было бы просто запускать браузер вручную и кликать. Проблема — это не воспроизводимо: разные машины, разные состояния, нет отчётов. Playwright решает это: он управляет браузером из кода, ждёт элементы автоматически, пишет трейсы при сбоях и работает без монитора (headless).

Playwright — TypeScript-библиотека. Тесты выглядят как обычный async/await код, браузер управляется через API.

Установка

Одна команда ставит пакет и скачивает браузеры:

npm init playwright@latest

Мастер спросит, куда класть тесты (tests/ или e2e/), и создаст playwright.config.ts с минимальным примером. Браузеры (Chromium, Firefox, WebKit) скачиваются отдельно — это несколько сотен мегабайт, зато их версии зафиксированы и одинаковы на всех машинах.

Если нужно добавить Playwright в уже существующий проект:

npm install --save-dev @playwright/test
npx playwright install

Структура проекта

Тесты держат отдельной папкой, конфиг — в корне:

e2e/
  products.spec.ts
  auth.spec.ts
playwright.config.ts
package.json

Файлы тестов именуют *.spec.ts. Раскладка — по доменам или потокам: все тесты одного сценария лежат рядом, а не размазаны по слоям.

playwright.config — разбор по частям

Конфиг — TypeScript-файл с объектом настроек. Вот минимальный рабочий вариант:

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./e2e",
  timeout: 30_000,
  use: {
    baseURL: "http://localhost:3000",
    trace: "on-first-retry",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
  ],
});

Что здесь важно:

testDir — папка с тестами. Playwright не будет трогать ничего за её пределами.

timeout — максимальное время одного теста в миллисекундах. 30 секунд — разумная точка старта. Если тест не укладывается, он считается упавшим.

baseURL — адрес приложения. Благодаря ему в тестах пишут page.goto("/products") вместо page.goto("http://localhost:3000/products"). Когда адрес меняется (например, при переезде на другой порт или домен), меняется только одна строка в конфиге.

trace: "on-first-retry" — Playwright запишет полный трейс (снимки DOM, сетевые запросы, скриншоты) при первом повторе упавшего теста. Без трейса разобраться, почему тест упал на CI, очень сложно.

Projects — браузеры и окружения

projects — это параллельные конфигурации одного набора тестов. Чаще всего это браузеры, но тем же механизмом задают мобильные эмуляции или разные окружения (стейджинг, прод).

Каждый тест гоняется в каждом project. Если у вас два project (chromium и firefox) и десять тестов — Playwright запустит двадцать запусков.

Начинать разумно с одного браузера. Chromium покрывает большинство случаев, а полное кросс-браузерное тестирование добавляют, когда базовый набор уже стабилен.

projects: [
  { name: "chromium", use: { ...devices["Desktop Chrome"] } },
],

Мобильную эмуляцию добавляют так:

{ name: "mobile", use: { ...devices["iPhone 13"] } },

devices — словарь из самого Playwright: там прописаны размер экрана, userAgent и другие характеристики устройства.

Первый сценарий

Тест — обычная async-функция. test задаёт название и тело, expect — проверку:

import { test, expect } from "@playwright/test";

test("открывает каталог", async ({ page }) => {
  await page.goto("/products");
  await expect(page.getByRole("heading", { name: "Каталог" })).toBeVisible();
});

Здесь page — встроенная фикстура: Playwright даёт свежий изолированный контекст браузера на каждый тест. Тесты не делят состояние — нет кук, нет истории, нет данных от предыдущего теста.

page.goto("/products") использует baseURL из конфига — поэтому путь короткий.

expect(...).toBeVisible() — это «умное» ожидание: Playwright сам ждёт, пока элемент появится на странице (до таймаута), и только потом проверяет. Не нужно писать sleep или руками ждать загрузки.

Запуск:

npx playwright test

После прогона Playwright покажет результат в терминале и создаст HTML-отчёт: npx playwright show-report.

Коротко

  • npm init playwright@latest — самый быстрый старт: ставит пакет, скачивает браузеры, создаёт конфиг.
  • playwright.config.ts задаёт всё сразу: папку тестов, таймауты, адрес приложения, браузеры.
  • baseURL — адрес приложения в одном месте; в тестах пишут только путь.
  • trace: "on-first-retry" — трейсы при сбоях; без них разбирать падения на CI очень сложно.
  • projects — способ гонять одни тесты в разных браузерах или окружениях.
  • page — изолированный контекст браузера на каждый тест; тесты не делят состояние.
  • expect(...).toBeVisible() ждёт элемент автоматически — писать sleep не нужно.

Что почитать дальше

  • Локаторы: как находить элементы — getByRole, getByLabel, getByText вместо хрупких CSS-селекторов.
  • Структура тестов — как организовать файлы, фикстуры и вспомогательные функции.
  • Данные и аутентификация — подготовка состояния через API и переиспользование auth.