Установка и первый тест

Ставим Playwright, смотрим на структуру проекта и запускаем первый тест.

npm init playwright@latest — официальный установщик, который создаёт всё нужное: зависимости, конфиг, браузеры и пример теста.

Установка

Playwright ставится одной командой. Она задаст пару вопросов (язык — TypeScript или JavaScript, имя папки с тестами, нужен ли пример workflow для CI) и скачает браузеры.

npm init playwright@latest

Установщик скачивает Chromium, Firefox и WebKit (это десятки мегабайт — браузеры идут отдельно от npm-пакета, чтобы версия движка была зафиксирована) и создаёт структуру проекта.

Что появилось в проекте

my-project/
├── tests/
│   └── example.spec.ts      ← пример теста
├── tests-examples/          ← демо-тесты
├── playwright.config.ts     ← конфигурация
└── package.json

Главные файлы: папка tests/ с тестами (файлы с расширением .spec.ts или .spec.js) и playwright.config.ts — настройки прогона, которые мы подробно разберём в последнем разделе. Уже сейчас полезно знать: имя файла теста по соглашению заканчивается на .spec, и раннер ищет именно такие файлы.

Первый тест

Создадим простой тест. Он открывает сайт Playwright и проверяет заголовок страницы.

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

test('у страницы правильный заголовок', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // в заголовке вкладки есть слово Playwright
  await expect(page).toHaveTitle(/Playwright/);
});

test('кнопка Get started ведёт на установку', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();

  // на странице установки виден заголовок Installation
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Разберём по частям. test('имя', async ({ page }) => {...}) объявляет тест. Аргумент page — это вкладка браузера, которую Playwright даёт каждому тесту автоматически (это фикстура, о них позже). Ключевое слово await стоит почти везде: все действия в браузере асинхронные, и без await тест продолжился бы, не дождавшись результата.

Запуск

Тесты запускают командой npx playwright test. По умолчанию прогон идёт в headless-режиме — браузер работает без видимого окна, так быстрее и так же работает CI.

npx playwright test

Чтобы увидеть, как браузер реально кликает, добавьте флаг --headed:

npx playwright test --headed

А режим UI с интерактивным просмотром, перемоткой шагов и перезапуском тестов открывается так — это лучший способ отлаживать тесты во время разработки:

npx playwright test --ui

Как устроен прогон

Когда вы запускаете npx playwright test, происходит следующее:

Раннер находит все файлы *.spec.ts в папке тестов.
Для каждого теста запускается чистый контекст браузера (изолированный, без чужих cookie).
Тесты разных файлов выполняются параллельно в нескольких процессах.
Каждый await expect(...) с авто-ожиданием повторяет проверку, пока она не станет верной или не выйдет таймаут.
В конце печатается отчёт: сколько прошло, сколько упало.

Результат в терминале выглядит примерно так:

Running 2 tests using 2 workers
  ✓  example.spec.ts:3:1 › у страницы правильный заголовок (1.2s)
  ✓  example.spec.ts:9:1 › кнопка Get started ведёт на установку (1.8s)

  2 passed (3.5s)

Зелёные галочки — пройденные тесты, рядом время каждого. Если тест упадёт, вы увидите красный крестик, ожидаемое и фактическое значения и место в коде.

Итог

npm init playwright@latest ставит зависимости, конфиг, браузеры и пример теста.
Тесты лежат в tests/, объявляются через test(...) и получают фикстуру page.
Запуск — npx playwright test; флаги --headed и --ui помогают видеть процесс.
Раннер находит тесты, изолирует их, гоняет параллельно и печатает отчёт.