Skip to main content
command

setup-visual-testing — Claude Code command: visual regression setup

A slash command that wires up visual regression testing: component and page snapshots, responsive breakpoints, accessibility checks.

Install into Claude Code · claude-code-templates All methods and platforms ↓
npx claude-code-templates@latest --command testing/setup-visual-testing
Open on GitHub

What setup-visual-testing does

setup-visual-testing walks the agent through a visual testing setup. It first inspects the project: frontend framework, component layout, any Cypress, Playwright or Storybook traces, and the CI config. Then it picks a tool — Percy, Chromatic, BackstopJS or Playwright — and configures the integration.

From there the work splits into blocks: capture baselines and organise screenshots under version control, write scenarios for components and pages, define responsive breakpoints and a browser matrix, hook the run into CI with a review step. Diff thresholds and comparison algorithms get their own pass, which is where false positives are kept down. Accessibility checks and cross-browser validation sit alongside.

Scope comes from an argument: --components, --pages, --responsive, --cross-browser or --accessibility. With no argument the command covers the general case. Hosted tools like Percy and Chromatic need access to their service, so have tokens ready before you start — otherwise the baseline step stalls on auth.

What it helps with

  • set up visual regression testing from scratch
  • capture UI baselines and keep them under version control
  • run the same pages across several browsers
  • check layout at different viewport widths
  • add accessibility checks to visual tests

Example prompts for the agent

  • set up visual testing for components: /setup-visual-testing --components
  • run visual tests across breakpoints: /setup-visual-testing --responsive
  • add accessibility checks to visual tests: /setup-visual-testing --accessibility

How to install setup-visual-testing

1claude-code-templates

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

2Manually: put the files in place

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

Call it with /setup-visual-testing. For all projects use ~/.claude/commands/

Questions about setup-visual-testing

How do I install setup-visual-testing in Claude?

Run npx claude-code-templates@latest --command testing/setup-visual-testing, then confirm the file landed at .claude/commands/setup-visual-testing.md.

What does setup-visual-testing do?

It sets up visual regression testing: tool selection, baselines, component and page scenarios, CI integration and diff thresholds.

What arguments does the command take?

Scope is set with --components, --pages, --responsive, --cross-browser or --accessibility; you can also pass a general scope with no flag.

Source text

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

Similar slash commands

Everything for Testing and QA →

From the same set205

The whole set →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor