Smart Match Algorithm

Four smart checks.
One clear answer.

Each check removes the noise. Only real problems get through.

Try It Now Read the Docs
The Algorithm

How we achieve
<5% false positives.

Instead of comparing every dot on the screen, we compare what actually matters.

Layer 01
DOM Structure
Checks if the page structure changed at all. If nothing moved, we're done — no need to look further.
Exits 60–70% of tests instantly
Layer 02
Layout Position
Checks if buttons, menus, or images shifted too much. A tiny move is fine. A big jump is not.
Configurable pixel tolerance per project
Layer 03
Perceptual Diff
Compares how the page looks to a human eye. Ignores tiny differences like timestamps or ad changes.
Understands visual meaning, not just pixels
Layer 04
AI Counselor
For tricky cases, our AI looks at the difference and explains in plain English what went wrong and how sure it is.
"Button shifted 18px — CSS regression"
Decision Flow

Fast path for no change,
smart analysis for real diffs.

Most tests don't need full analysis. We skip the extra work whenever we can.

smart-match-flow.js
function analyzeVisual(baseline, candidate) {
  // Layer 1: DOM fingerprint
  if (baseline.domFingerprint === candidate.domFingerprint) {
    return { status: 'PASS', layer: 1, reason: 'DOM identical' };
  }
 
  // Layer 2: Layout comparison
  const layoutDiff = compareLayout(baseline, candidate);
  if (layoutDiff.withinTolerance) {
    return { status: 'PASS', layer: 2, reason: 'Layout within tolerance' };
  }
 
  // Layer 3: Perceptual diff
  const ssimScore = calculateSSIM(baseline, candidate);
  if (ssimScore > 0.98) {
    return { status: 'PASS', layer: 3, reason: 'Perceptual similarity high' };
  }
 
  // Layer 4: AI analysis
  const verdict = await aiCounselor(baseline, candidate);
  return { status: verdict.status, layer: 4, reason: verdict.explanation };
}
Real Example

What we catch
vs what we ignore.

See how our layers filter out noise while catching real visual bugs.

Layer 1 Exit — DOM Fingerprint
Baseline
Last updated: 2024-01-15 10:23:45
User Profile
john@example.com
Candidate
Last updated: 2024-01-15 14:47:22
User Profile
john@example.com
Result
✓ PASS — Layer 1
DOM structure identical (same elements, same attributes). Only text content changed.
Analysis time: 0.3s
Layer 4 Fail — AI Analysis
Baseline
Submit Button
Candidate
Submit Button
AI Verdict
● FAIL — Layer 4 "Button background color changed from cyan to dark navy, reducing contrast and visibility. This appears to be a CSS regression affecting accessibility." Confidence: 0.94 · 2.1s analysis
Layer 3 Pass — Perceptual Filter
Baseline
Ad Banner - Product A
Candidate
Ad Banner - Product B
Result
✓ PASS — Layer 3
SSIM score: 0.983. Only ad content changed (dynamic content). Page structure and layout unchanged.
Analysis time: 1.2s
Ready to try?

Stop drowning in
false positives.

See the difference a smarter approach makes. Free during beta.

Start Free Trial → Back to Home