All topics·Intermediate·27 / 27

Playwright MCP

Playwright MCP lets AI assistants control a browser through the Model Context Protocol. Instead of processing screenshots, the model reads a structured accessibility tree — which elements exist, their roles, their text. Works with VS Code, Claude, Cursor, and any MCP client. No vision model required.

Installation — add to your MCP client config

The same config works for most MCP clients. Add it to the appropriate config file for your client:

json

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

bash

# Claude Code — одна команда
claude mcp add playwright npx @playwright/mcp@latest

# VS Code — через CLI
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

How it works — accessibility tree, not screenshots

When a tool runs, it returns a structured snapshot of the page — elements with their roles, text, and refs. The model uses those refs to interact. No need to parse pixel positions or describe what it 'sees' in an image.

text

// Приклад того що бачить модель після browser_snapshot
- heading "Orders" [level=1]
- textbox "Search orders" [ref=e5]
- button "Create order" [ref=e8]
- listitem:
  - text "ORD-042 — Laptop Stand"
  - button "Edit" [ref=e15]

// Модель може відразу: browser_click ref=e8

What you can ask the AI to do

After connecting MCP, just describe what you need in natural language. The assistant picks the right tools automatically.

text

// Тестування flow
Перейди на http://localhost:3000/orders і перевір що таблиця
замовлень відображається з правильними колонками.

// Заповнення форм
Відкрий /orders/new, заповни форму: Item = "Laptop Stand",
Quantity = 2, натисни Create. Перевір що з'явився success banner.

// Мокування API
Замокай GET /api/orders щоб повертав порожній масив.
Перевір що сторінка показує "No orders yet" замість таблиці.

// Дебаг
Відкрий /dashboard і перевір наявність JavaScript-помилок
в консолі браузера.

Configuration options

By default: headed browser (you can see it), persistent profile (cookies preserved between sessions). Override with flags in the args array.

json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",         // без видимого вікна
        "--browser=firefox",  // firefox замість chromium
        "--isolated"          // кожна сесія з чистим станом
      ]
    }
  }
}

Take the quiz