microsoft/playwrightФреймворк автоматизации браузера с единым API для Chromium, Firefox и WebKit. Поддерживает веб-тестирование, скрейпинг, создание скриншотов и перехват сетевого трафика.
Playwright — это фреймворк для автоматизации и тестирования веб-приложений. Он управляет Chromium, Firefox и WebKit через единый API — в ваших тестах, в ваших скриптах и как инструмент для AI-агентов.
Выберите путь, который подходит вашему рабочему процессу:
| Лучше всего подходит для | Установка | |
|---|---|---|
| Playwright Test | Сквозного тестирования | npm init playwright@latest |
| Playwright CLI | Кодинг-агентов (Claude Code, Copilot) | npm i -g @playwright/cli@latest |
| Playwright MCP | AI-агентов и автоматизации на основе LLM | npx @playwright/mcp@latest |
| Playwright Library | Скриптов автоматизации браузера | npm i playwright |
| Расширение для VS Code | Написания и отладки тестов в VS Code | Установить из Marketplace |
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')
Изоляция тестов. Каждый тест выполняется в собственном контексте браузера — эквивалент свежего профиля браузера. Сохраните состояние аутентификации один раз и используйте его повторно в других тестах:
// Сохранить состояние после входа
await page.context().storageState({ path: 'auth.json' });
// Повторно использовать в других тестах
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 — это интерфейс командной строки для автоматизации браузера, предназначенный для кодинг-агентов. Он более эффективен по использованию токенов, чем MCP — команды не загружают большие схемы инструментов и дерева доступности в контекст модели.
npm install -g @playwright/cli@latest
При желании установите навыки для более глубокой интеграции с агентами:
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
Сервер Playwright MCP предоставляет AI-агентам полный контроль над браузером через Model Context Protocol. Агенты взаимодействуют со страницами с помощью структурированных снимков доступности — без необходимости в моделях зрения или скриншотах.
Добавьте в ваш 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, для кликов, ввода и взаимодействия — детерминированно и без визуальной неоднозначности. Инструменты охватывают навигацию, заполнение форм, скриншоты, мокирование сети, управление хранилищем и многое другое.
Используйте 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();
Расширение Playwright для VS Code привносит запуск тестов, отладку и генерацию кода прямо в ваш редактор.
Запускайте и отлаживайте тесты из редактора одним кликом. Устанавливайте точки останова, просматривайте переменные и проходите по шагам выполнения теста с живым видом браузера.
Генерируйте тесты с помощью CodeGen. Нажмите «Record new», чтобы открыть браузер — выполняйте навигацию и взаимодействуйте с вашим приложением, пока Playwright пишет тестовый код за вас.
Выбирайте локаторы. Наведите курсор на любой элемент в браузере, чтобы увидеть лучший доступный локатор, затем нажмите, чтобы скопировать его в буфер обмена.
Интеграция с Trace Viewer. Включите «Show Trace Viewer» на боковой панели, чтобы получить полную трассировку выполнения после каждого запуска тестов — снимки DOM, сетевые запросы, журналы консоли и скриншоты на каждом шаге.
| Linux | macOS | Windows | |
|---|---|---|---|
| Chromium1 154.0.8037.0 | ✅ | ✅ | ✅ |
| WebKit 26.6 | ✅ | ✅ | ✅ |
| Firefox 155.0 | ✅ | ✅ | ✅ |
Headless и headed выполнение на всех платформах. 1 По умолчанию используется Chrome for Testing.