Level 5: Deterministic + Visual Verification

Combining computed style checks with visual screenshots for maximum coverage.

What Level 5 Tests

Level 5 combines deterministic computed style assertions with visual screenshot verification to catch bugs that all lower levels miss. This is the highest-confidence verification method for UI/CSS work.

The two complementary tools:

• verify-ui — Extracts computed CSS values from a running page and asserts exact values (no LLM interpretation)
• headless-browser — Takes screenshots for visual comparison and interaction testing

Why Both Are Needed

Computed style checks alone can miss visual issues that come from element interaction (overlapping, stacking context). Screenshots alone rely on LLM interpretation which can have confirmation bias. Together, they provide:

verify-ui Example

# Check computed styles of an element
verify-ui --url http://localhost:3000 \
  --selector ".hero-title" \
  --check "font-size: 48px" \
  --check "color: rgb(255, 255, 255)" \
  --check "display: block"

# Verify visibility
verify-ui --url http://localhost:3000 \
  --selector ".notification-banner" \
  --check "display: block" \
  --check "opacity: 1" \
  --check "visibility: visible"

The Common Failure This Catches

Consider the classic scenario:

1. An AI agent adds a notification banner component
2. Unit test confirms the component renders (Level 1 passes)
3. DOM test confirms the element is in the tree (Level 2 passes)
4. But the parent container has overflow: hidden and height: 0
5. The banner exists in the DOM but is completely invisible

Level 5 catches this:

# verify-ui would reveal:
# .notification-banner parent has height: 0px, overflow: hidden
verify-ui --url http://localhost:3000 \
  --selector ".notification-container" \
  --check "height: auto" \
  --check "overflow: visible"

And the screenshot from headless-browser would visually confirm the banner is not visible.

headless-browser for Visual Verification

# Full-page screenshot
node headless-check.js --url http://localhost:3000 --screenshot --full-page

# Screenshot of specific viewport
node headless-check.js --url http://localhost:3000 \
  --screenshot --width 375 --height 812  # iPhone viewport

Combined Workflow

For UI/CSS changes, the recommended verification workflow is:

1. Make the CSS/layout change
2. Run verify-ui to assert exact computed values
3. Take a screenshot with headless-browser to visually confirm
4. If verify-ui passes but screenshot looks wrong, investigate stacking/composition issues
5. If screenshot looks right but verify-ui fails, update the expected values

Blind Spots

Level 5 has minimal blind spots, but some remain:

• Font rendering differences across operating systems
• Sub-pixel rendering variations
• Animation timing (mid-frame states)
• Browser-specific quirks not present in the test browser

When to Use Level 5