Thresholds
Configure how much visual difference is acceptable before a test fails.
The mismatch threshold controls how sensitive VisualQ is to visual changes. It's expressed as a percentage of pixel difference.
How thresholds work
After comparing the test screenshot against the baseline, VisualQ calculates the percentage of pixels that differ. If this percentage exceeds the threshold, the scenario fails.
| Threshold | Sensitivity | Use case |
|---|---|---|
| 0% | Maximum | Pixel-perfect layouts, design systems |
| 0.1% (default) | High | Most web pages |
| 0.5% | Medium | Pages with minor rendering variations |
| 1%+ | Low | Pages with acceptable variability |
Setting the threshold
Per scenario
Each scenario has its own threshold field. From the scenario edit page, set the Mismatch threshold value.
Per region (comparison rules)
Comparison rules can override the scenario threshold for specific page regions. This lets you be strict on critical areas (like your logo) while being lenient on dynamic sections.
Same dimensions check
The Require same dimensions option controls whether VisualQ should fail if the test screenshot has different dimensions than the baseline.
This catches:
- Layout shifts that change page height
- Responsive breakpoint changes
- Missing or extra content sections
A scenario with requireSameDimensions: true will fail if the page height changes, even if the pixel content is identical up to the original height.
Tips
- Start with the default threshold (0.1%) and adjust as needed
- If you get too many false positives, consider adding content rules rather than increasing the threshold
- Use comparison rules to set different thresholds for different page regions