← Back to Skills
๐Ÿ–ผ๏ธ

Visual Regression Test

Screenshot pages before and after changes to detect visual differences

Developer 5 steps 4 tools 3 servers

Example Prompt

Take screenshots of our homepage and dashboard before and after the latest changes to check for visual regressions

About

Captures screenshots of specified web pages in a baseline state and again after code changes are applied. Compares the two sets of screenshots to identify visual regressions, then reports any detected differences with annotated details.

Workflow Steps

1

Navigate to each target page in the baseline environment and capture screenshots

๐ŸŽฏ Navigate Page
2

Take baseline screenshots of each page at specified viewport sizes

๐Ÿ“ท Take Screenshot
3

Navigate to the same pages in the updated environment for comparison

๐ŸŽฏ Navigate Page
4

Take post-change screenshots and compare against the baseline captures

๐Ÿ“ท Take Screenshot
5

Create GitHub issues for any detected visual regressions with screenshot evidence

โž• Create Issue

Tags

visual-testingscreenshotsregressionqa