Расширения и миграция Playwright

Эта глава знакомит с функциями расширения экосистемы Playwright, включая режим скриптов Library, сервисы MCP, Test Agents и руководство по миграции с других фреймворков на Playwright.

Режим скриптов Playwright Library

Playwright Library — это автономная библиотека автоматизации браузера, подходящая для сценариев вне тестовых раннеров.

Установка

npm i playwright

Типичное использование

Пример

// Скрипт создания скриншота
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');
  await page.screenshot({ path: 'example.png', fullPage: истина });
  await browser.close();
  console.log('Скриншот сохранён в example.png');
})();

Генерация PDF

Пример

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.example.com/');
  // Создать PDF (только Chromium)
  await page.pdf({
    path: 'example.pdf',
    format: 'A4',
    margin: { top: '20px', bottom: '20px' },
  });
  await browser.close();
})();

Выбор между режимом библиотеки и тестовым раннером

СценарийРекомендация
Написание E2E-тестовТестовый раннер Playwright
Скриншоты веб-страниц, генерация PDFБиблиотека Playwright
Веб-скрейпинг данныхБиблиотека Playwright
Одноразовые скрипты автоматизацииБиблиотека Playwright

Введение в Playwright MCP

Сервер Playwright MCP (Model Context Protocol) позволяет ИИ-ассистентам напрямую управлять браузером.

Установка и настройка MCP

# 为 Claude Code 添加 Playwright MCP
claude mcp add playwright npx @playwright/mcp@latest

Настройте его в VS Code или других MCP-клиентах:

Пример

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

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

ИИ-агент воспринимает содержимое страницы через структурированные снимки доступности.

Каждый фрагмент информации о доступности имеетrefидентификатор ref, и Агент использует этот ref для выполнения таких действий, как щелчки и ввод текста.

Этот подход не требует скриншотов; он полностью основан на взаимодействии со структурированными данными, что делает его быстрым и высокодетерминированным.

Тестовые агенты Playwright

Тестовые агенты — это экспериментальные инструменты тестирования на базе ИИ, которые могут автоматически генерировать и исправлять тесты.

АгентХарактеристикаСпособ запуска
ПланировщикАвтоматически исследовать приложение и создавать план тестирования в формате MarkdownНа базе LLM-агента
ГенераторПреобразовать план тестирования в код тестов PlaywrightНа базе LLM-агента
ВосстановительЗапустить набор тестов и автоматически исправлять падающие тестыНа базе LLM-агента

Инициализировать тестовые агенты:

# 为 VS Code 初始化
npx playwright init-agents --loop=vscode

# 为 Claude Code 初始化
npx playwright init-agents --loop=claude

Обзор тестирования компонентов (экспериментально)

Playwright поддерживает прямое монтирование и тестирование компонентов React/Vue без необходимости в полноценном окружении страницы.

Пример

test('Button component test', async ({ mount }) => {
  // Смонтировать компонент React
  const component = await mount(
    <Button title="Submit" />
  );

  // Проверить текст, отображаемый компонентом
  await expect(component).toContainText('Submit');

  // Нажать кнопку
  await component.click();
});

Тестирование доступности

Playwright предоставляет утверждения для доступных имён и описаний, помогающие проверить доступность страницы.

Пример

// Проверить, что элемент имеет правильное доступное имя
await expect(page.getByRole('button'))
  .toHaveAccessibleName('Отправить форму');

// Проверить, что элемент имеет доступное описание
await expect(page.getByLabel('Имя пользователя'))
  .toHaveAccessibleDescription('Введите буквенно-цифровую комбинацию из 4-16 символов');

Миграция с других фреймворков

Миграция с Puppeteer

Playwright и Puppeteer используют возможности Chrome DevTools Protocol, что делает миграцию относительно простой.

PuppeteerPlaywright
puppeteer.launch()chromium.launch()
page.waitForSelector()Не требуется (автоожидание) илиpage.locator()
page.$(selector)page.locator(selector)
page.evaluate()page.evaluate()(то же самое)
page.setRequestInterception()page.route()

Миграция с Cypress

Концепция Locator в Playwright похожа на цепочки запросов в Cypress, но есть несколько ключевых отличий:

CypressPlaywright
cy.get('.class')page.locator('.class')
cy.contains('text')page.getByText('text')
cy.get('[data-cy="btn"]')page.getByTestId('btn')(сtestIdAttribute: 'data-cy'）
cy.intercept()page.route()
cy.wait()Не требуется (автоожидание)

Миграция с Selenium

Selenium использует протокол WebDriver, тогда как Playwright напрямую управляет протоколами браузера, что приводит к существенно различным стилям API.

SeleniumPlaywright
driver.findElement(By.id('x'))page.locator('#x')
driver.get(url)page.goto(url)
element.click()locator.click()
WebDriverWaitНе требуется (встроенное автоожидание)
new RemoteWebDriver()chromium.connect(url)

Совет по миграции: не пытайтесь перенести все тесты за один шаг.

Сначала выберите тесты для одной или двух ключевых функций и перепишите их с помощью Playwright. После успешной проверки постепенно мигрируйте остальные тесты.

Другие расширения