Playwright MCP — Сценарии использования, Установка & Живое демо

Name: Playwright MCP Server
Author: microsoft

Зачем использовать

Ключевые функции

Собственный — публикуется и поддерживается командой Microsoft Playwright.
На основе дерева доступности — гораздо надежнее, чем браузерные агенты на основе пикселей.
Поддерживает Chromium, Firefox, WebKit, с головой или без головы.
Мультивкладка, загрузка/скачивание файлов, перехват сети, запись видео

Живое демо

Как выглядит на практике

playwright.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

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

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "playwright": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add playwright -- npx -y @playwright/mcp@latest

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Playwright

Дымовое тестирование производственного развертывания за 60 секунд

👤 DevOps-инженеры, релиз-менеджеры ⏱ ~5 min intermediate

Когда использовать: Вы только что отправили развертывание и хотите быстро проверить, что критически важные пользовательские потоки все еще работают, прежде чем объявить об успехе.

Предварительные требования

Учетные данные тестовой учетной записи (используйте специальную учетную запись QA, а не реального пользователя) — Хранить в переменных окружения или в самой командной строке.

Поток

Откройте домашнюю страницу и убедитесь, что она загружается.

Откройте https://app.example.com. Убедитесь, что страница возвращает 200, H1 говорит «Добро пожаловать», и кнопка входа видна.✓ Скопировано

→ Пройден/не пройден со снимком экрана в случае неудачи
Запустите вход → основное действие → процесс выхода из системы.

Войдите в систему как [email protected] / [пароль]. Затем создайте новый проект с именем «smoke-test-<timestamp>». Затем удалите его. Затем выйдите из системы.✓ Скопировано

→ Каждый шаг успешен; если что-то не получается, скриншот + дамп DOM
Диагностика любой неисправности

Если шаг не удался, сделайте снимок страницы и сообщите мне, чем он отличается от рабочего базового показателя.✓ Скопировано

→ Конкретный элемент или сетевой запрос, который сломался

Итог: Уверенность (или быстрая паника) в ходе развертывания менее чем за минуту без необходимости использования полного пакета E2E.

Подводные камни

Жестко запрограммированные тестовые данные накапливаются и загрязняют продукцию. — Всегда используйте уникальные временные метки в тестовых данных и очищайте их в конце потока.
Сеанс браузера сохраняется между запусками, маскируя ошибки, требующие чистого состояния. — Запускайте с --browser-context: incognito или очищайте файлы cookie между запусками.

Сочетать с: sentry

Проведите аудит вашего сайта при 5 ширинах области просмотра и сообщите о поломках

👤 Фронтенд-инженеры, дизайнеры ⏱ ~15 min intermediate

Когда использовать: Прежде чем отправлять маркетинговый сайт или страницу продукта, вы должны убедиться, что он не нарушает стандартную ширину.

Поток

Откройте страницу с 5 ширинами области просмотра (320, 375, 768, 1024, 1440).

Откройте https://example.com в окнах просмотра 320×568, 375×812, 768×1024, 1024×768, 1440×900. Сделайте полностраничный скриншот каждого.✓ Скопировано

→ 5 скриншотов сохранено
Обнаружение горизонтального перелива на каждой ширине

Для каждого окна просмотра перечислите все элементы, в которых ScrollWidth > viewportWidth. Это вызывает горизонтальную прокрутку и ощущение поломки.✓ Скопировано

→ Список нарушающих CSS-селекторов для каждого окна просмотра
Предложить исправления

Для каждого элемента переполнения получите рассчитанный CSS и предложите наименьшее исправление (вероятно, максимальную ширину, перенос переполнения или настройку точки останова).✓ Скопировано

→ Действенная разница для каждого элемента

Итог: Приоритетный список исправлений с конкретными селекторами, который можно подать как один PR.

Подводные камни

У реальных пользователей есть полосы прокрутки (15 пикселей в Windows), которые безголовый браузер по умолчанию не имитирует. — Протестируйте с --browser=chromium и --browser=webkit; ширина имеет большее значение, чем вы думаете

Сочетать с: chrome-devtools · filesystem

Просканируйте свой сайт и найдите каждую неработающую внутреннюю ссылку.

👤 Ведущие документации, SEO-менеджеры ⏱ ~30 min intermediate

Когда использовать: Перед маркетинговым продвижением или раз в квартал — молчаливые 404 на внутренних ссылках вредят SEO и доверию пользователей.

Поток

Сканировать сайт, собирая все внутренние ссылки.

Начиная с https://docs.example.com, сканируйте все страницы в одном домене (максимум глубина 3). Соберите все найденные ссылки.✓ Скопировано

→ Полная инвентаризация ссылок
Тестируйте каждую ссылку

Для каждого уникального URL-адреса отправьте запрос HEAD и запишите код состояния. Пометить что-нибудь >= 400.✓ Скопировано

→ Список неработающих ссылок с кодами состояния
Группировать неработающие ссылки по рефереру

Для каждой неработающей ссылки укажите, на каких страницах она ссылается, чтобы я знал, где исправить.✓ Скопировано

→ Список рефереров по неработающей ссылке, упорядоченный по количеству рефереров

Итог: Отчет об уценке, который вы можете передать команде документации, в котором перечислены все неработающие ссылки, сгруппированные по страницам, требующим исправления.

