Browser QA & Visual Testing

Автоматизация проверки взаимодействия с UI, визуального регресса и аудита доступности с помощью навыка Browser QA для Claude Code. Убедитесь, что ваши веб-приложения готовы к продакшену.

Безопасность и тестирование ★ 172,650 GitHub (172,650 ★)

Browser QA — это комплексный навык тестирования для Claude Code, который автоматизирует проверку живых веб-приложений с помощью инструментов автоматизации браузера, таких как Playwright и Puppeteer. Он проводит многофазные оценки, включая smoke-тесты на ошибки консоли, интерактивное тестирование критических пользовательских сценариев, визуальное регрессионное тестирование на разных размерах экрана и аудит доступности. Моделируя реальное поведение пользователей, этот навык помогает разработчикам выявлять проблемы вёрстки, сломанные формы и узкие места производительности до выкладки в продакшен, предоставляя структурированный отчёт с чёткими вердиктами пройдено/не пройдено.

Ключевые возможности

01Детальные отчёты QA с вердиктами пройдено/не пройдено и метриками Core Web Vitals

02172 650 звёзд на GitHub

03Визуальное регрессионное тестирование на десктопных и мобильных разрешениях экрана

04Интерактивная проверка форм, потоков аутентификации и навигации

05Автоматизированные smoke-тесты на сетевые ошибки и ошибки консоли

06Комплексный аудит доступности с использованием axe-core и стандартам WCAG

Варианты использования

01Проверка поведения UI в стейджинговых окружениях перед выкладкой в продакшен

02Проведение аудита доступности и навигации с клавиатуры для соответствия WCAG

03Выполнение автоматизированных проверок визуальной регрессии при ревью пул-реквестов

name	browser-qa
description	Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.
origin	ECC

Browser QA — Automated Visual Testing & Interaction

When to Use

After deploying a feature to staging/preview
When you need to verify UI behavior across pages
Before shipping — confirm layouts, forms, interactions actually work
When reviewing PRs that touch frontend code
Accessibility audits and responsive testing

How It Works

Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.

Phase 1: Smoke Test

1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Test

1. Click every nav link — verify no dead links
2. Submit forms with valid data — verify success state
3. Submit forms with invalid data — verify error state
4. Test auth flow: login → protected page → logout
5. Test critical user journeys (checkout, onboarding, search)

Phase 3: Visual Regression

1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against baseline screenshots (if stored)
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable

Phase 4: Accessibility

1. Run axe-core or equivalent on each page
2. Flag WCAG AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks

Output Format

## QA Report — [URL] — [timestamp]

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working

### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Integration

Works with any browser MCP:

mChild__claude-in-chrome__* tools (preferred — uses your actual Chrome)
Playwright via mcp__browserbase__*
Direct Puppeteer scripts

Pair with /canary-watch for post-deploy monitoring.

🧪 Что это

Browser QA & Visual Testing — это skill для автоматизированной проверки пользовательского интерфейса и визуального регресса. Он превращает код-ассистента (Claude с MCP) в тестировщика, который «ходит» по страницам, кликает кнопки, заполняет формы, делает скриншоты и проверяет доступность. Skill подходит для CI/CD конвейеров, ревью пул-реквестов, затрагивающих фронтенд, а также для быстрых smoke-тестов перед деплоем.

⚙️ Как работает

Skill использует браузерную автоматизацию MCP (claude-in-chrome, Playwright или Puppeteer). Весь процесс разбит на четыре фазы:

📡 Phase 1: Smoke-тест (базовая проверка)

Переход по целевому URL.
Проверка консоли браузера: ловятся критические ошибки, а warnings от аналитики и сторонних скриптов фильтруются как «шум».
Верификация сетевых запросов: все ответы должны быть 200 или 304, никаких 4xx / 5xx.
Скриншот «над сгибом» (above-the-fold) для десктопного и мобильного разрешений.
Измерение Core Web Vitals: LCP < 2.5 s, CLS < 0.1, INP < 200 ms.

