setup-visual-testing — команда для Claude Code: визуальные регрессии
Слэш-команда разворачивает визуальное регрессионное тестирование: снимки компонентов и страниц, адаптивные брейкпоинты, проверка доступности.
npx claude-code-templates@latest --command testing/setup-visual-testingЧто делает 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-testing2Вручную: положить файлы
.claude/commands/setup-visual-testing.mdВызов — /setup-visual-testing. Для всех проектов — ~/.claude/commands/
Вручную: положить файлы
~/.codex/prompts/setup-visual-testing.mdВызов — /prompts:setup-visual-testing. В Codex этот формат помечен устаревшим, замена — скиллы
Вручную: положить файлы
.github/prompts/setup-visual-testing.prompt.mdВручную: положить файлы
.gemini/commands/setup-visual-testing.tomlGemini хранит команды в TOML: текст запроса — в поле prompt
Из того же набора205
Весь набор →Похожие
Рядом в теме «Тесты и 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