I’ll be honest: we’re building our own automated QA system for checking website pages (structure, styling, visual consistency) and I suspect we’re reinventing the wheel badly. Our current wheel is square, not round. I’m looking for the established methods and standards we should be using instead.

What we’re doing now

We run a content website and need to verify every page meets our quality bar before it goes live. Right now we have:

  1. HTML structure checks — Python scripts that parse pages and verify things like: single H1, correct meta tags, valid JSON-LD schema, no duplicate content blocks, favicon loads, etc.
  2. CSS presence checks — verifying that pages load the stylesheets they need (we caught a bug where a page was missing a stylesheet and a UI strip rendered unstyled).
  3. Golden-master section comparison — our newest approach: extract fixed page sections (nav bar, hero, footer) from a reference "ideal" page, then do 100% similarity comparison of HTML + CSS rules against every other page. Any deviation fails.

Our setup (context that matters)

One detail that shapes what we need: this is a two-AI workflow. One AI acts as controller/manager — it writes the checks, reviews results, and decides what passes. The other AI is the execution lane — it builds the pages and fixes what the checks flag.

So the checks aren’t just for humans to read. They’re the contract between the two AIs: the builder AI must satisfy them before handing off, and the manager AI runs them to verify. That means:

  • Checks must be deterministic and scriptable — no "looks good to me" judgment calls in the automated layer.
  • Every check needs a clear pass/fail — the builder can’t fix what it can’t measure.
  • The checks also enforce branded page rules: typography, color tokens, layout constraints, and content rules specific to our brand. It’s not generic QA — it’s "does this page follow our brand system."
  • On-page SEO checks are part of the same pipeline (meta, schema, headings, internal links).

This is why we’re interested in methods that produce machine-readable verdicts, not just visual diffs for a human to eyeball. Screenshot comparison tools that need a human to approve diffs don’t fit — we need the check itself to say pass or fail.

Where we’re stuck

The visual layer. Our scripts read HTML source, but they can’t see the rendered page. We’ve been bitten by:

  • A nav menu item wrapping to two lines (CSS issue, invisible in HTML)
  • A tagline rendering dark-on-white instead of gold-on-dark (missing stylesheet)
  • Hero sections bleeding full-width instead of contained cards
  • Mobile UX issues (sliders at top, results below the fold — user gets no feedback)

These are all things a human spots in 2 seconds by looking at the page, but our scripts miss completely.

Concrete examples (live pages)

Our reference "golden" page — the one everything is compared against:
https://chickenroadproductions.com/chicken-road/

Pages currently failing our checks on staging:

1. Unstyled tagline strip
https://crp-preview.pages.dev/outils/simulateur-rtp/
The page contains <div class="site-tagline-strip"> in its HTML but never loads the site-tagline.css stylesheet. Result: the tagline renders as dark text on a white strip instead of gold text on a dark strip. Our check (B.tagline-styled) catches this by verifying the stylesheet link exists when the strip div is present. One missing <link> tag, invisible in a casual HTML review.

2. Nav wrapping on production
https://chickenroadproductions.com/guides/
The "À propos" nav item wraps to two lines at desktop width because no white-space:nowrap rule protects the nav items. The HTML is identical to the golden page — the bug is purely in CSS. Our check (B.nav-no-wrap) fails any page whose CSS lacks nowrap protection on nav items.

3. Hero containment
Several staged pages render the hero section full-viewport-width instead of as a contained card. Again invisible in HTML structure — it’s a CSS layout issue. We’re now comparing the hero’s structural skeleton + computed CSS rules against the golden page at 100% similarity.

4. Mobile calculator UX
https://crp-preview.pages.dev/outils/simulateur-rtp/

On mobile, the sliders are at the top of the viewport and the results/charts are far below. The user drags a slider and sees nothing change — zero feedback. Our check (E.calc-mobile-feedback) requires a sticky/fixed live-results element on any page with range sliders.

What I’m asking

What are the established methods for non-human visual QA?

Specifically:

  • Is there a standard approach for automated visual regression testing that doesn’t require maintaining screenshot baselines for every page? (We have 100+ pages.)
  • Are there tools that can verify rendered layout properties (element positions, wrapping, colors) programmatically without full screenshot comparison?
  • How do teams handle the "fixed chrome" problem — verifying that headers/footers/nav are identical across pages without checking every page manually?
  • Is DOM+CSS comparison (our golden-master approach) a known pattern, or is there something better?
  • Any open-source tools you’d recommend for this specific use case?

We’re a small team, so enterprise visual testing platforms are probably out of budget. Looking for practical, scriptable approaches.

Thanks in advance — happy to share what we’ve built if it’s useful to anyone.