🖱️ Phase 2: Тест взаимодействий

Проход по всем навигационным ссылкам — проверка, что нет «битых» url.
Отправка форм с корректными данными — ожидается success-состояние.
Отправка форм с некорректными данными — ожидается error-состояние (с подсветкой поля, сообщением об ошибке).
Проверка полного цикла аутентификации: login → защищённая страница → logout.
Проверка критических пользовательских сценариев: оформление заказа, онбординг, поиск.

🎨 Phase 3: Визуальный регресс

Делаются скриншоты ключевых страниц на трёх контрольных точках (375px, 768px, 1440px).
Сравнение с эталонными скриншотами (если baseline сохранён).
Фиксируются:
- layout-сдвиги более 5px,
- пропавшие элементы,
- overflow (выход контента за границы контейнера).
Проверка тёмной темы, если она реализована.

♿ Phase 4: Доступность (Accessibility)

Запуск axe-core (или аналогичного инструмента) на каждой странице.
Выявление нарушений WCAG AA: контрастность, aria-ляблы, порядок фокусов.
Полная проверка навигации с клавиатуры (Tab, Enter, Escape).
Верификация landmarks для скринридеров.

📋 Формат отчёта

Skill возвращает отчёт в Markdown. Пример структуры (внутренняя логика — JSON, но на выходе читаемый текст):

## QA Report — https://example.com — 2025-03-20T10:30:00Z

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working

### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Итоговый вердикт — один из: SHIP IT (всё отлично), SHIP WITH FIXES (мелкие правки, не блокирующие релиз) или BLOCKED (критические проблемы).

✅ Когда использовать

После деплоя фичи на стейджинг или preview-окружение — перед отправкой в прод.
При ревью PR, затрагивающих фронтенд: автоматическая проверка не даёт пропустить layout-сдвиг или сломанную форму.
Перед релизом — как финальный smoke-тест.
Для тестирования доступности — быстрый аудит без открытия DevTools вручную.
Для регрессионного тестирования после изменений в CSS или компонентах.

⚠️ Важно знать

Skill не сохраняет baseline-скриншоты автоматически — они должны быть предоставлены или генерироваться отдельно (например, предыдущим прогоном).
Для работы требуется браузерный MCP: предпочтительный вариант — claude-in-chrome (использует вашу локальную копию Chrome). Альтернативы — Playwright через mcp__browserbase__* или прямые Puppeteer-скрипты.
Фильтрация шума в консоли (аналитика, рекламные скрипты) настраивается — skill по умолчанию игнорирует частые сторонние ошибки, но это можно расширить.
Интегрируется с /canary-watch для постдеплойного мониторинга в реальном времени.

🔧 Интеграция и окружение

skill вызывается через MCP-инструменты, например:

# Пример вызова через CLI-интерфейс MCP
mcp-cli run browser-qa --url=https://staging.example.com

Переменные, которые skill ожидает получить из окружения:

$BROWSER_MCP_URL — адрес браузерного MCP-сервера.
$BASELINE_SCREENSHOTS_PATH — путь к эталонным скриншотам (если нужна визуальная регрессия).
$VITALS_THRESHOLDS — пороги для Core Web Vitals (могут быть изменены под конкретный проект).

🚀 Итог

Browser QA & Visual Testing — это готовый «тестовый полигон» для фронтенда, который не требует писать сценарии вручную. Он подходит как для быстрых проверок «одной командой», так и для включения в CI-пайплайн. Основная ценность — единый отчёт с четырёх ракурсов: базовая доступность, пользовательские сценарии, визуальная консистентность и доступность для людей с ограниченными возможностями.

Установка одной командой.

npx skillfish add affaan-m/everything-claude-code browser-qa

Источник: https://mcpmarket.com/tools/skills/browser-qa-visual-testing