How do I perform visual comparison against fixed file paths using Playwright?

Answer

Performing Visual Comparison with Fixed File Paths

To perform visual comparison against fixed file paths using @playwright/test, you can use the expect(page).toHaveScreenshot(path[, options]) method. This method compares the current page screenshot with the image at the specified path and returns true if they match, false otherwise.

Here's an example:

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

test('Visual comparison with fixed file path', async ({ page }) => {
  await page.goto('https://ray.run/');
  await expect(page).toHaveScreenshot('path/to/reference-image.png', {
    threshold: 0.01,
    maxDiffPixels: 100,
  });
});

The options argument is optional and can be used to configure various aspects of the comparison process. For example, you can set a threshold value for an acceptable perceived color difference between pixels in compared images. The maxDiffPixels option allows you to specify an acceptable amount of pixels that could be different between images.

Additionally, Playwright Test provides expect(snapshot).toMatchSnapshot() which compares snapshots of elements or pages against previously recorded ones.

By default, both methods use pixel-to-pixel comparison. However, you can change this behavior by setting the scale option in page.screenshot(). By default, it's set to "css", meaning one pixel per each CSS pixel on the page. If you set it to "device", screenshots will have one pixel per each device pixel instead.

With these methods, you can perform visual comparisons against fixed file paths and fine-tune your tests according to your needs.