You can add a Visual compare step to detect visual regressions by comparing a screenshot of your page against a reference image: an image from the Test Assets of the project, or a file that an earlier step downloaded.
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 Thunders AI to add one.
3. Choose the Visual Compare step type: From the "Step type" dropdown, select "Visual Compare".
4. Choose your reference image: In the Image to compare field, click the paperclip (Attach a file) to select an image from the Test Assets of the project, or to upload a new one. This is the "expected" image. The supported formats are JPG, JPEG, GIF, BMP and PNG, and the image must be under 10 megapixels. You can also type the variable of a file that an earlier step downloaded, for example [DOWNLOADED_FILE_1].
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: High
This lets you go straight from the run report to the specific visual bug without scrolling through a full-page diff.
Overview and Focus: When the step finds differences, the result panel of the run has two views.
Overview shows the reference image and the actual page side by side, with a numbered box on each difference.
Focus shows each difference cropped at full size, with its number and its title. Use it to read a small difference.
Click a numbered box in Overview to open that difference in Focus. When you select one difference in the step list, Focus shows only that difference. Above the images, the panel also shows the AI Instructions that the step used, and the summary of the comparison when there is one.
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.