Playwright MCP vs Claude in Chrome - гайд для Claude Code

У Claude Code есть минимум два способа управлять браузером: Playwright MCP от Microsoft и встроенная интеграция Claude in Chrome от Anthropic. Оба открывают реальный Chrome, оба кликают кнопки и читают DOM. Но под капотом — совершенно разная архитектура, разный расход токенов и разные подводные камни.

TL;DR: Playwright MCP — для cross-browser тестирования и CI, но он сжигает 50-114K токенов на страницу и топит контекстное окно. Claude in Chrome — для быстрой проверки с залогиненными аккаунтами, но это бета с дисконнектами и без headless-режима. Для большинства — Claude in Chrome как primary, Playwright MCP только когда нужен Firefox/WebKit или CI.

Что есть что

Playwright MCP — это MCP-сервер от Microsoft, обёртка над Playwright. Ставится одной командой, даёт 33+ инструмента для управления браузером. Работает через accessibility snapshots — не скриншоты, а дерево доступности страницы в текстовом виде. Поддерживает Chromium, Firefox и WebKit.

Claude in Chrome — расширение для Chrome от Anthropic, которое интегрируется напрямую с Claude Code. Даёт 16 инструментов. Ключевое отличие — работает в вашем браузере, с вашими куками, залогиненными сессиями и открытыми вкладками.

Установка

Playwright MCP

claude mcp add playwright npx @playwright/mcp@latest

Одна строка — и в Claude Code появляются инструменты browser_navigate, browser_click, browser_snapshot и ещё 30 штук. Нужен Node.js 18+ (на Node 16 получите ошибку performance is not defined). На Linux дополнительно npx playwright install-deps.

Claude in Chrome

Поставить расширение из Chrome Web Store (версия 1.0.36+)
Запустить Claude Code с флагом:

claude --chrome

Или набрать /chrome в уже запущенной сессии. Чтобы не передавать флаг каждый раз — /chrome → "Enabled by default".

Важный нюанс: Claude in Chrome требует прямой подписки Anthropic (Pro, Max, Teams, Enterprise). Через Bedrock или Vertex — не работает.

Главная разница: токены

Это то, из-за чего выбор между инструментами — не вопрос вкуса, а вопрос бюджета.

Playwright MCP после каждого действия возвращает полное accessibility tree страницы. На простой странице — 5-10K токенов. На сложной (дашборд, SPA с кучей элементов) — 50,000+ токенов за одно взаимодействие. По замерам Pramod Dutta на Medium, типичный тест-сценарий через Playwright MCP съедает ~114K токенов. К двенадцатому шагу в сессии набирается 90K+ токенов старых снапшотов со страниц, которые агент уже покинул.

Claude in Chrome работает легче — по данным AyyazTech, контекстная стоимость инструментов ~7.7% от окна (у Playwright — ~6.8%, но это только определения инструментов, без учёта ответов). Реальный расход на взаимодействие заметно ниже, потому что расширение возвращает таргетированные ответы, а не всё дерево целиком.

Playwright CLI (@playwright/cli) — третий вариант от того же Microsoft. Сохраняет снапшоты и скриншоты на диск как файлы, а не вбрасывает в контекст. Результат — ~27K токенов за тот же сценарий, 4× экономия по сравнению с MCP. Но работает только в агентах с доступом к файловой системе (Claude Code, Cursor, Copilot).

Возможности — кто что умеет

Cross-browser: Playwright MCP — Chromium, Firefox, WebKit. Claude in Chrome — только Chrome и Edge
Headless/CI: Playwright MCP — да (--headless). Claude in Chrome — нет, нужен открытый браузер
Залогиненные сессии: Claude in Chrome — да, полный доступ к вашим аккаунтам. Playwright MCP — нет по умолчанию (можно через --storage-state, но это ручная настройка)
Performance profiling: ни один из двух. Для этого есть Chrome DevTools MCP от Google
Запись GIF: Claude in Chrome — да, встроенная запись взаимодействий. Playwright MCP — нет
Количество инструментов: Playwright MCP — 33+. Claude in Chrome — 16
Стоимость: Playwright MCP — бесплатный. Claude in Chrome — нужна платная подписка Anthropic

Когда что выбирать

Claude in Chrome — ваш ежедневный инструмент, если:

Тестируете локальный web-app на localhost:3000 и хотите быстро проверить UI
Нужно работать с залогиненными сервисами — Google Docs, Notion, CRM, любое веб-приложение
Хотите записать GIF демо-сессии для коллег или документации
Делаете data extraction с сайтов, где нужна авторизация
Отлаживаете UI — читаете console errors и тут же правите код, не переключая контекст

