Cypress Visual Regression Testing Suite
Automates pixel-level visual regression testing using Cypress with cypress-image-snapshot plugin. Compares screenshots against baselines using pixelmatch algorithm with configurable diff thresholds.
npx skills add agentskillexchange/skills --skill cypress-visual-regression-testing-suite
The Cypress Visual Regression Testing Suite enables automated visual comparison testing for web applications using the cypress-image-snapshot plugin built on jest-image-snapshot. It captures full-page and element-level screenshots during Cypress test runs and compares them against stored baseline images.
What this skill actually does
Image comparison uses the pixelmatch algorithm with configurable threshold sensitivity, anti-aliasing detection, and alpha channel handling. Failed comparisons generate three-panel diff images showing the baseline, actual screenshot, and pixel-level difference map with highlighted regions.
The skill supports responsive testing across multiple viewport configurations, dynamic content masking (clipping regions, element hiding via CSS injection), and animation stabilization through Cypress clock control and network idle detection. Baseline management includes automatic update workflows, branch-specific baseline directories, and cleanup of orphaned snapshots.
CI integration provides GitHub Actions and GitLab CI configurations with artifact upload for diff images, Slack notifications for visual regressions via incoming webhooks, and dashboard reporting through cypress-dashboard-api. Parallel execution support uses Cypress sharding with Sorry-cypress for self-hosted orchestration.