К основному содержанию
команда

setup-visual-testing — команда для Claude Code: визуальные регрессии

Слэш-команда разворачивает визуальное регрессионное тестирование: снимки компонентов и страниц, адаптивные брейкпоинты, проверка доступности.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓
npx claude-code-templates@latest --command testing/setup-visual-testing
Открыть на GitHub

Что делает setup-visual-testing

Команда setup-visual-testing проводит агента по шагам настройки визуального тестирования. Сначала она смотрит, что уже есть в проекте: фреймворк, структуру компонентов, следы Cypress, Playwright или Storybook, конфигурацию CI. Потом предлагает выбрать инструмент — Percy, Chromatic, BackstopJS или Playwright — и настроить интеграцию.

Дальше работа идёт по блокам: снять базовые снимки и разложить их по версиям, описать сценарии для компонентов и страниц, задать адаптивные брейкпоинты и матрицу браузеров, подключить прогон в CI с ревью изменений. Отдельно настраиваются пороги различий и алгоритмы сравнения, чтобы отсекать ложные срабатывания. Есть и проверка доступности вместе с кросс-браузерной валидацией.

Область задаётся аргументом: --components, --pages, --responsive, --cross-browser или --accessibility. Без аргумента команда берёт общий охват. Инструментам вроде Percy и Chromatic нужен доступ к их сервису, так что ключи и токены придётся подготовить заранее — иначе шаг с базовыми снимками упрётся в авторизацию.

Какие задачи решает

  • развернуть визуальное регрессионное тестирование с нуля
  • снять базовые снимки интерфейса и положить их под версионный контроль
  • прогнать одни и те же страницы в нескольких браузерах
  • проверить вёрстку на разных ширинах экрана
  • добавить проверку доступности к визуальным тестам

Примеры запросов агенту

  • настрой визуальное тестирование для компонентов: /setup-visual-testing --components
  • прогони визуальные тесты на адаптивность: /setup-visual-testing --responsive
  • подключи проверку доступности к визуальным тестам: /setup-visual-testing --accessibility

Как установить setup-visual-testing

1Через claude-code-templates

npx claude-code-templates@latest --command testing/setup-visual-testing

2Вручную: положить файлы

.claude/commands/setup-visual-testing.md

Вызов — /setup-visual-testing. Для всех проектов — ~/.claude/commands/

Из того же набора205

Весь набор →
branch-cleanup Слэш-команда для Claude, которая находит слитые и устаревшие ветки, проверяет их перед удалением и наводит порядок в локальном и удалённом репозитории. 342установок pentest-checklist Скилл проводит через планирование пентеста: цели, границы, подготовка среды, выбор исполнителей и мониторинг. Пригодится перед проверкой на проникновение. 336установок create-database-migrations Слэш-команда для Claude, которая создаёт файлы миграций базы данных с версионированием и методами отката. Пригодится, когда меняете схему и не хотите писать up/down вручную. 329установок nia-oracle Субагент для Claude, который ищет репозитории и документацию через инструменты Nia, индексирует найденное и достаёт оттуда ответы. 329установок java-mcp-expert Субагент для сборки MCP-серверов на Java: официальный SDK, Project Reactor и Spring Boot. Пригодится, когда нужно поднять сервер с инструментами и ресурсами. 291установок database-optimizer Скилл для Claude, который разбирает узкие места базы: планы выполнения, индексы, N+1, кеш и партиционирование. Пригодится, когда запросы тормозят, а непонятно почему. 286установок husky Прогоняет линтер, сборку, типы и тесты по шагам и правит ошибки, пока репозиторий не станет рабочим. Полезно перед коммитом. 282установок exploratory-data-analysis Скилл для Claude, который определяет формат научного файла и собирает отчёт о структуре, качестве и дальнейших шагах анализа. 279установок

Похожие