Пример workflow:

Открой localhost:3000/login, попробуй отправить форму с пустым email,
проверь что появляется ошибка "Email обязателен", потом введи
test@example.com и пароль 123456, залогинься и проверь что дашборд загрузился.

Claude откроет вкладку, прокликает все шаги, прочитает DOM и вернёт результат.

Playwright MCP — когда без него не обойтись:

Нужен Firefox или WebKit — Safari-совместимость проверяется только через WebKit
Тесты в CI/CD — headless-режим, никакого GUI
Генерация Playwright-тестов — MCP может писать TypeScript-код для тестов, которые потом запускаются отдельно
Тестирование на разных viewport (--viewport-size 375x812 для мобилки)

# Запуск с конкретным браузером и viewport
claude mcp add playwright npx @playwright/mcp@latest -- --browser firefox --viewport-size 375x812

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

1. Playwright MCP утопит контекст за 10 шагов

Каждый browser_navigate или browser_click возвращает полный accessibility snapshot. На сложном SPA это 50K+ токенов. За 10 шагов тест-сценария — полмиллиона токенов утекло в контекст, и Claude начинает путать, что на текущей странице, а что было три шага назад. По данным GitHub issue #1274, это известная проблема без встроенного решения.

Что делать: для многошаговых сценариев используйте Playwright CLI вместо MCP, либо делайте /clear между логическими блоками тестов.

2. Claude in Chrome отваливается на длинных сессиях

Service worker расширения уходит в idle, и инструменты перестают работать. По официальной документации, фикс — /chrome → "Reconnect extension". Но на практике это прерывает workflow и иногда теряет контекст того, что Claude делал в браузере.

3. Баги ввода текста — общая болезнь

По тестам MinatoPlanB на DEV Community: и Chrome DevTools MCP, и Claude in Chrome роняют первый символ при текстовом вводе, а многострочный текст в <textarea> ломается полностью. Для Playwright MCP таких багов не зафиксировано — Playwright обрабатывает ввод на уровне CDP напрямую.

4. "Enabled by default" раздувает контекст

Если включить Claude in Chrome по умолчанию (без флага --chrome), определения 16 инструментов грузятся в каждую сессию, даже когда браузер не нужен. Расход ~7.7% контекстного окна впустую. Аналогично для Playwright MCP — 33+ инструментов в контексте, даже если вы просто правите Python-скрипт.

Что делать: не включайте ни то, ни другое "by default". Используйте --chrome когда нужен браузер, или добавляйте Playwright MCP с --scope project только в проектах с E2E-тестами.

5. Claude in Chrome не работает через Bedrock/Vertex

Если ваша компания использует Claude через AWS Bedrock или Google Vertex — Claude in Chrome недоступен. Нужна отдельная подписка на claude.ai. А на Pro-плане ($20/мес) расширение работает только с Haiku 4.5 — самая слабая модель, которая спотыкается на сложных workflow.

Вердикт

Для 80% задач browser-автоматизации в Claude Code Claude in Chrome — лучший выбор: меньше токенов на взаимодействие, доступ к залогиненным сессиям, запись GIF, простейшая настройка. Playwright MCP оправдан в двух сценариях: cross-browser тестирование (Firefox/WebKit) и CI/CD pipeline в headless-режиме. Если токены критичны и тесты многошаговые — берите Playwright CLI вместо MCP, это 4× экономия при тех же возможностях.

Универсального инструмента нет. Лучшая стратегия — Claude in Chrome для ежедневной разработки + Playwright MCP/CLI в CI, каждый на своём месте.

Как попробовать

Поставьте Claude in Chrome: расширение из Chrome Web Store, затем claude --chrome
Добавьте Playwright MCP (если нужен cross-browser):

claude mcp add playwright --scope project npx @playwright/mcp@latest

Попробуйте три промпта:
- Claude in Chrome: Открой localhost:3000, кликни "Sign Up", заполни форму тестовыми данными и проверь что регистрация прошла
- Playwright MCP: Открой example.com в Firefox через Playwright MCP, сделай snapshot и проверь accessibility
- Playwright CLI (для экономии): установите npm i -g @playwright/cli@latest и используйте shell-команды вместо MCP-инструментов
Сравните расход: после каждого теста посмотрите в Claude Code сколько контекста использовано — разница между инструментами будет заметна с первого шага
Документация: Claude in Chrome и Playwright MCP

Playwright MCP или Claude in Chrome — чем тестировать в браузере из Claude Code и когда каждый инструмент сливает