visual-snapshot-check

Playwright visual regression testing automates full-page screenshot capture and compares current captures against predefined baseline images to detect UI changes. This skill executes those Playwright baseline checks to validate UI integrity and prevent unintended visual regressions in Maud views and CSS.

UI visual regression testing is the process of comparing current webpage screenshots against established baselines to detect unintended visual changes. You need it after updating CSS or Maud components to verify that your UI still looks as expected and no visual bugs have been introduced.

To update screenshot baselines for intentional visual changes, run the skill with the VISUAL_UPDATE_BASELINE environment variable set to 1. This automated baseline refreshing process replaces established baseline images with your newly captured Playwright screenshots.

Yes, visual snapshot check specifically supports Maud views and CSS components by validating UI integrity through full-page screenshot comparisons. It detects visual and UI changes in your front-end styling to ensure consistency across updates.

The best way to detect CSS regressions is to run automated Playwright full-page screenshot captures and compare them against predefined baseline images. This approach validates visual consistency by identifying unintended UI differences introduced during component updates.

Visual regression tests fail after updating frontend styling because the newly captured screenshots differ from the established baseline images. If the visual changes to your CSS or Maud views are intentional, refresh the baselines using VISUAL_UPDATE_BASELINE=1.