Visual Monitor User Guide

1. Executive Summary

The Visual Monitor is an automated Quality Assurance engine powered by a headless browser (Cloudflare Browser Rendering / Puppeteer). It is responsible for dynamically visiting live or preview landing pages to ensure they render correctly, function as expected, and match the design briefs pixel-for-pixel.

2. Dynamic Visual Testing

Unlike static HTML parsers, the Visual Monitor actually "sees" the page exactly as a customer would.

• Headless Navigation: It boots up a headless Chrome instance and navigates to the target URL, executing all JavaScript and rendering the full DOM.
• Visual Assertions: It takes screenshots of specific sections and compares them against baselines to ensure no CSS breaks or visual regressions have occurred.

3. Automated Pixel and Link Checking

The Visual Monitor automates the most tedious parts of QA:

• Pixel Validation: It executes scripts on the page to verify that marketing pixels (like Meta or TikTok) are firing correctly and capturing the right data payloads upon page load.
• Multi-link Checkout Validation: It scans the page for all Call-to-Action (CTA) buttons, extracts their destination URLs, and cross-references them against the expected checkout links defined by the Growth team in Trello, ensuring no dead links are pushed live.

4. Daily Regression Engine

While initially utilized by the Nudger module during the pre-launch phase, the Visual Monitor's true power lies in its long-term application:

• Once a project graduates to the Aegis Admin, the Visual Monitor runs daily scheduled tasks (Cron triggers).
• It visits every active live page to guarantee that third-party theme updates haven't stripped out crucial data-tracked="true" GA tags or broken the layout.
• If it detects a failure, it immediately fires a Slack alert, providing visual evidence of what broke overnight.