Playwright Compare screenshot against existing image

Question

1. take clip screenshort
2. compare screenshort against existing picture stored in my repo

const screenshot = await page.screenshot({ clip: { height: 20, width: 20, x: 630, y: 283 }, path: `${name}Icon.png`})

expect(screenshot).toMatchSnapshot('ExistingIconPicture.png'); 

getting error >ExistingIconPicture-chromium-win32.png is missing in snapshots, writing actual.

How to compare against already existing picture?

Edit: To make it clear enough, I want to compare taken screenshot with specific existing picture. So lets say I have existing picture icon 'Icon.png' and I want to compare clip screenshot with this icon 'Icon.png'. But I want to do that in multiple different tests, so the existing picture('Icon.png') cannot follow the name based on running test.

const screenshot = await page.screenshot({ clip: { height: 20, width: 20, x: 630, y: 283 }, path: ${page}Icon.png}) 

expect(screenshot).toMatchSnapshot('Icon.png');

Answer 1

Looks like either your file is missing the full file name it expects (the chromium win32 part), or it isn’t in the directory it expects. See the Playwright docs on how it handles toMatchSnapshot and other visual comparisons.