Visual Regression Testing

Visual regression testing helps you catch visual bugs before they reach production by comparing screenshots of your application against baseline images.

To set up visual regression testing:

1. Install Inpera SDK in your project
2. Create baseline snapshots of your application
3. Configure your test suite to capture snapshots on each run
4. Set up automated comparisons in your CI/CD pipeline

Here's an example visual regression test:

import { Inpera } from '@inpera/sdk';

describe('Homepage Visual Test', () => {
  it('should match baseline snapshot', async () => {
    const inpera = new Inpera({
      apiKey: process.env.INPERA_API_KEY
    });

    const result = await inpera.compare({
      url: 'https://example.com',
      baseline: 'homepage-baseline',
      threshold: 0.01
    });

    expect(result.diff).toBeLessThan(0.01);
  });
});

Follow these best practices for effective visual regression testing:

• Test critical user journeys first
• Maintain clean baseline images
• Set appropriate thresholds to avoid false positives
• Review diffs carefully before approving changes
• Update baselines when intentional changes are made