Visual regression setup

Skill a5c-ai/babysitter/library/specializations/desktop-development/skills/visual-regression-setup

Configure visual regression testing with Percy, Chromatic, or custom screenshot comparisonFrom its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill visual-regression-setup

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

SKILL.md

2.0 KB, 354 tokens by cl100k_base, as published. Nobody here has run it

visual-regression-setup

Configure visual regression testing for desktop applications to catch unintended UI changes.

Capabilities

Configure Percy integration
Set up Chromatic for Storybook
Custom screenshot comparison
Configure threshold settings
Handle dynamic content masking
Set up CI/CD integration

Input Schema

{
  "type": "object",
  "properties": {
    "projectPath": { "type": "string" },
    "provider": { "enum": ["percy", "chromatic", "reg-suit", "custom"] },
    "framework": { "enum": ["playwright", "cypress", "puppeteer"] }
  },
  "required": ["projectPath"]
}

Percy Integration

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    screenshot: 'only-on-failure'
  }
});

// test.spec.js
import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';

test('visual test', async ({ page }) => {
  await page.goto('/');
  await percySnapshot(page, 'Home page');
});

Custom Comparison

const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });

test('matches screenshot', async () => {
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot({
    failureThreshold: 0.01,
    failureThresholdType: 'percent'
  });
});

Related Skills

playwright-electron-config
desktop-ui-testing process

What ships with it: 1 file

460 B alongside SKILL.md

README.md460 B