Advanced Visual Testing

Core Principle

Visual bugs are bugs. Test what users see.

Visual testing catches UI regressions that functional tests miss: layout shifts, color changes, font rendering, alignment issues.

Visual Regression Testing

Process:

1. Capture baseline screenshots
2. Make code changes
3. Capture new screenshots
4. Compare pixel-by-pixel
5. Flag differences for review

With Playwright:

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

test('homepage visual regression', async ({ page }) => {
  await page.goto('https://example.com');

  // Capture screenshot
  await expect(page).toHaveScreenshot('homepage.png');
  // First run: saves baseline
  // Subsequent runs: compares to baseline
});

test('responsive design on mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 }); // iPhone

  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('homepage-mobile.png');
});

Configuration:

// playwright.config.js
export default {
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 100, // Allow 100 pixel difference
      threshold: 0.2, // 20% similarity threshold
      animations: 'disabled', // Disable animations
      caret: 'hide' // Hide cursor
    }
  }
};

AI-Powered Visual Testing

Percy (BrowserStack):

import percySnapshot from '@percy/playwright';

test('homepage visual test', async ({ page }) => {
  await page.goto('https://example.com');

  // AI-powered comparison (ignores minor anti-aliasing differences)
  await percySnapshot(page, 'Homepage');
});

Cross-Browser Visual Testing

test.describe('cross-browser visual consistency', () => {
  test('Chrome vs Firefox', async ({ browser }) => {
    const chromePage = await browser.newPage();
    await chromePage.goto('https://example.com');
    const chromeScreenshot = await chromePage.screenshot();

    // Compare Chrome vs Firefox rendering
    expect(chromeScreenshot).toMatchSnapshot('chrome-homepage.png');
  });
});

Dynamic Content Handling

Mask dynamic elements:

test('ignore dynamic content', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page).toHaveScreenshot({
    mask: [
      page.locator('.timestamp'),   // Mask timestamps
      page.locator('.user-count'),  // Mask dynamic counters
      page.locator('.advertisement') // Mask ads
    ]
  });
});

With qe-visual-tester Agent

// Agent performs comprehensive visual testing
const results = await agent.visualRegressionTest({
  baseline: 'main-branch',
  current: 'feature-branch',
  pages: ['homepage', 'product', 'checkout'],
  devices: ['desktop', 'tablet', 'mobile'],
  browsers: ['chrome', 'firefox', 'safari']
});

// Returns:
// {
//   totalPages: 3,
//   totalDevices: 3,
//   totalBrowsers: 3,
//   comparisons: 27, // 3 × 3 × 3
//   differences: 2,
//   report: 'visual-regression-report.html'
// }

Remember

Functional tests don't catch visual bugs.

Visual regressions include:

• Layout shifts
• Color changes
• Font rendering
• Alignment issues
• Missing images
• Broken CSS

AI-powered tools reduce false positives.

With Agents: qe-visual-tester automates visual regression across browsers and devices, uses AI to ignore insignificant differences, and generates visual diff reports.