skills.rest
cedricziel
cedriczielCOMMUNITY
Explore all skills by this author →
Website𝕏@cedriczielGitHub

e2e-testing

Compare Playwright UI renders against committed baselines to detect visual regressions.

6|1|Updated Feb 21, 2026
Search Tags:#e2e#diff#playwright#ui-testing#ci#visual-regression#baselines
One-click install
npx skills add https://github.com/cedricziel/assistant --skill e2e-testing-cedricziel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e2e-testing
Source: https://github.com/cedricziel/assistant/tree/main/.claude/skills/e2e-testing
Command: npx skills add https://github.com/cedricziel/assistant --skill e2e-testing-cedricziel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Playwright visual regression testing captures UI renderings and compares them against baselines to detect unintended visual changes, ensuring UI stability across updates.

Core Features & Use Cases

  • Screenshot-based regression checks across desktop, tablet, and mobile viewports.
  • Baseline management to commit and track approved UI appearances over time.
  • CI integration to automatically run tests and report diffs with inline highlights for quick reviews.

Quick Start

Run the Playwright visual regression tests in the e2e directory to validate current UI against baselines.

Frequently Asked Questions about e2e-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does Playwright visual regression testing detect UI changes across different viewports?▼

Playwright visual regression testing detects UI changes by capturing current screenshots across desktop, tablet, and mobile viewports, then automatically comparing them against committed baselines to identify unintended layout, style, and component differences.

What is baseline management for UI testing and how do I update it?▼

Baseline management for UI testing involves committing and tracking approved UI appearances over time. You update baselines by replacing the committed reference screenshots in the e2e directory after validating visual changes during manual QA or CI checks.

How do I run Playwright visual regression tests in CI to prevent unintended style changes?▼

You run Playwright visual regression tests in CI by executing the test suite in the e2e directory, which automatically compares current renders to baselines and reports visual diffs with inline highlights for quick review.

Can I use Playwright visual regression checks for both CI automation and manual QA?▼

Playwright visual regression checks support both CI-driven automated regression testing and manual QA workflows. You can run the e2e tests locally to validate current UI against baselines or integrate them into CI pipelines for automated diff reporting.

What is the best way to review visual diffs when Playwright UI regression tests fail?▼

The best way to review visual diffs from failed Playwright UI regression tests is using the inline diff reporting, which highlights specific layout, style, and component changes across multi-viewport screenshots for quick review and baseline updates.

Related Skills

Explore More Software Engineering Skills→
tneztnez

bootstrap

Initialize the .docent directory structure and configuration for new projects.

Community
Basic
kobogithubkobogithub

uiux-pixelmatch

Compare PNG screenshots against design exports using pixelmatch for visual regression testing.

Community
Advanced
TurnaboutHeroTurnaboutHero
12

playwright-master

Automate browser testing and web scraping with Playwright across Chromium, Firefox, and WebKit.

Community
Intermediate
Camilo8902Camilo8902

visual-regression-tester

Automate visual regression testing with Playwright and Chromatic screenshot comparisons.

Community
Advanced