Подводные камни

Некоторые сайты ограничивают скорость агрессивных сканеров — Добавить задержку между запросами; если вы работаете на производстве, делайте это в непиковые часы

Сочетать с: filesystem · github

Очистка данных, требующих аутентификации

👤 Аналитики данных, исследователи ⏱ ~20 min advanced

Когда использовать: Необходимые вам данные находятся за учетной записью (ваша собственная панель администратора, внутренние отчеты и т. д.), и базовые парсеры не могут получить к ним доступ.

Предварительные требования

Действительные учетные данные для цели — Используйте сервисную учетную запись, а не личную.

Поток

Авторизоваться

Откройте https://target.example.com/login. Заполните поле электронной почты [email] и пароль [пароль]. Представлять на рассмотрение.✓ Скопировано

→ Подтвержденный сеанс – переход на URL-адрес информационной панели.
Перейдите на страницу данных

Нажмите на раздел «Отчеты». Подождите, пока таблица данных отобразится.✓ Скопировано

→ Таблица видна в DOM
Извлеките данные

Прочитайте каждую строку таблицы отчета. Возврат в формате JSON с каждым столбцом в качестве ключа.✓ Скопировано

→ Полный набор данных в формате JSON

Итог: Структурированные данные, которые вы не могли бы получить с помощью простого HTTP-сборщика, готовые к отправке в электронную таблицу или базу данных.

Подводные камни

MFA включен и прерывает поток — Установите пароль для конкретного приложения, если служба его поддерживает, или вместо этого используйте долгосрочный токен API.
Капчи появляются после многократного входа в систему — Используйте постоянный контекст браузера (--user-data-dir), чтобы файлы cookie использовались повторно и вы не запускали шлюзы проверки подлинности.

Сочетать с: postgres · filesystem

Комбинации

Сочетайте с другими MCP — эффект x10

playwright + filesystem

Очистите сайт, сохраните содержимое каждой страницы на диск для автономной RAG.

Crawl docs.stripe.com starting from /api, save each page as a Markdown file under ./knowledge/stripe/{path}.md.✓ Скопировано

playwright + chrome-devtools

Performance + functional testing in one flow — verify the page loads correctly AND fast

Open my landing page. Verify the H1, then capture a Lighthouse trace and tell me if LCP is under 2 seconds.✓ Скопировано

playwright + sentry

Reproduce a production error reported in Sentry by replaying user breadcrumbs

Sentry issue WEB-3a91 says the user clicked X then Y then crashed. Reproduce that exact sequence in Playwright and confirm.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
browser_navigate	url: str	Переход к URL-адресу — первое действие любого потока	1 page load
browser_snapshot		Получите структурированное представление всех интерактивных элементов (ссылок, кнопок, полей ввода).	free
browser_click	ref: str (from snapshot) \| selector: str	Нажмите на элемент, определенный ссылкой на снимок или селектором CSS.	free
browser_type	ref, text, submit?: bool	Заполните поле ввода; с submit:true также нажимает Enter	free
browser_screenshot	fullPage?: bool, path?: str	Сбор визуальных данных — отладка или аудит	disk space
browser_evaluate	script: str	Запускайте произвольный JS в контексте страницы — используйте экономно, отдавайте предпочтение конкретным инструментам.	free
browser_network_requests		Проверьте, что загружается на странице; полезно для поиска скрытых конечных точек API	free

Стоимость и лимиты

Во что обходится

Квота API: Free — runs locally, only your machine resources
Токенов на вызов: Snapshots are 500-3000 tokens depending on page complexity
Деньги: Free. Browser binaries downloaded once (~300MB Chromium).
Совет: Use browser_snapshot instead of screenshots — it's 100× cheaper in tokens and more reliable for Claude to act on.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Pass via env vars; never put real production credentials in prompts

Исходящий трафик: Browsers connect to whatever URLs you navigate to. No telemetry to Microsoft.

Browser sessions persist — clear cookies between runs if you're testing auth.
Headed mode opens a real window on your machine; use headless for CI.

Устранение неполадок

Частые ошибки и исправления

Element not found / TimeoutError

The page hasn't finished rendering. Add an explicit wait: browser_wait_for(selector) or browser_wait_for(text='...') before the action.

Проверить: Take a snapshot first to see what's actually on the page

Browser fails to launch on Linux

Install OS deps: npx playwright install-deps. Common in Docker — use the official Playwright image as base.

Проверить: playwright --version

All navigations fail with net::ERR_*

Network sandboxing issue. Run with --no-sandbox if in Docker, or check your firewall / proxy.

Site detects automation and shows captcha

Use --browser-type=firefox (less detected than headless Chromium), or run headed if appropriate. Some sites are intentionally bot-resistant — respect that.

Альтернативы

Playwright в сравнении

Альтернатива	Когда использовать	Компромисс
puppeteer MCP	You only need Chromium and want a slightly simpler API	Chromium-only; no Firefox/WebKit; smaller community now
Firecrawl MCP	You just need to extract content, not interact with the page	Hosted (costs credits) but zero infra; can't click through flows
Browserbase MCP	You need to run browser automations from a serverless context (no local browser)	Hosted service with per-minute pricing; great for production agents

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills