skills.rest
jls42
jls42COMMUNITY
Explore all skills by this author →
WebsiteGitHub

Tests de Régression Visuelle

Capture and compare UI screenshots across viewports to detect visual regressions.

1|Updated Sep 15, 2025
Search Tags:#frontend#responsive design#qa#regression testing#canvas games#playwright#visual testing#ui testing
One-click install
npx skills add https://github.com/jls42/leapmultix --skill tests-de-r-gression-visuelle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Tests de Régression Visuelle
Source: https://github.com/jls42/leapmultix/tree/main/.claude/skills/visual-regression-testing
Command: npx skills add https://github.com/jls42/leapmultix --skill tests-de-r-gression-visuelle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual bugs like misaligned elements, incorrect colors, or broken responsive layouts often go unnoticed by traditional unit tests, leading to a degraded user experience. This Skill automates visual regression testing, capturing screenshots across different viewports to detect unintended UI changes.

Core Features & Use Cases

  • Automated Screenshot Comparison: Compares current UI screenshots against baselines, highlighting pixel-level differences to ensure visual consistency.
  • Multi-Viewport Testing: Supports testing across desktop, tablet, and mobile viewports (e.g., 1920x1080, 768x1024, 375x667) for comprehensive coverage.
  • Game Canvas Validation: Specifically designed to detect visual regressions in dynamic canvas-based arcade games, ensuring game graphics remain perfect.
  • Use Case: After a CSS refactor or adding a new arcade game, activate this Skill. It will automatically take screenshots, compare them to approved baselines, and generate a report showing any visual discrepancies, ensuring your UI remains pixel-perfect across all devices.

Quick Start

1. Ensure Playwright is installed and configured.

2. Run visual tests:

npm run test:visual

3. Review the generated HTML report for visual diffs (baselines/, current/, diffs/).

4. If changes are intentional, update baselines:

npm run test:visual --update-snapshots