Pixel Perfect - Visual Regression Testing

Built-in screenshot comparison with customizable thresholds and diff generation.

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

test('pixel perfect - position zone', async ({ page }) => {
  await page.goto('https://www.passthenote.com/practice-challenges/pixel-perfect');
  
  // Take screenshot of specific zone
  const positionZone = page.locator('[data-testid="position-zone"]');
  await expect(positionZone).toHaveScreenshot('position-zone.png', {
    maxDiffPixels: 100,        // Allow max 100 pixels difference
    threshold: 0.2,            // 20% threshold for color differences
  });
});

test('pixel perfect - full page', async ({ page }) => {
  await page.goto('https://www.passthenote.com/practice-challenges/pixel-perfect');
  
  // Full page screenshot with mask for dynamic elements
  await expect(page).toHaveScreenshot('full-page.png', {
    mask: [page.locator('[data-testid="variable-text"]')],
    fullPage: true,
  });
});

test('pixel perfect - ignore regions', async ({ page }) => {
  await page.goto('https://www.passthenote.com/practice-challenges/pixel-perfect');
  
  // Screenshot with specific regions ignored
  await expect(page).toHaveScreenshot({
    mask: [
      page.locator('[data-testid="shifting-button"]'),
      page.locator('[data-testid="variable-icon"]'),
    ],
  });
});

Cloud-based visual testing with cross-browser support and smart diffing.

const percySnapshot = require('@percy/playwright');

test('percy visual test', async ({ page }) => {
  await page.goto('https://www.passthenote.com/practice-challenges/pixel-perfect');
  
  // Basic snapshot
  await percySnapshot(page, 'Pixel Perfect Page');
  
  // Snapshot with options
  await percySnapshot(page, 'Pixel Perfect - Desktop', {
    widths: [1280, 1920],
    minHeight: 1024,
    percyCSS: '.dynamic-element { display: none; }', // Hide dynamic elements
  });
  
  // Snapshot specific element
  await percySnapshot(page, 'Position Zone', {
    scope: '[data-testid="position-zone"]',
  });
});

// Configure Percy thresholds in percy.yaml:
/*
version: 2
static:
  include: "**/*.html"
discovery:
  allowed-hostnames:
    - www.passthenote.com
snapshot:
  widths:
    - 375
    - 1280
  min-height: 1024
  percy-css: |
    .ignore-me { opacity: 0 !important; }
*/

AI-powered visual testing with intelligent diff detection and maintenance reduction.

const { Eyes, Target, MatchLevel } = require('@applitools/eyes-playwright');

let eyes;

test.beforeEach(async () => {
  eyes = new Eyes();
  eyes.setApiKey(process.env.APPLITOOLS_API_KEY);
});

test('applitools pixel perfect', async ({ page }) => {
  await page.goto('https://www.passthenote.com/practice-challenges/pixel-perfect');
  
  // Open eyes
  await eyes.open(page, 'PassTheNote', 'Pixel Perfect Test');
  
  // Full page check with strict level
  await eyes.check('Full Page - Strict', 
    Target.window()
      .fully()
      .matchLevel(MatchLevel.Strict)
  );
  
  // Region check with layout level
  await eyes.check('Position Zone - Layout',
    Target.region('[data-testid="position-zone"]')
      .matchLevel(MatchLevel.Layout)  // Ignores colors, focuses on layout
  );
  
  // Check with ignore regions
  await eyes.check('Complex Zone',
    Target.window()
      .ignore('[data-testid="variable-text"]')
      .floating('[data-testid="shifting-button"]', 10, 10, 10, 10) // Allow 10px movement
  );
  
  await eyes.close();
});

test.afterEach(async () => {
  await eyes.abort();
});

Integrate visual testing into Cypress with Percy or Applitools plugins.

// cypress/e2e/pixel-perfect.cy.js
describe('Pixel Perfect Visual Tests', () => {
  beforeEach(() => {
    cy.visit('https://www.passthenote.com/practice-challenges/pixel-perfect');
  });

  it('captures full page snapshot', () => {
    // Percy snapshot
    cy.percySnapshot('Pixel Perfect - Full Page', {
      widths: [768, 1280, 1920],
    });
  });

  it('captures specific zones', () => {
    // Snapshot individual test zones
    cy.get('[data-testid="position-zone"]').percySnapshot('Position Zone');
    cy.get('[data-testid="color-zone"]').percySnapshot('Color Zone');
    cy.get('[data-testid="icon-zone"]').percySnapshot('Icon Zone');
  });

  it('visual test with element hiding', () => {
    // Hide dynamic timestamp before snapshot
    cy.get('.timestamp').invoke('hide');
    cy.percySnapshot('Static Content Only');
  });

  // Applitools integration
  it('applitools visual check', () => {
    cy.eyesOpen({
      appName: 'PassTheNote',
      testName: 'Pixel Perfect Test',
    });
    
    cy.eyesCheckWindow({
      tag: 'Full Page',
      target: 'window',
      fully: true,
      matchLevel: 'Strict',
    });
    
    cy.eyesClose();
  });
});