ReddRadar
Agent skill
BackstopJS Visual Testing
BackstopJS visual regression testing for self-hosted visual comparison
Install this agent skill to your Project
npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/qa-testing-automation/skills/backstopjs-visual
SKILL.md
BackstopJS Visual Testing Skill
Overview
This skill provides expert-level capabilities for BackstopJS-based visual regression testing, enabling self-hosted visual comparison without external dependencies.
Capabilities
Scenario Configuration
- Configure BackstopJS scenarios
- Define viewport configurations
- Set up selectors for capture
- Configure scenario-specific settings
Reference Management
- Execute reference runs
- Update reference images
- Handle reference versioning
Visual Comparison
- Execute test runs against references
- Analyze visual diff reports
- Configure diff thresholds
Interaction Handling
- Configure click and hover interactions
- Handle scroll positions
- Implement wait conditions
- Execute custom scripts before capture
Report Generation
- Generate HTML comparison reports
- CI-friendly report formats
- History tracking
Engine Configuration
- Configure Puppeteer engine settings
- Chrome launch options
- Network request handling
Target Processes
visual-regression.js- Visual regression testinge2e-test-suite.js- E2E with visual validation
Dependencies
backstopjs- Visual regression tool- Puppeteer (bundled)
- Docker (optional, for consistent rendering)
Usage Example
{
kind: 'skill',
skill: {
name: 'backstopjs-visual',
context: {
action: 'test',
configPath: 'backstop.json',
scenarios: ['homepage', 'dashboard'],
viewports: ['phone', 'tablet', 'desktop']
}
}
}
Configuration
The skill uses backstop.json for configuration and supports Docker-based execution for consistent results.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
a5c-ai/babysitter
gsd-tools
Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).
a5c-ai/babysitter
model-profile-resolution
Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.
a5c-ai/babysitter
verification-suite
Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.
a5c-ai/babysitter
state-management
STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.
a5c-ai/babysitter
git-integration
Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.
a5c-ai/babysitter
frontmatter-parsing
YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.
Didn't find tool you were looking for?