[Question] screenshot resolution is different in headless vs headful / UI mode

[ychaudhari]

I have seen a behavior in playwright 1.8.0 that is very similar to this issue in puppeteer (americanexpress/jest-image-snapshot#156) where a headless element.screenshot() or page.screenshot() is 2 to 5 pixel different in size compared to headful / ui mode element.screenshot() or page.screenshot(). This is for the same browser and same viewport size.

I can force UI mode and or play with threshold/blur etc to match images but can someone give me clues on exploring the issue further (to find the root cause)?

Does anyone know if anything is being done around this area?

[JoelEinbinder]

I'm not too concerned about the element screenshot, because subtle differences in the rendering pipeline between headless and headful could cause fonts to be slightly different.

But the page screenshot size not matching the viewport size is a very serious issue. Can you provide some tips to help me reproduce this? Thanks!

[ychaudhari]

Thanks @JoelEinbinder for your reply

on further investigation and retries, I think I can confirm that the issue only in element.screenshot() and not in page.screenshot(). I understand that there would be external variables that could cause size issue in element.screenshot()

I'm happy to close the question for now and explore further offline into element.screenshot()

FYI, My elements are made up of web forms or satellite map and visually they look identical to naked eye. Also, in the application code I see no reason for them to be rendered differently... but will explore further

Any pointers on the font rendering differences that you mentioned would be great.

[JoelEinbinder]

I'm trying to fix the issue with fonts mismatching in screenshots, but its a long and slow process. If you have a demo page or can just point me tot he font in question, ill add it to my own set of test cases. But otherwise I think you should just change your testing system to accept some size mismatch.

[bvaughn]

In case it's helpful, I ran into this issue when playing around with a pet project: bvaughn/planner#7

Headless screenshots are different on my MacBook which causes tests to fail:

Headless

Visible

Diff

[bbigras]

otherwise I think you should just change your testing system to accept some size mismatch.

@JoelEinbinder is that doable with expect(await page.screenshot()).toMatchSnapshot('landing.png');?