🎭 Playwright

Документация | Справочник API

Playwright — это фреймворк для автоматизации и тестирования веб-приложений. Он управляет Chromium, Firefox и WebKit через единый API — в ваших тестах, скриптах и в качестве инструмента для AI-агентов.

Начало работы

Выберите путь, который подходит вашему рабочему процессу:

Playwright Test

Playwright Test — это полнофункциональный раннер тестов, созданный для сквозного тестирования. Он запускает тесты в Chromium, Firefox и WebKit с полной изоляцией браузера, автоматическим ожиданием и веб-ориентированными проверками.

Установка

npm init playwright@latest

Или добавьте вручную:

npm i -D @playwright/test
npx playwright install

Написание теста

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

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

npx playwright test

Тесты запускаются параллельно во всех настроенных браузерах, по умолчанию в headless-режиме. Каждый тест получает новый браузерный контекст — полная изоляция с почти нулевыми накладными расходами.

Ключевые возможности

Автоматическое ожидание и веб-ориентированные проверки. Без искусственных тайм-аутов. Playwright ожидает, пока элементы станут доступны для взаимодействия, а проверки автоматически повторяются до выполнения условий.

Локаторы. Находите элементы с помощью устойчивых локаторов, которые отражают то, как пользователи видят страницу:

page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')

Изоляция тестов. Каждый тест выполняется в собственном браузерном контексте — эквивалент чистого профиля браузера. Сохраните состояние аутентификации один раз и переиспользуйте его в других тестах:

// Save state after login
await page.context().storageState({ path: 'auth.json' });

// Reuse in other tests
test.use({ storageState: 'auth.json' });

Трассировка. Захватывайте трассы выполнения, скриншоты и видео при сбоях. Изучайте каждое действие, DOM-снимок, сетевой запрос и сообщение консоли в Trace Viewer:

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});

npx playwright show-trace trace.zip

Параллелизм. По умолчанию тесты выполняются параллельно во всех настроенных браузерах.

Полная документация по тестированию

Playwright CLI

Playwright CLI — это интерфейс командной строки для автоматизации браузера, предназначенный для кодинг-агентов. Он более эффективен по токенам, чем MCP — команды не загружают большие схемы инструментов и деревья доступности в контекст модели.

Установка

npm install -g @playwright/cli@latest

При желании установите навыки (skills) для более глубокой интеграции с агентами:

playwright-cli install --skills

Использование

Направьте вашего кодинг-агента на задачу:

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Take screenshots for all successful and failing scenarios.

Или выполняйте команды напрямую:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot

Мониторинг сессий

Используйте playwright-cli show, чтобы открыть визуальную панель с живыми предпросмотрами трансляций экрана всех запущенных браузерных сессий. Нажмите на любую сессию, чтобы приблизить её и получить удалённое управление.

playwright-cli show

Полная документация CLI | GitHub

Playwright MCP

Сервер Playwright MCP предоставляет AI-агентам полный контроль над браузером через Model Context Protocol. Агенты взаимодействуют со страницами с помощью структурированных снимков доступности — не требуются ни vision-модели, ни скриншоты.

Настройка

Добавьте в ваш MCP-клиент (VS Code, Cursor, Claude Desktop, Windsurf и т. д.):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Установка в один клик для VS Code:

Для Claude Code:

claude mcp add playwright npx @playwright/mcp@latest

Как это работает

Попросите вашего AI-ассистента взаимодействовать с любой веб-страницей:

Navigate to https://demo.playwright.dev/todomvc and add a few todo items.

Агент видит страницу как структурированное дерево доступности:

- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
  - checkbox "Toggle Todo" [ref=e10]
  - text: "Buy groceries"

Он использует ссылки на элементы, такие как e5 и e10, для кликов, ввода и взаимодействия — детерминированно и без визуальной неоднозначности. Инструменты охватывают навигацию, заполнение форм, скриншоты, мокирование сети, управление хранилищем и многое другое.

Полная документация MCP | GitHub

Playwright Library

Используйте playwright как библиотеку для скриптов автоматизации браузера — веб-скрапинг, генерация PDF, создание скриншотов и любые рабочие процессы, которым требуется программное управление браузером без раннера тестов.

Установка

npm i playwright

Примеры

Сделать скриншот:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

Сгенерировать PDF:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();

Эмулировать мобильное устройство:

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();

Перехватывать сетевые запросы:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();

Документация библиотеки | Справочник API

Расширение для VS Code

Расширение Playwright для VS Code добавляет запуск тестов, отладку и генерацию кода прямо в ваш редактор.

Запускайте и отлаживайте тесты прямо из редактора одним кликом. Устанавливайте точки останова, просматривайте переменные и пошагово проходите выполнение теста с живым видом браузера.

Генерируйте тесты с помощью CodeGen. Нажмите «Record new», чтобы открыть браузер — перемещайтесь и взаимодействуйте с приложением, пока Playwright пишет тестовый код за вас.

Выбирайте локаторы. Наведите курсор на любой элемент в браузере, чтобы увидеть лучший доступный локатор, затем кликните, чтобы скопировать его в буфер обмена.

Интеграция с Trace Viewer. Включите «Show Trace Viewer» на боковой панели, чтобы получить полную трассу выполнения после каждого запуска тестов — DOM-снимки, сетевые запросы, журналы консоли и скриншоты на каждом шаге.

Установить расширение | Руководство по VS Code

Поддержка браузеров

Выполнение в headless- и headed-режимах на всех платформах. ¹ По умолчанию используется Chrome for Testing.

Другие языки

Playwright также доступен для Python, .NET и Java.

Ресурсы

• Документация
• Справочник API
• MCP-сервер
• CLI для кодинг-агентов
• Расширение для VS Code
• Руководство по внесению вклада
• Журнал изменений
• Discord