Visual Regression Test
Screenshot pages before and after changes to detect visual differences
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
Navigate to each target page in the baseline environment and capture screenshots
๐ฏ Navigate PageTake baseline screenshots of each page at specified viewport sizes
๐ท Take ScreenshotNavigate to the same pages in the updated environment for comparison
๐ฏ Navigate PageTake post-change screenshots and compare against the baseline captures
๐ท Take ScreenshotCreate GitHub issues for any detected visual regressions with screenshot evidence
โ Create IssueTools Used
Create Issue
Create a new issue in a GitHub repository with title, body, labels, and assignees
Navigate Page
Navigate to a URL and extract the page content as text or HTML
Take Screenshot
Navigate to a URL and capture a screenshot of the rendered page
Structured Reasoning
Break down a complex problem into sequential reasoning steps with explicit chain-of-thought