visual-testing kindlmann Скилл для визуального регрессионного тестирования: сравнивает скриншоты с эталонами и ловит различия на уровне пикселей, которые пропускают функциональные тесты. CX Codex +1 1 200установок visual-regression-testing aj-geddes Ловит случайные визуальные изменения интерфейса: снимает скриншоты компонентов и страниц и сравнивает их между версиями. CX Codex +1 718установок frontend-visual-qa daymade Проверяет уже отрендеренный интерфейс в реальном браузере: типографику, переполнение, адаптив, маршруты, графики. Пригодится после вёрстки, когда сборка прошла, а глазами никто не смотрел. CX Codex +1 572установок accessibility-testing aj-geddes Скилл для проверки веб-приложений на соответствие WCAG: axe, навигация с клавиатуры, ARIA, скринридеры. Пригодится, когда нужно закрыть a11y-требования в проекте. CX Codex +1 575установок web-testing mrgoonie Скилл для веб-тестирования: юнит, интеграция, E2E, нагрузка, безопасность, визуальные регрессии и доступность. Пригодится, когда нужно навести порядок в тестах проекта. CX Codex +1 442установок visual-regression-tester patricio0312rev Скилл настраивает визуальное регрессионное тестирование: снимает скриншоты, сравнивает их с базовыми и ловит случайные изменения интерфейса. CX Codex +1 330установок

Рядом в теме «Тесты и QA»

Всё по теме «Тесты и QA» →

Вопросы о setup-visual-testing

Как установить setup-visual-testing в Claude?

Выполните npx claude-code-templates@latest --command testing/setup-visual-testing, затем проверьте, что файл появился по пути .claude/commands/setup-visual-testing.md.

Что делает setup-visual-testing?

Настраивает визуальное регрессионное тестирование: выбор инструмента, базовые снимки, сценарии для компонентов и страниц, интеграцию с CI и пороги сравнения.

Какие аргументы принимает команда?

Область тестирования задаётся через --components, --pages, --responsive, --cross-browser или --accessibility; можно передать общий охват без флага.

Исходный текст

setup-visual-testing.md · MIT
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: "[testing-scope] | --components | --pages | --responsive | --cross-browser | --accessibility"
description: Setup comprehensive visual regression testing with cross-browser and responsive testing
---

# Setup Visual Testing

Setup comprehensive visual regression testing with responsive and accessibility validation: **$ARGUMENTS**

## Current Visual Testing Context

- Frontend framework: !`grep -l "react\\|vue\\|angular" package.json 2>/dev/null || echo "Detect framework"`
- UI components: !`find . -name "components" -o -name "src" | head -1 && echo "Component structure detected" || echo "Analyze structure"`
- Existing testing: !`find . -name "cypress" -o -name "playwright" -o -name "storybook" | head -1 || echo "No visual testing"`
- CI system: !`find . -name ".github" -o -name ".gitlab-ci.yml" | head -1 || echo "No CI detected"`

## Task

Implement comprehensive visual testing with regression detection and accessibility validation:

**Testing Scope**: Use $ARGUMENTS to focus on component testing, page testing, responsive testing, cross-browser testing, or accessibility testing

**Visual Testing Framework**:

1. **Tool Selection & Setup** - Choose visual testing tools (Percy, Chromatic, BackstopJS, Playwright), configure integration, setup environments
2. **Baseline Creation** - Capture visual baselines, organize screenshot structure, implement version control, optimize image management
3. **Test Scenario Design** - Create component tests, design page workflows, implement responsive breakpoints, configure browser matrix
4. **Integration Setup** - Configure CI/CD integration, setup automated execution, implement review workflows, optimize performance
5. **Regression Detection** - Configure diff algorithms, setup threshold management, implement approval workflows, optimize accuracy
6. **Advanced Testing** - Setup accessibility testing, configure cross-browser validation, implement responsive testing, design performance monitoring

**Advanced Features**: Automated visual testing, intelligent diff analysis, accessibility compliance checking, responsive design validation, performance visual metrics.

**Quality Assurance**: Test reliability, false positive reduction, maintainability optimization, execution performance.

**Output**: Complete visual testing setup with baseline management, regression detection, CI integration, and comprehensive validation workflows.

© davila7 · MIT · davila7/claude-code-templates

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой