Backstopjs visual

Skill a5c-ai/babysitter/library/specializations/qa-testing-automation/skills/backstopjs-visual

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill backstopjs-visual

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

BackstopJS visual regression testing for self-hosted visual comparison

SKILL.md

2.1 KB, as published. Nobody here has run it

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