How do I compare screenshots across Chrome and Firefox?

To compare screenshots between Chrome and Firefox, the main goal is to reduce browser-specific differences and use a consistent capture process.

1. Standardize the environment

Make both browsers as similar as possible:

• Same OS and display scaling
• Same viewport size
• Same zoom level
• Same fonts installed
• Same GPU/antialiasing settings if possible

2. Capture screenshots consistently

Use the same:

• Page URL
• Window size / viewport
• Device pixel ratio
• Scroll position
• Wait condition before capture

If you’re using automation, set the viewport explicitly and disable animations where possible.

3. Compare images with a visual diff tool

Use a tool that can:

• Align images
• Detect pixel differences
• Tolerate minor antialiasing variation

Common options:

• pixelmatch
• Resemble.js
• Blink-diff
• Puppeteer/Playwright screenshot comparison

4. Account for expected browser differences

Chrome and Firefox may render slightly differently due to:

• Font smoothing / antialiasing
• Layout rounding
• Default form control styling
• SVG/text rendering
• Scrollbar appearance

To avoid false positives:

• Compare at the DOM/component level when possible
• Mask dynamic areas
• Use a small threshold for diff tools

5. Use automation if possible

A common approach with Playwright:

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

test('visual comparison', async ({ page, browserName }) => {
  await page.setViewportSize({ width: 1280, height: 800 });
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot(`example-${browserName}.png`, {
    animations: 'disabled',
  });
});

Then compare the generated screenshots with a diff tool or Playwright’s built-in screenshot assertions.

6. Best practice

If your goal is regression testing:

• Pick one browser as the baseline
• Allow small per-browser differences
• Compare each browser against its own baseline rather than directly against the other browser

If you want, I can show you:

• a Playwright example for Chrome vs Firefox comparison, or
• a Node.js script using pixelmatch to diff screenshots.