Setup Visual Testing
Setup comprehensive visual regression testing with cross-browser and responsive testing
$ npx claude-code-templates@latest --command="testing/setup-visual-testing" --yesRequires Claude Code. The command adds this command to your project's .claudedirectory — nothing runs on ToolZip's servers.
What's inside this command
Component source
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:- Tool Selection & Setup - Choose visual testing tools (Percy, Chromatic, BackstopJS, Playwright), configure integration, setup environments
- Baseline Creation - Capture visual baselines, organize screenshot structure, implement version control, optimize image management
- Test Scenario Design - Create component tests, design page workflows, implement responsive breakpoints, configure browser matrix
- Integration Setup - Configure CI/CD integration, setup automated execution, implement review workflows, optimize performance
- Regression Detection - Configure diff algorithms, setup threshold management, implement approval workflows, optimize accuracy
- Advanced Testing - Setup accessibility testing, configure cross-browser validation, implement responsive testing, design performance monitoring
Related Claude Code Commands
Generate Tests
Generate a complete test file for a specified source file or component. Use when the user explicitly asks to write, create, or generate tests for a specific file.
Test Coverage
Analyze and improve test coverage with comprehensive reporting and gap identification
Generate Test Cases
Generate comprehensive test cases with automatic analysis and coverage optimization
E2e Setup
Configure comprehensive end-to-end testing suite with framework selection and CI integration
Write Tests
Write comprehensive unit and integration tests with proper mocking and coverage
Test Automation Orchestrator
Orchestrate comprehensive test automation with intelligent execution and optimization
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.