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

Updated Jul 2026

Начать работу с Playwright можно за минуты, а не за часы. Фреймворк включает CLI, который создаёт шаблон проекта, устанавливает браузеры и генерирует конфигурацию — устраняя проблемы настройки, которые преследовали предыдущие инструменты.

Установка

Playwright поддерживает несколько языков. TypeScript/JavaScript — основная экосистема с самым богатым инструментарием; Python — наиболее распространённая альтернатива в QA-командах.

TypeScript (рекомендуется)

# Создание нового проекта и установка Playwright
npm init playwright@latest

# Создаётся:
#   playwright.config.ts   — конфигурация
#   tests/                 — директория тестов
#   tests/example.spec.ts  — пример теста
#   package.json           — зависимости

Python

pip install playwright
playwright install  # скачивает бинарники браузеров

Что делает playwright install

Playwright включает собственные бинарники браузеров — конкретные версии Chromium, Firefox и WebKit, протестированные с каждым релизом Playwright. Это устраняет проблему «какая версия ChromeDriver соответствует моему Chrome?», с которой борются команды Selenium.

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

Типичный проект Playwright:

project/
├── playwright.config.ts     # Конфигурация тест-раннера
├── tests/
│   ├── login.spec.ts        # Файлы тестов (*.spec.ts)
│   ├── checkout.spec.ts
│   └── fixtures/            # Пользовательские фикстуры
│       └── auth.ts
├── pages/                   # Объекты страниц
│   ├── login.page.ts
│   └── dashboard.page.ts
├── test-data/               # Файлы тестовых данных
└── test-results/            # Генерируемые: трейсы, скриншоты, видео

Ваш первый тест

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

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

test('ссылка Get started ведёт на введение', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});

Запуск тестов

# Запуск всех тестов
npx playwright test

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

# Запуск с видимым браузером
npx playwright test --headed

# Запуск в UI-режиме (интерактивный отладчик)
npx playwright test --ui

Тест-раннер: @playwright/test

Playwright включает собственный тест-раннер, который предоставляет функции, для которых другие фреймворки требуют плагинов:

Базовая конфигурация

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30_000,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  use: {
    baseURL: 'http://localhost:3000',
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
});

Инструменты отладки

Playwright предоставляет несколько подходов к отладке — больше никаких догадок, почему тест упал.

UI Mode (--ui): Интерактивная временная шкала, показывающая каждое действие, сетевой запрос и снимок DOM. Самый полезный инструмент отладки.

Trace Viewer: Записывает трейс во время выполнения теста, который можно воспроизвести пошагово. Незаменим для сбоев в CI.

Codegen (npx playwright codegen): Открывает браузер и записывает ваши действия как тестовый код. Полезен для быстрого создания тестов, хотя сгенерированный код обычно требует рефакторинга.

Расширение VS Code: Запуск, отладка и пошаговое выполнение тестов прямо в редакторе с точками останова.

Эквивалент на Python

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://playwright.dev/")
    assert "Playwright" in page.title()
    browser.close()

# С pytest-playwright (рекомендуется)
def test_homepage(page):
    page.goto("https://playwright.dev/")
    assert "Playwright" in page.title()

Ключевые выводы

• npm init playwright@latest создаёт шаблон полного проекта за секунды
• Playwright включает бинарники браузеров — нет проблем с несовпадением версий драйверов
• Встроенный тест-раннер включает параллельное выполнение, повторные запуски, скриншоты, видео и трейсы
• UI Mode и Trace Viewer — основные инструменты отладки; используйте их прежде, чем добавлять console.log
• Codegen быстро создаёт шаблоны тестов; расширение VS Code интегрирует всё в редактор