Установка Playwright: пошаговое руководство (2026)

Playwright требует одно предусловие: Node.js. Установщик (npm init playwright@latest) берёт на себя всё остальное: скачивает Chromium, Firefox и WebKit как изолированные бинарники, создаёт файл конфига, настраивает пример теста и конфигурирует .gitignore. Этот гайд проведёт через каждый шаг, объяснит что делает каждый установленный файл и разберёт единственное изменение конфига (baseURL), которое делает написание тестов менее повторяющимся с первого дня.

Что нужно перед началом

Одно: Node.js. Проверь есть ли он:

node --version
npm --version

Если вернулись номера версий (Node 18 или выше, npm 9 или выше), всё готово. Если нет, зайди на nodejs.org и скачай LTS-версию. Установи, потом возвращайся.

Браузер устанавливать отдельно не нужно. Playwright скачивает собственные бинарники во время настройки: Chromium, Firefox и WebKit. Они изолированы от браузеров установленных в системе.

Создание проекта

Выбери папку и запусти:

mkdir playwright-tests
cd playwright-tests
npm init playwright@latest

Установщик задаёт пять вопросов:

Do you want to use TypeScript or JavaScript? › TypeScript
Where to put your end-to-end tests? › tests
Add a GitHub Actions workflow? › false
Install Playwright browsers? › true

Выбирай TypeScript. Это профессиональный стандарт, и поддержка TypeScript в Playwright отличная. Папку tests оставь как tests. GitHub Actions пропусти пока (добавишь позже). Установку браузеров подтверди.

Загрузка браузеров занимает 1–3 минуты в зависимости от соединения. Playwright скачивает Chromium, Firefox и WebKit, около 300 МБ суммарно.

Что установилось

После настройки проект выглядит так:

playwright-tests/
  tests/
    example.spec.ts        ← пример теста
  playwright.config.ts     ← конфигурация
  package.json             ← зависимости
  package-lock.json
  node_modules/            ← установленные пакеты
  .gitignore               ← преднастроен для Playwright

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

Ключевые настройки:

node_modules/
playwright-report/
test-results/

Не коммить эти папки. Они большие и генерируются заново при каждом прогоне.

Запуск примера теста

До написания своего кода запусти то что пришло с установщиком:

npx playwright test

Вывод:

Running 6 tests using 6 workers

  6 passed (8s)

Шесть тестов потому что пример запускается в трёх браузерах × два тест-кейса. Открой отчёт:

npx playwright show-report

Браузер откроется с подробной разбивкой: какие тесты запускались, сколько каждый занял, какой браузер, скриншоты. Кликни на любой тест чтобы развернуть.

Настройка под свой проект

Дефолты нормальные, но два изменения улучшают ежедневную разработку. Открой playwright.config.ts и добавь baseURL:

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'https://lab.becomeqa.com',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

После того как baseURL задан, тесты могут использовать page.goto('/') вместо полного URL. При смене окружений (dev → staging → production) меняешь одну строку в конфиге вместо каждого теста.

Первый реальный тест

Удали пример теста и создай tests/login.spec.ts:

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

test('пользователь может войти', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByLabel('Username').fill('admin@becomeqa.com');
  await page.getByLabel('Password').fill('testpass123');
  await page.getByRole('button', { name: 'Submit' }).click();

  await expect(page.getByText('My Travel Items')).toBeVisible();
});

Запускай только этот файл в Chromium чтобы было быстро:

npx playwright test tests/login.spec.ts --project=chromium

Вывод:

Running 1 test using 1 worker

  1 passed (3s)

Полезные CLI-команды

# Запустить все тесты
npx playwright test

# Запустить конкретный файл
npx playwright test tests/login.spec.ts

# Запустить только в Chromium
npx playwright test --project=chromium

# Запустить в headed-режиме (браузер открывается видимо)
npx playwright test --headed

# Запустить в режиме отладки (пауза на каждом шаге)
npx playwright test --debug

# Запустить тесты по паттерну имени
npx playwright test --grep "login"

# Показать последний HTML-отчёт
npx playwright show-report

# Открыть интерактивный UI-режим
npx playwright test --ui

Кодогенератор

Если не уверен какой локатор использовать для элемента, пусть Playwright сгенерирует его сам:

npx playwright codegen https://lab.becomeqa.com

Откроется браузер. Кликай по странице, и Playwright будет записывать действия и генерировать соответствующий тестовый код в панели справа. Не всегда идеально, но это самый быстрый способ найти локаторы в которых не уверен.

Понимание структуры теста

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

test('описание что тестируется', async ({ page }) => {
  // твой код теста здесь
});

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

Дефолтная структура работает для нескольких тестов. Когда набор растёт:

playwright-tests/
  tests/
    auth/
      login.spec.ts
      logout.spec.ts
    items/
      items-list.spec.ts
  pages/              ← Page Object классы сюда
    LoginPage.ts
    DashboardPage.ts
  fixtures/           ← Кастомные фикстуры сюда
    auth.fixture.ts
  playwright.config.ts
  package.json

Начни с плоской структурой в tests/. Добавляй подпапки когда тест-файлов станет больше 5–6. Добавляй pages/ когда начинаешь повторять одни и те же локаторы в разных тестах.

FAQ

Какую версию Playwright устанавливать?

Всегда последнюю. npm init playwright@latest сделает это сам. Playwright выпускает обновления часто, ломающие изменения редки. Оставаться актуальным проще чем догонять после отставания.

Использовать pnpm или yarn вместо npm?

Любой подходит. npm нормален для обучения. Некоторые команды предпочитают pnpm из-за экономии дискового пространства в CI. Не усложняй этот вопрос.

Загрузка браузера упала на половине. Что делать?

Запусти npx playwright install для повтора. Если конкретный браузер не устанавливается, установи его отдельно: npx playwright install chromium.

Можно ли запустить Playwright без Node.js?

Нет. Playwright работает на Node.js. Биндинги для Python, Java и .NET существуют, но все требуют установки соответствующего рантайма.

Тест зависает и никогда не завершается. Почему?

Обычно неверная конфигурация baseURL или проблема с сетью. Добавь --timeout=10000 чтобы падать быстрее при отладке: npx playwright test --timeout=10000.