[Question]: Clarification on `toHaveScreenshot` and `toMatchSnapshot`

[rainerhahnekamp]

For visual regression, we have two potential assertions. They are toHaveScreenshot and toMatchSnapshot. The documentation isn't really clear which one we should prefer over the other.

[dgozman]

Take a look at this guide.

[dgozman]

Closing per above. If you still encounter problems, please file a new issue with a repro and link to this one.

[Mujtaba-git]

Dmitry Gozman (@dgozman) Rainer Hahnekamp (@rainerhahnekamp)

I'm seeking clarity regarding the differences between the toMatchSnapshot() and toHaveScreenshot() functions in Playwright.

Could someone please provide a concise explanation of the primary difference between toMatchSnapshot and toHaveScreenshot in Playwright?

Additionally, if you could shed some light on when it is appropriate to use each of these functions?
Or any best practices or tips for effectively utilizing toMatchSnapshot and toHaveScreenshot to enhance visual regression testing?

[tfrijsewijk]

What's also worth noting: .toMatchSnapshot() supports comparing elements (Locators), whilst .toHaveScreenshot() only appears to support comparing whole pages.

And the name toHaveScreenshot is ambiguous, why is it named like that? Having a screenshot is something else than matching a screenshot 🤷

[sovetski]

Hi, Dmitry Gozman (@dgozman) you closed the ticket but it is not resolved for me too.

toHaveScreenshot name is not clear, it should be updated to something like toMatchScreenshot

[akwasin]

I'm of the opinion that this is still an active question but this is how I understood it from the playwright documentation:

.toHaveScreenshot is used solely to compare screenshots. Take two images, compare the 2nd against the 1st with the 1st being the golden image.

.toMatchSnapshot uses a broader spectrum and can be used to compare other visual elements other than images as Thomas Rijsewijk (@tfrijsewijk) wrote. Docs uses text as an example.

test('example test', async ({ page }) => { await page.goto('https://playwright.dev'); expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt'); });

.toHaveScreenshot won't allow the user to compare content of a header with another header without taking the whole rendered screen into consideration.

I hope this makes it clearer for everyone and Dmitry Gozman (@dgozman) please correct me if I'm wrong.

I agree Ahliman HUSEYNOV (@sovetski), the naming isn't spot on.