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

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

• Node.js версии 20 или новее
• MCP-клиент: VS Code, Cursor, Windsurf, Claude Code, Claude Desktop или аналогичный

Установка

Добавьте MCP-сервер Playwright в свой клиент:

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

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

Первое взаимодействие

Попросите своего ИИ-ассистента:

Перейди на https://demo.playwright.dev/todomvc и добавь несколько задач.

Ассистент вызывает инструменты MCP, чтобы открыть браузер, перейти на страницу и взаимодействовать с ней, — на каждом шаге возвращая снимки дерева доступности:

→ browser_navigate { url: "https://demo.playwright.dev/todomvc" }

  - heading "todos" [level=1] [ref=e3]
  - textbox "What needs to be done?" [ref=e5]

→ browser_type { target: "e5", text: "Buy groceries", submit: true }

  - heading "todos" [level=1] [ref=e3]
  - textbox "What needs to be done?" [ref=e5]
  - list [ref=e8]:
    - listitem [ref=e9]:
      - checkbox "Toggle Todo" [ref=e10]
      - text: Buy groceries
  - contentinfo [ref=e12]:
    - text: 1 item left

Рабочий процесс

Каждое взаимодействие через MCP следует этому циклу:

1. Переход — browser_navigate открывает указанный URL
2. Снимок — инструменты возвращают дерево доступности с идентификаторами элементов (ref)
3. Взаимодействие — LLM передаёт идентификатор в качестве target для щелчка, ввода текста или заполнения поля
4. Повторный снимок — каждое действие возвращает обновленное состояние

По умолчанию браузер открывается с графическим интерфейсом, чтобы вы могли наблюдать за происходящим. Передайте --headless для запуска без видимого окна.

Примеры запросов

Перейди на https://example.com и сделай снимок экрана.

Открой https://demo.playwright.dev/todomvc, добавь три задачи,
отметь первую как выполненную и сделай снимок экрана.

Перейди на https://news.ycombinator.com и перечисли первые 5 публикаций.

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

Следующие шаги

• Снимки — как работают идентификаторы элементов (ref)
• Возможности — включение имитации сетевых запросов, работы с хранилищем, тестирования и других возможностей
• Конфигурация — режим без графического интерфейса, выбор браузера, профили