Подключите браузер в тестовом проекте
В корне проекта выполните команду из справки Playwright. На машине, где работает Claude Code, должен быть доступен npx. После подключения откройте новую сессию и проверьте сервер в меню MCP. Если браузер запускается на удалённом сервере, его localhost относится к этому серверу. Проверьте URL со стороны браузера, прежде чем разбирать вёрстку.
claude mcp add playwright npx @playwright/mcp@latestДля упражнения создайте страницу с полем email, связанной подписью «Почта», кнопкой «Проверить» и областью для текста результата. Задайте полю type=email и required. Обработчик события submit вызывает preventDefault и пишет «Тест принят» в элемент с role=status. Привязка обработчика должна происходить после появления формы в DOM. Откройте страницу с обычного локального HTTP-сервера. Так пример можно безопасно прогнать со строкой test@example.org.
Пройдите путь пользователя на двух ширинах
Попросите агента открыть страницу на 390 px, записать заголовок, найти поле по подписи и попробовать три случая. Пустое значение и строка bad должны остановить отправку. При test@example.org должен появиться статус «Тест принят». Снимок страницы сохраните после проверки, чтобы увидеть видимый результат. Сначала проверьте, что клавиша Tab приводит к полю и кнопке в ожидаемом порядке.
Открой локальный URL. Выставь ширину 390 px.
Пройди форму с пустым адресом, bad и test@example.org.
Для каждого случая запиши результат. Покажи ошибки консоли и снимок.
Повтори на 1440 px. Не переходи на внешние сайты.Попросите дополнительно сравнить ширину окна и ширину документа. Если документ шире, назовите элемент, который выходит за границы. Проверьте кнопку после ввода длинного адреса и увеличения шрифта браузера. Видимая область статуса должна появиться под формой, а не накрыть поля. В примере ключевое условие простое: сообщение показывается лишь после валидного адреса и ни один запрос не уходит в настоящий обработчик. В локальном прогоне на 390 и 1440 px пустое поле и bad оставили статус пустым. Для test@example.org появился текст «Тест принят». Ширина документа совпала с шириной окна в обоих случаях. Прогон выполнен на учебной форме в браузере. Подключение Claude Code и MCP в своём проекте проверьте отдельно.
Переведите находку в повторяемый тест
Если подпись есть на экране, но браузер не находит поле по имени, проверьте связь label и input. Если отправка с пустым полем проходит, проверьте required, тип кнопки и обработчик. Если снимок показывает успех, а ожидаемый текст отсутствует в доступном дереве, проверьте роль статуса и обновление DOM. Записывайте наблюдение и ожидаемое поведение отдельно, чтобы разработчик мог воспроизвести ошибку.
После первой диагностики перенесите самые важные проверки в обычный Playwright-тест проекта. Браузерный диалог удобен для поиска проблемы, а проверку при каждом изменении лучше выполнять одной командой. Укажите в отчёте размеры экрана, конкретное значение поля и точный текст результата. Тогда следующий прогон можно сравнить с предыдущим без пересмотра всех скриншотов.
Официальная документация: шаги и условия работы инструмента.