ui-debug-workflow

You can capture UI debugging evidence by running shell scripts that automate Playwright to collect baseline and changed screenshots, DOM snapshots, and logs under identical conditions. This generates comparable artifacts for visual regression analysis.

Visual regression testing identifies unintended UI changes by comparing baseline and updated browser artifacts. This workflow captures screenshots and DOM states, then generates a comparison report highlighting differences to document frontend bugs.

You compare DOM snapshots and screenshots by executing the debug workflow against a baseline branch like 'main' and a target branch like 'fix/my-branch' at a local URL. The Skill outputs a comparison report highlighting the visual differences.

Yes, Playwright and shell scripting are required dependencies to execute this visual regression workflow. The Skill relies on Playwright's browser automation capabilities to capture the baseline and changed code states for artifact comparison.

Yes, you can verify a frontend fix by capturing before-and-after screenshots and DOM states automatically. The workflow compares these artifacts to confirm the fix while identifying any newly introduced visual regressions.

Automating evidence collection for frontend testing is best handled by running repeatable Playwright scripts that capture screenshots and logs under identical conditions. This ensures reproducible artifacts for reliable visual regression identification.