Content rules
Normalize dynamic content to reduce false positives in visual tests.
Web pages often contain dynamic content — dates, user names, live counters, ads — that changes between captures. Content rules tell VisualQ to normalize these elements so they don't trigger false visual differences.
How content rules work
A content rule targets a CSS selector and specifies what type of normalization to apply. Before the screenshot is taken, VisualQ replaces the targeted content with a stable placeholder.
Creating a content rule
From the scenario edit page, scroll to the Content Rules section and click Add rule.
Each content rule has:
| Field | Description |
|---|---|
| Selector | CSS selector targeting the element(s) to normalize |
| Normalize | Type of normalization to apply |
| Reason | Optional note explaining why this rule exists |
You can use the Pick element button to visually select an element on the page, and the Test button to verify the selector matches the expected elements before saving.
Content rules apply to all viewports (viewport: 'all').
Normalization types
| Type | What it does |
|---|---|
text | Replaces text content with a stable placeholder |
images | Replaces image sources with a neutral placeholder |
all-content | Replaces both text and images within the element |
Examples
Normalize a date display
Selector: .post-date
Normalize: text
Reason: Publication date changes dailyHide rotating ads
Selector: .ad-banner
Normalize: all-content
Reason: Ad content is different on every page loadStabilize user avatars
Selector: .avatar img
Normalize: images
Reason: Random Gravatar fallback imagesNormalized vs. raw images
When content rules are applied, VisualQ generates two versions of each screenshot:
- Normalized — with content rules applied (used for comparison)
- Raw — the original screenshot without modifications
In the Diff Viewer, press r to toggle between normalized and raw views.
The AI Coach can automatically suggest content rules based on your page structure. See Rule suggestions.