Playwright MCP и Claude Code: проверка сайта по критериям продакта
Подключи браузер к Claude Code и проверь пользовательский сценарий: шаги, ожидаемый результат, скриншот и отчёт без написания тестов.
После изменения страницы нужно понять, может ли человек выполнить нужное действие. Просьба «проверь сайт» обычно даёт слишком общий ответ. Playwright MCP позволяет Claude Code открыть браузер и пройти конкретный сценарий, а продакту — задать критерии и проверить доказательства. Результат этой инструкции — короткий протокол приёмки с наблюдениями, а не набор программных тестов.
1. Ограничь проверку одним сценарием
Для упражнения используем публичное демоприложение TodoMVC от Playwright. Оно хранит учебный список дел в браузере. Проверим путь «добавить задачу → завершить → найти в выполненных». Для собственного продукта замени его тестовым стендом и заранее согласованными действиями.
Запиши требования до запуска:
| Действие | Что должно быть видно |
|---|---|
| Добавить «Проверить приглашение коллеги» | Появляется ровно одна задача с этим текстом |
| Отметить её выполненной | Состояние задачи меняется |
| Выбрать Active | Выполненная задача не показывается |
| Выбрать Completed | Та же задача показывается |
Это учебные критерии, а не найденные ошибки. Они задают, что считать успешным результатом. Проверка внешнего вида, мобильной версии и сохранения данных после перезапуска — другие сценарии: не считай их пройденными автоматически.
2. Подключи Playwright MCP к Claude Code
Нужны работающий Claude Code и Node.js не ниже версии 18 согласно README Microsoft. Открой терминал в папке, где будешь хранить отчёт. Проверь команды node --version и npx --version, затем подключи сервер:
claude mcp add playwright npx @playwright/mcp@latestОткрой новую сессию Claude Code и проверь /mcp: сервер playwright должен быть доступен. На первом запуске может потребоваться загрузка пакета или браузера. Если инструмент сообщает об отсутствующем браузере, попроси выполнить предусмотренную сервером установку браузера и просмотри запрос разрешения. При ошибке запуска сохрани сообщение: общая фраза «инструмент подключён» ещё не подтверждает, что страница открылась.
Для первого упражнения не подключай личный браузер через расширение и не вводи рабочие пароли. Достаточно отдельной сессии с учебным сайтом. @latest подходит для знакомства; для повторяемых проверок команды зафиксируй использованную версию пакета в отчёте и согласуй её с разработчиком.
3. Попроси пройти сценарий и сохранить доказательства
Скопируй запрос в Claude Code:
Через Playwright MCP открой https://demo.playwright.dev/todomvc/.
Это учебная проверка списка задач.
Сначала прочитай текущее состояние. Если список непустой,
остановись и сообщи об этом; не удаляй чужие записи.
Добавь одну задачу «Проверить приглашение коллеги».
Убедись, что она появилась ровно один раз.
Отметь её выполненной. Открой Active, затем Completed.
После каждого действия заново проверь состояние страницы.
Сохрани скриншот результата Completed.
Верни таблицу: шаг, ожидание, наблюдение, пройдено/не пройдено/не проверено.
Укажи адрес страницы, размер окна и имя файла скриншота.
Ничего не исправляй в коде и не переходи на другие сайты.
Если действие недоступно, не изображай успешную проверку.В истории должны быть реальные вызовы браузерных инструментов. MCP использует структуру доступных элементов страницы; скриншот нужен, чтобы ты мог посмотреть результат. По документации скриншотов можно сохранять видимую область или всю страницу. Для этого упражнения достаточно состояния Completed с читаемой задачей.
4. Проверь отчёт по наблюдаемым признакам
Не принимай строку «всё работает» без детализации. Открой файл скриншота и сопоставь его с последним шагом. Отчёт должен объяснять, что произошло в Active: отсутствие задачи там ожидаемо только после подтверждённого завершения.
| Запись в отчёте | Как оценить |
|---|---|
| «Кликнул по флажку» | Это действие, ещё не подтверждение результата |
| «Задача отмечена; в Active отсутствует; в Completed видна» | Есть проверяемая последовательность |
| «Не удалось открыть Completed» | Последний критерий не проверен |
| «Сайт полностью протестирован» | Вывод выходит за пределы упражнения |
Если скриншот не сохранился, попроси повторить только его сохранение. Если поменялось состояние страницы, повтори сценарий в чистом учебном контексте и пометь отчёт новым запуском. Не соединяй доказательства разных попыток так, будто это один непрерывный проход.
5. Перенеси формат на свою приёмку
Для тестового стенда формы приглашения задай конкретный адрес, учебный аккаунт, разрешённый email и ожидаемый текст успеха. Если отправка создаёт настоящие приглашения, сначала обеспечь тестовое окружение. Для проверки доступности кнопки отправлять письмо не обязательно.
Сохраняй вместе критерии, время проверки, окружение, таблицу и изображения. Замечание разработчику должно содержать шаг воспроизведения и наблюдаемый результат. Предложение «переделать форму» без воспроизведения — отдельная продуктовая гипотеза.
Моя рекомендация: используй этот способ для короткой приёмки после изменения интерфейса. Один подтверждённый путь пользователя полезнее десятка общих оценок дизайна.
Если сначала нужно проверить сам макет, начни с Figma MCP. Если ещё выбираешь способ доступа агента к браузеру, есть сравнение подходов.
Проверка материала: официальные источники сверены 19 октября 2026 года. Примеры учебные; описанный сценарий в приложении при подготовке статьи не запускался.
Освоить практические рабочие процессы можно на курсе AI Product Club.
Собери своего ИИ-агента и проверь результат
«AI Agents: от vibe coding к AI-команде»: desktop agents, MCP, skills, evals и harness. Отдельные воркшопы — от подключения инструментов до контроля качества.
7 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