Сохраните эталонные скриншоты сайта до правок Claude Code, а после изменений запустите сравнение в Playwright. Так можно заметить, что кнопка ушла за край экрана, заголовок перекрыл фотографию или форма стала шире страницы. Для кнопок добавьте отдельные проверки нажатий: скриншот показывает внешний вид, но не подтверждает работу действия. Ниже разберём, как подготовить такие тесты, проверить отчёт и решить, какие изменения можно выпускать на рабочий сайт.
Что проверять на сайте после вайбкодинга?
Начните со страницы, через которую посетитель оставляет заявку или выбирает товар. Для небольшого бизнеса это понятнее, чем сразу покрывать тестами весь сайт. Если Claude Code менял общие стили, включите в проверку ещё и страницу с другой структурой: правка отступов в шапке затрагивает больше одного экрана.
Playwright управляет браузером и выполняет действия по сценарию. Визуальный тест делает скриншот и сравнивает его с эталоном, который команда заранее приняла. Если изображения различаются сильнее, чем разрешают настройки теста, проверка завершается с ошибкой.
В первый набор включите конкретные состояния интерфейса:
- Страница сразу после загрузки: видны заголовок, меню и основная кнопка.
- Узкий экран: текст помещается по ширине, элементы не перекрывают друг друга.
- Открытое меню или окно: содержимое не выходит за экран.
- Форма после отправки без обязательного поля: подсказка не ломает соседние блоки.
Сломанная кнопка не всегда отличается внешне от рабочей. Поэтому рядом со скриншотом нужен сценарий: нажать кнопку и проверить результат. Например, после нажатия «Оставить заявку» тест должен найти видимую форму, а после открытия меню — ссылку на нужный раздел.
Как подготовить Playwright и эталонные скриншоты?
Попросите Claude Code сначала изучить проект и найти существующие тесты. Если Playwright уже настроен, второй набор настроек только усложнит запуск. Если его нет, для проекта на Node.js с npm можно установить тестовый пакет командой npm install --save-dev @playwright/test, затем браузер командой npx playwright install chromium. Изменения сначала выполняйте в отдельной ветке проекта, без публикации на рабочий сайт.
Дальше дайте Claude Code ограниченное задание. Его можно скопировать в чат целиком:
«Подготовь визуальную проверку страницы с формой заявки в Playwright. Используй существующую конфигурацию проекта. Добавь проверки через toHaveScreenshot для обычного и узкого экрана. Перед снимком дождись загрузки шрифтов и ключевого изображения, отключи анимации. Отдельно проверь, что основная кнопка открывает форму. Не меняй код сайта ради прохождения теста. Покажи файлы, которые изменишь, и команду запуска».
Эталон снимайте с версии, которую уже проверили глазами. Если начать с ошибочной страницы, тест запомнит её как правильную. Откройте страницу в обычном браузере, проверьте переносы текста и прокрутите её до конца. Затем посмотрите состояния, которые попадут в снимки: меню, форму и сообщения об ошибках.
Для создания эталонов используйте npx playwright test --update-snapshots. Эта команда обновляет эталонные изображения, поэтому сначала ограничьте запуск нужным тестовым файлом, если в проекте уже есть другие проверки. Сохраните сами тесты и снимки в системе контроля версий вместе с настройками браузера.
Зафиксируйте одинаковое окружение для следующих запусков: браузер, размер окна и операционную систему. Различия в отрисовке шрифтов между компьютером разработчика и сервером автоматических проверок могут давать расхождения без изменений в вёрстке. Эталоны лучше создавать там же, где затем будет проходить регулярная проверка.
Как убрать случайные различия между скриншотами?
Скриншот должен показывать одно и то же состояние страницы при каждом запуске. Бегущая строка, случайный товар или текущее время мешают сравнению: тест замечает изменение картинки, хотя Claude Code не трогал этот блок. Для тестового сценария задайте постоянные данные и одинаковое начальное состояние.
Попросите Claude Code подготовить страницу к снимку по явным условиям:
- Дождаться шрифтов и изображений, которые влияют на размеры блоков.
- Отключить анимации на время снимка, включая переходы при открытии окна.
- Зафиксировать данные каталога или другого блока, где содержимое меняется между запусками.
- Скрыть маской только те динамические элементы, внешний вид которых сейчас не проверяется.
Не заменяйте эти условия произвольной паузой. На другом компьютере страница загрузится медленнее, и снимок снова окажется случайным. Надёжнее дождаться видимого заголовка, готового изображения или нужного состояния формы.
С масками нужна точность. Если закрыть маской всю карточку товара, тест пропустит и съехавшую цену, и пропавшую кнопку. Закрывайте только изменчивый фрагмент, например текущее время, а геометрию важного блока оставляйте в проверке.
Начните со строгого сравнения и изучите реальные расхождения. Допуск на различия настраивайте под понятную причину. Если просто увеличить допустимое число отличающихся пикселей до успешного результата, тест рискует пропустить обрезанный текст.
Как читать отчёт после правок Claude Code?
После изменения сайта запустите npx playwright test. Если тест сохранил HTML-отчёт, откройте его командой npx playwright show-report. В отчёте визуальной проверки можно изучить эталон, новый снимок и изображение различий. Сначала найдите область расхождения, затем откройте страницу в том же размере окна.
Проверяйте смысл изменения. Новая подпись на кнопке может быть частью задачи, а перенос этой кнопки под соседний блок — побочным эффектом. При ошибке верните Claude Code конкретное замечание: «На узком экране кнопка отправки выходит за правый край формы. Исправь ширину, сохрани текущие отступы остальных блоков и повтори тест».
Если изменение ожидаемое, сначала подтвердите его глазами и только затем обновляйте соответствующий эталон. Массовое обновление снимков сразу после неудачного запуска стирает полезный сигнал: новая ошибка становится образцом для следующих проверок.
Отдельно убедитесь, что тест вообще замечает поломку. Во временной ветке измените ширину кнопки или отступ проверяемого блока, запустите тест и убедитесь, что он сообщает о различии. После проверки отмените эту правку. Подробный порядок такой проверки разобран в материале о том, как убедиться, что тесты Claude Code находят ошибки.
Когда ручной запуск работает, его можно включить в процесс разработки. Начните с проверки перед публикацией, затем добавьте автоматический запуск после нужных изменений. Для этого пригодится инструкция о том, как запускать проверки после правок Claude Code через хуки. Следите, чтобы автоматический сценарий запускал тесты, но не обновлял эталоны без вашего решения.
Если проверку готовит подрядчик, зафиксируйте результат работы в задании: тестовые сценарии, эталоны, команда запуска и порядок разбора ошибок. Тогда после следующей правки сайта владелец бизнеса сможет повторить проверку, даже если её настраивал другой разработчик.
Типичные ошибки при визуальной проверке сайта
- Эталон создают после правок без просмотра. Сначала проверьте страницу вручную, затем принимайте снимок.
- Проверяют только внешний вид кнопки. Добавьте нажатие и проверку результата: появления формы, меню или нужной страницы.
- Снимают только верх страницы. Для важных блоков ниже первого экрана добавьте отдельные снимки или проверку всей страницы.
- Любое расхождение исправляют обновлением эталона. Сначала установите причину: ошибка вёрстки, случайные данные или запланированное изменение.
- Считают успешный визуальный тест полной проверкой сайта. Он не подтверждает корректность расчётов, отправки заявки и прав доступа.
Начните сейчас: за две минуты запишите адрес самой важной страницы и одно действие посетителя, которое нельзя сломать, например открытие формы по кнопке «Оставить заявку». Передайте эту пару Claude Code как первый сценарий проверки.
