[Feature] Ability to set device scale factor on an existing page

This feature request is quite similar to #2134, but I thought it would be better to open a new issue, because my use case is quite different. Apologies for the wall of text, but this will take some explaining.

I have an open source project designed to help produce the large number of image assets needed to create a modern cross-platform web app, as well as the related assets for packaging such an app for the desktop (macOS and Windows desktop icons, installer background images etc.). It does this by taking a small number of inputs, compositing them together using SVG or HTML, and taking screenshots at various sizes and pixel ratios.

In order to do this efficiently, the project uses a “pool” of browsers/pages for taking screenshots. A page can be acquired, its viewport changed, a screenshot taken, and then it can be returned to the pool. This re-use of pages avoids the cost of creating a new page for each screenshot to be taken, reducing build times significantly. A maximum pool size can also be adopted to prevent overloading the build box with a crazy number of pages open simultaneously.

This approach works at the moment because I am using Puppeteer, which supports setting the device scale factor in page.setViewport(). I want to switch to Playwright + Firefox for better SVG support, but the inability to change the device scale factor of an existing page means that I can no longer use a single pool of pages to take screenshots, since the scale factor changes from image to image.

This is distinct from the use-case in #2134, which was for simulating “zooming”. In my case, I actually want to change the device scale factor specifically. An example of where this comes into play, is when building a DMG background image for a macOS installer. I take an HTML document as an input, and take two screenshots - one @1x scale, and one @2x scale. These get composited into a single TIFF image which means that the DMG background will work on both Retina and non-Retina macOS machines. The key point for this issue being, that the HTML input can use all the power of responsive CSS, including pixel ratio media queries to affect how each image looks.

Thanks for reading!

[dgozman]

@ezzatron Thanks for the details!

I ended up learning that I can’t switch to Firefox anyway because it doesn’t support the omitBackground option when taking screenshots.

Oh, that’s unfortunate.

[arjunattam]

Thanks @ezzatron, this is an interesting scenario for headless browsers. Playwright treats emulation scenarios differently: they are based on browser contexts. This enables scenarios that involve multiple pages (common in the testing world) and mirrors real-world usage (since end users cannot change device scale factor for a page).

Creating a browser context is inexpensive, but it would require creating new pages in the context, causing your optimization of re-using pages to not work. At this stage, we are prioritizing testing related scenarios and we can keep this issue open to collect more feedback. Thanks!