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. Choose the comparison scope:
Full Page: 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.
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 reference image against a Viewport screenshot: the system recognizes the viewport as a section of the full page and only flags differences inside the overlapping region.
6. Execute your Test Case: Click "Execute" and wait for the visual compare step to run.
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 Viewport mode to validate a specific section (header, pricing card, modal) without the full-page context.