Comparison rules

While content rules normalize content before capture, comparison rules control how regions are compared after capture. They let you apply different comparison strategies to different parts of the page.

Comparison modes

Each comparison rule specifies a mode that determines how the selected region is handled:

Mode	Description
`full`	Pixel-perfect comparison (strictest)
`layout_only`	Compares structure and layout, ignoring small content changes
`ignore`	Completely skip this region during comparison
`dynamic`	Expect this region to change — only flag structural shifts

Rule fields

Field	Description
Selector	CSS selector targeting the region
Mode	Comparison mode (see table above) — click the mode badge to cycle through modes
Label	Optional semantic label for the rule
Reason	Optional note explaining the rule
Propagate	Apply the rule to child elements as well (shown as +children badge)

The following fields are available on the data model but not currently editable from the UI: match strategy (exact or contains), layout tolerance, and per-region threshold.

Examples

Selector: #chat-widget
Mode: ignore
Reason: Chat widget state varies between captures

Layout-only for a news feed

Selector: .news-feed
Mode: layout_only
Layout tolerance: 5px
Reason: Content updates frequently but layout should remain stable

Strict comparison for branding

Selector: .brand-header
Mode: full
Reason: Logo and brand elements must never change

Who creates comparison rules?

Comparison rules can be created by:

You — manually from the scenario edit page
AI Coach — suggested automatically based on page analysis Pro plan

Rules created by the Coach are tagged with createdBy: 'coach' so you can tell them apart.