browser automation · 2026

Playwright MCP:
управляй браузером
из Claude Code

Открывай страницы, кликай на элементы, делай скриншоты и выполняй JavaScript — всё текстовыми командами прямо в терминале.

⏱ ~8 мин чтенияуровень: beginnerOS: любая

// contents

01Что это и зачем
02Установка
03Инструменты
04Практические сценарии
05Важные детали
06Комбо с плагинами
07Когда не нужен

// 01

Что это и зачем

Playwright — популярная библиотека от Microsoft для автоматизации браузеров. Она умеет открывать Chrome, Firefox, WebKit, нажимать кнопки, заполнять формы, делать скриншоты и выполнять JavaScript на странице.

Плагин playwright@claude-plugins-official — это MCP-сервер, который подключает возможности Playwright к Claude Code. Ты можешь попросить Claude: «зайди на сайт, проверь форму, сделай скриншот» — и он это сделает, не выходя из терминала.

ℹ

Под капотом — официальный MCP-сервер от Microsoft: @playwright/mcp. Антропик упаковал его в плагин для удобной установки.

// 02

Установка

Одна команда в Claude Code:

claude code

/plugin install playwright@claude-plugins-official

После установки Claude Code получает доступ к инструментам управления браузером в каждой сессии. Перезапуск не нужен.

Playwright автоматически скачает нужные браузеры при первом запуске. Это может занять пару минут.

// 03

Инструменты

Плагин добавляет 6 инструментов. Claude использует их автоматически — ты просто описываешь задачу словами.

browser_navigate

Открывает URL в браузере. Стартовая точка любого сценария.

пример запроса

Открой https://veluxi.ru

browser_snapshot

Возвращает accessibility tree страницы — структурированное дерево всех элементов: кнопок, полей, ссылок, текстов. Claude читает его перед тем как кликать.

ℹ

Снэпшот — это текст, который Claude анализирует. Скриншот — картинка для тебя. Для действий на странице нужен снэпшот.

browser_click

Кликает по элементу — кнопке, ссылке, чекбоксу. Claude сам найдёт элемент по описанию через снэпшот.

пример запроса

Нажми на кнопку "Войти"

browser_take_screenshot

Делает скриншот текущего состояния страницы и показывает его в чате.

Полезно для:

Визуального контроля что страница выглядит правильно
Отладки — понять что пошло не так
Документации UI перед деплоем

browser_file_upload

Загружает файл через <input type="file">. Указывай абсолютный путь к файлу.

пример запроса

Загрузи файл /Users/me/photo.jpg в поле загрузки на странице

browser_evaluate

Выполняет произвольный JavaScript в контексте страницы. Самый мощный инструмент — доступ к DOM, localStorage, cookies, любым данным.

javascript

// посчитать ссылки на странице
document.querySelectorAll('a').length

// проверить токен в localStorage
localStorage.getItem('auth_token')

// найти медленные ресурсы
performance.getEntriesByType('resource')
  .filter(r => r.duration > 1000)
  .map(r => r.name)

// 04

Практические сценарии

$ scenarioТестирование своего сайта

запрос к claude

Открой localhost:3000
Сделай скриншот главной страницы
Нажми на кнопку "Статьи"
Убедись что открылась страница /articles
Нажми на первую статью в списке
Сделай скриншот

$ scenarioПроверка формы на баги

запрос к claude

Открой localhost:3000/contact
Попробуй отправить пустую форму — покажи какие ошибки валидации появились
Заполни форму тестовыми данными: имя "Тест", email "test@test.com"
Нажми отправить
Сделай скриншот результата

$ scenarioПарсинг данных

запрос к claude

Открой https://example.com/prices
Выполни JavaScript и верни все цены:
Array.from(document.querySelectorAll('.price')).map(el => el.textContent.trim())

$ scenarioОтладка production

запрос к claude

Открой https://veluxi.ru
Проверь через JavaScript есть ли ошибки в консоли и медленные запросы (> 1 сек)
Сделай скриншот страницы
Проверь meta title и description

$ scenarioАвтоматизация рутины

запрос к claude

Открой https://admin.example.com/login
Введи логин admin и пароль из .env файла
Перейди в раздел Reports → Export
Нажми кнопку "Export CSV"
Сообщи когда файл начнёт скачиваться

// 05

Важные детали

Headless режим

Браузер запускается headless — без видимого окна. Ты не видишь как он работает, но получаешь скриншоты и данные после каждого шага.

Контекст сохраняется

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

snapshot vs screenshot

browser_snapshot

Текстовое дерево элементов
Claude читает и анализирует
Нужен для действий на странице
Быстрее и легче

browser_take_screenshot

Картинка страницы
Ты видишь результат
Нужен для отчёта / дебага
Медленнее

⚠

browser_evaluate выполняет любой JS в контексте страницы. На своих проектах — незаменим. На чужих сайтах — с пониманием что делаешь.

// 06

Комбо с другими плагинами

Playwright особенно мощен в связке с другими плагинами:

feature-devРазработал фичу → сразу проверил в браузере не переключаясь из Claude

code-reviewПроревьюил код → запустил браузер и убедился что UI работает как ожидалось

sentryНашёл ошибку в Sentry → воспроизвёл в браузере через Playwright → починил

superpowersАгент планирует задачу, пишет код, проверяет результат в браузере — всё автоматически

// 07

Когда Playwright MCP не нужен

Для unit/integration тестов — там нужен Jest/Vitest, не браузер
Для тестирования API — лучше curl или fetch в Node
Если нужен полный e2e test suite — лучше написать .spec.ts файлы для Playwright напрямую
Если сайт требует CAPTCHA или сложной 2FA — MCP не обойдёт их

Playwright MCP — это инструмент для интерактивной автоматизации и быстрой проверки в процессе разработки, не замена полноценному тест-сьюту.