AI-Powered Visual Regression

Functional tests catch broken links, but they don't catch broken layouts. A "Checkout" button might be clickable, but if it's hidden behind a broken CSS header, your users are stuck. supaguard combines Playwright Screenshots with our Reviewer AI to provide comprehensive visual reliability.

The Visual "Silent Failure"

A silent failure occurs when the code is technically "correct" (the element exists in the DOM) but the user experience is broken.

• Example: A modal popup covers the entire screen but has an invisible "Close" button.
• Example: Your site's primary font fails to load, defaulting to a broken layout.

How supaguard Solves This

1. The Reviewer AI

Unlike traditional visual testing tools that alert you for every pixel change (font rendering, anti-aliasing), supaguard's Reviewer AI understands context.

• It ignores dynamic content (like timestamps or random ads).
• It focuses on Intent-Blocking Glitches—elements that are overlapping, off-screen, or low-contrast.

2. Manual Visual Assertions

You can add manual screenshot assertions to your scripts for pixel-perfect critical areas (like your logo or pricing table).

import { test, expect } from '@playwright/test';

test('pricing table visual test', async ({ page }) => {
  await page.goto('/pricing');
  
  // Take a screenshot of just the pricing card
  const pricingCard = page.getByTestId('starter-plan-card');
  
  // supaguard compares this to the 'Golden Baseline' automatically
  await expect(pricingCard).toHaveScreenshot('starter-plan.png', {
    maxDiffPixelRatio: 0.05 // Allow 5% variance for dynamic text
  });
});

Best Practices

• Use for "Static" Components: Visual regression is best for headers, footers, and landing page sections.
• Ignore Dynamic Regions: Use the mask option to hide charts or real-time data from the visual check.
• Cross-Browser Verification: Ensure your layout holds up on WebKit (Safari) just as well as Chromium.

UI/UX Reliability

• Monitoring Modern SPAs
• Resilient Locators
• Monitoring Mobile Experiences