frontend-testing-debugging

Этот скилл предназначен для проверки и точечной отладки уже отображённого frontend-приложения. Его применяют к локальному dev-серверу или другому явно выбранному веб-интерфейсу, когда нужно проверить пользовательский поток, найти UI-регрессию, разобраться с неработающим взаимодействием, ошибками консоли, responsive-вёрсткой или визуальным качеством. Скилл рассчитан на работу из обычного запроса: агент сам уточняет поверхность по репозиторию, открытой странице, соседним файлам и запущенным локальным портам, а не требует от пользователя заранее знать внутренний маршрут инструмента. Работа начинается с короткого определения потока: какая страница открывается, какое действие выполняется и какой результат должен появиться. Затем выбирается способ проверки. Если доступен Browser plugin, источник предписывает использовать его первым и прочитать его правила перед действиями. Если Browser plugin отсутствует, допускается обычный Playwright с явной фиксацией причины. Ошибка на пути Browser считается отдельным блокером; переход к Playwright после неё возможен только если fallback разрешён пользователем или исходной задачей. Для изменения отображённого интерфейса скилл задаёт компактный цикл: определить пользовательский поток, выбрать Browser-путь, внести минимальное полезное изменение, проверить результат в рендере и подготовить QA-отчёт. Это помогает отделить исправление исходного кода от доказательства того, что пользователь действительно видит рабочее состояние. Одного успешного build недостаточно, если требовалась проверка отображённого интерфейса: нужно снова открыть страницу и пройти тот же сценарий. Обязательная проверка страницы включает совпадение URL и заголовка с целью, наличие содержимого вместо пустого shell, отсутствие overlay от Next.js, Vite, Webpack или другого framework, а также просмотр console warnings и errors с объяснением релевантных сообщений. Дополнительно собирается screenshot как визуальное свидетельство и выполняется хотя бы одно действие целевого потока с проверкой изменившегося состояния: например, нового текста, URL, фокуса, модального окна, toast или другого видимого результата. Для UI-проверки учитываются не только happy path и наличие элементов. Скилл предлагает проверить, что контролы меняют реальное состояние, и искать clipping, overlap, нечитаемый текст, неправильный z-index, scroll trap, пропавшие assets, stale loading и layout shift. Для визуальных задач полезно добавить desktop и один мобильный размер viewport. Если работа ведётся по референсу, наблюдения разделяются на свидетельство из референса, фактический рендер и исправление либо намеренное отклонение. Playwright-ветка сначала смотрит scripts проекта, использует существующий e2e-сценарий, а при его отсутствии может выполнить минимальную проверку через Playwright и снять screenshot. Для более глубокого разбора допускается временный скрипт вне исходного кода, который открывает URL, собирает console errors, делает снимки и выполняет нужное взаимодействие. Новые browser-зависимости не устанавливаются без необходимости и разрешения на изменение зависимостей. Итогом должен быть короткий отчёт QA: что проверялось, в каком окружении и viewport, какие поверхности изменены, какие проверки прошли, каким был точный путь взаимодействия, где лежит evidence и какие viewports, браузеры, data states или flows остались непроверенными. Такой формат делает результат воспроизводимым и не смешивает визуальную регрессию с общим аудитом продукта. Сам скилл не заменяет отдельные проверки безопасности, производительности или полный cross-browser suite; его граница — подтверждённое поведение конкретного отображённого frontend-потока.