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.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].