OpenClaw + Playwright: браузерная автоматизация с AI-агентом

Playwright MCP-сервер даёт OpenClaw «руки» для работы с браузером: агент открывает страницы, нажимает кнопки, заполняет формы, делает скриншоты. Это один из самых мощных инструментов для автоматизации веб-задач.

Установка MCP-сервера Playwright

Microsoft выпустила официальный MCP-сервер для Playwright:

npm install -g @playwright/mcp
npx playwright install chromium

Конфигурация OpenClaw:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp", "--browser", "chromium"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

Для debugging (видимый браузер):

{
  "env": {
    "PLAYWRIGHT_HEADLESS": "false"
  }
}

Что умеет Playwright MCP

Основные инструменты:

• browser_navigate — открыть URL
• browser_click — кликнуть на элемент
• browser_fill — заполнить поле
• browser_screenshot — сделать скриншот
• browser_snapshot — получить DOM-структуру
• browser_evaluate — выполнить JavaScript
• browser_wait_for — ожидание элемента

Сценарий 1: Веб-скрапинг

> Собери данные о вакансиях на hh.ru по запросу "Python разработчик" в Москве.
  Страницы: первые 3.

  Для каждой вакансии: название, компания, зарплата (если указана), ссылка.
  Вернуть в JSON-файл vacancies.json

Агент сам откроет браузер, перейдёт по страницам и соберёт данные.

Сценарий 2: Автоматические E2E тесты

> Напиши Playwright-тесты для checkout flow нашего магазина:
  1. Открой https://myshop.ru
  2. Добавь первый товар в корзину
  3. Перейди в корзину
  4. Заполни форму доставки тестовыми данными
  5. Проверь что отображается summary с корректной суммой
  6. НЕ оформляй заказ (остановись перед оплатой)

  Используй page.locator() с data-testid атрибутами где возможно.
  Сохрани тест в tests/checkout.spec.ts

Сценарий 3: Мониторинг без написания кода

> Проверяй каждый час https://status.github.com
  Если статус отличается от "All systems operational" —
  пришли алерт в Telegram с текстом статуса.

Агент сам разберётся как найти статус на странице — не нужно писать селекторы.

Сценарий 4: Заполнение форм

> Нужно подать заявки на 5 конкурсов (список: competitions.json).
  Каждый конкурс — форма на отдельном URL.
  Данные для заполнения: profile.json (название компании, контакты, описание).

  Для каждого конкурса:
  1. Открой URL
  2. Заполни форму данными из profile.json
  3. Сделай скриншот заполненной формы
  4. Отправь форму
  5. Сохрани подтверждение (скриншот или текст)

  Если форма не удалась — пропусти и залогируй ошибку.

Сценарий 5: Визуальная регрессия

> Сделай скриншоты всех страниц из sitemap.xml сайта https://mysite.ru
  в трёх размерах: 1920px, 768px, 375px.

  Сохрани в папку screenshots/{дата}/
  Структура: {slug}-desktop.png, {slug}-tablet.png, {slug}-mobile.png

  После деплоя сравни с базовыми скриншотами из screenshots/baseline/
  Вернуть список страниц с визуальными изменениями.

Кастомный MCP для специфичных задач

Если нужен более гибкий контроль:

// mcp-browser/src/index.ts
import { chromium, Browser, Page } from "playwright";

let browser: Browser | null = null;
let page: Page | null = null;

async function getPage(): Promise<Page> {
  if (!browser) {
    browser = await chromium.launch({ headless: true });
  }
  if (!page || page.isClosed()) {
    page = await browser.newPage();

    // Блокируем рекламу и трекеры
    await page.route("**/*.{png,jpg,jpeg,gif,webp}", route => route.abort());
    await page.route("**/ads/**", route => route.abort());

    // User-agent человека
    await page.setExtraHTTPHeaders({
      "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ...",
    });
  }
  return page;
}

// Инструмент: умный скрапинг с ожиданием
async function scrape(url: string, selector: string): Promise<string> {
  const p = await getPage();
  await p.goto(url, { waitUntil: "networkidle" });
  await p.waitForSelector(selector, { timeout: 10000 });
  return await p.textContent(selector) ?? "";
}

Работа с авторизованными сайтами

> Войди на https://admin.mysite.ru используя credentials из ENV:
  ADMIN_LOGIN и ADMIN_PASSWORD.

  После входа:
  1. Перейди в раздел "Отчёты"
  2. Выбери период: последние 30 дней
  3. Скачай CSV-отчёт
  4. Сохрани в reports/monthly.csv

Никогда не передавайте пароли напрямую в промпт — используйте переменные окружения.

Playwright для A/B тестирования

> Проверь гипотезу: кнопка "Попробовать бесплатно" конвертирует лучше чем "Начать".

  Задача:
  1. Открой https://mysite.ru (версия A: текущая кнопка)
  2. Открой https://staging.mysite.ru (версия B: новая кнопка)
  3. Для обеих версий: найди кнопку, сделай скриншот блока выше фолда
  4. Проверь: правильно ли отображаются оба варианта
  5. Выведи размер, цвет, расположение кнопок для сравнения

Работа с Shadow DOM и SPA

> Сайт использует React. Мне нужно протестировать форму обратной связи.
  Проблема: элементы в Shadow DOM, обычные селекторы не работают.

  Используй page.locator("pierce/input[name='email']") для Shadow DOM.
  Если не работает — попробуй JavaScript:
  page.evaluate(() => document.querySelector(...).shadowRoot.querySelector(...))

Ограничения и этика

Robots.txt: всегда проверяйте разрешён ли автоматический доступ к сайту.

Rate limiting: не делайте сотни запросов в секунду. Добавляйте задержки:

await page.waitForTimeout(1000 + Math.random() * 2000); // 1-3 секунды между запросами

Terms of Service: автоматический скрапинг запрещён на многих сайтах (HH.ru, LinkedIn и др.). Используйте официальные API когда они есть.

Captcha: если сайт показывает captcha — это сигнал что автоматический доступ нежелателен. Не пытайтесь обойти.

Отладка

Если агент не может найти элемент:

> Открой https://mysite.ru/checkout и сделай снимок DOM (browser_snapshot).
  Мне нужно найти кнопку "Оформить заказ" — она может быть в iframe или shadow DOM.

Агент вернёт структуру DOM и поможет найти правильный селектор.

Итог

Playwright + OpenClaw = агент который «видит» веб так же как пользователь. Мониторинг, скрапинг, тестирование, заполнение форм — всё это без написания кода для каждого нового сайта. Начните с простого мониторинга статуса или E2E теста главного flow.

Читайте также: Мониторинг цен и Unit-тестирование с OpenClaw.

Рядом про данные и браузер: MCP Coupler и подключение MCP-сервера.

Рядом про данные и браузер: PostgreSQL.