Getting Started
Add your first scenario
Create a scenario to define what VisualQ should capture and compare.
A scenario tells VisualQ what to capture: which page, at what viewports, and with what rules. Think of it as a test case for visual regression.
Create a scenario
Navigate to the Scenarios tab
From your project page, click the Scenarios tab in the top navigation.
Click New Scenario
Click the "+ New scenario" button. The scenario form will open.
Configure the scenario
At minimum, fill in:
- Label: a human-readable name (e.g., "Homepage", "Pricing page")
- URL: the full URL to capture (e.g.,
https://example.com/pricing). When an environment is selected, the origin portion of this URL is automatically replaced by the environment's base URL at test time. - Viewports: toggle which viewports to test — Desktop (1920×1080), Tablet (768×1024), Phone (375×667)
Save the scenario
Click Save. Your scenario appears in the scenarios list.
Optional settings
You can also configure:
- Selectors — focus the capture on a specific element (e.g.,
main,#content) - Delay — wait time in milliseconds before capture (default: 1500ms), useful for animations
- Threshold — mismatch tolerance as a percentage (default: 0.1%)
- Content rules — normalize dynamic content like dates or ads
- Click selectors — click elements before capture (e.g., close cookie banners)
- Comparison rules — fine-grained control over how regions are compared
These are covered in detail in the Scenarios section.
What happens next
Your scenario is defined but has no baseline yet. The first capture will automatically become the reference image. Let's run your first test →