You can add a Visual compare step to detect visual regressions by comparing a screenshot of your page against a reference image you've uploaded.
Step-by-Step Guide
1. Navigate to Your Test Case: Open the test case where you want to add the visual check.
2. Create a New Step: Click the "Add a new step" button, or ask the chat to add one.
3. Choose the Visual Compare step type: From the "Step description" dropdown, select "Visual Compare".
4. Upload your reference image: Drop or browse to select the screenshot you want Thunders to compare against. This is the "expected" image.
5. Add AI Instructions (optional): In the AI Instructions field, describe in plain language what the comparison should focus on and what it should ignore — for example "Check the header and nav bar; ignore the timestamp." Leave it empty to compare the whole image against the reference (the default behavior). The field accepts up to 1,000 characters, and you can edit it later and re-run the step.
6. Choose the comparison scope:
Full Page Audit: Thunders captures a screenshot of the entire scrollable page and compares it with your reference. Use this when the difference you care about can appear anywhere on the page, including below the fold.
Visible Viewport: Thunders only captures the visible portion of the browser window. Use this when you only want to check what's on screen.
Thunders also supports comparing a Full Page Audit reference image against a Visible Viewport screenshot: the system recognizes the viewport as a section of the full page and only flags differences inside the overlapping region.
7. Execute your Test Case: Click "Execute" and wait for the visual compare step to run.
Guiding the comparison with AI Instructions
The AI Instructions field lets you tell the comparison what matters, in your own words, so it reports the differences you care about instead of flagging every pixel that changed. It's optional (up to 1,000 characters) and you can edit it at any time.
Focus on one area — "Verify the login form layout, fields, and button match the design." Only that area is evaluated; differences elsewhere are ignored.
Ignore dynamic content — "Ignore timestamps, user avatars, and any changing numbers in the dashboard cards." Those regions aren't flagged; everything else is compared. This is the best way to stop dynamic data from causing false mismatches.
Combine focus and ignore — "Check the navigation bar and header. Ignore the marketing banner."
Compare intentionally different screens — "This is a redesign; the layout will look different from the old version. Confirm the new design is in place." If you leave AI Instructions empty and your reference looks like a completely different screen from the live page, the step reports a full mismatch and prompts you to check the reference image — telling it the difference is expected keeps the comparison meaningful.
Tip: The more specific your instructions, the more focused the result. Vague guidance such as "make sure it looks good" falls back toward a full comparison.
Reading the Comparison Result
When a Visual compare step finishes, the result is one of the two below.
Match: The two screenshots are visually equivalent. The step passes with no bug report.
Mismatch: Thunders detected visual differences between the reference and the actual screenshot. You'll see one bug report per region that differs, with:
A title describing what changed (for example: "The login button color changed from blue to red")
An Expected field describing what the reference image shows in that region
An Actual field describing what the live page shows
A diff image cropped to the differing region so you can see exactly where and what changed
Severity: Critical
This lets you go straight from the run report to the specific visual bug without scrolling through a full-page diff.
Common Use Cases
Visual regression testing: Validate that a page's layout and styling haven't changed unexpectedly after a deploy.
Cross-environment checks: Compare a staging page against a production reference to catch environment-specific rendering issues.
Targeted UI checks: Use Visible Viewport mode to validate a specific section (header, pricing card, modal) without the full-page context.