BackstopJS Visual Testing

SkillDev tools

BackstopJS visual regression testing for self-hosted visual comparison

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the BackstopJS Visual Testing skill

What this skill tells your AI

The instructions your AI receives, as published by a5c-ai/babysitter in library/specializations/qa-testing-automation/skills/backstopjs-visual/SKILL.md and read by ahel’s review.

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 testing
e2e-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.

Signals

GitHub stars: 2k
Forks: 112
Last commit: Sep 2026

Advanced

Item type: skill
Key: backstopjs-visual-testing
Source: github.com/a5c-ai/babysitter

github.com/a5c-ai/babysitter