Allow a way to configure device pixel ratio (DPR) for all headless browsers during cypress run

[jennifer-shehane]

What would you like?

Allow a way to configure device pixel ratio (DPR) of the machine for all browsers via a single config.

Why is this needed?

• Allow users to have higher DPR videos/screenshots (so they're not blurry)
• Allow users to set this for testing different DPR Device pixel ratio/density simulation #7075

Other

• How to we educate people that the DPR is only applying during cypress run?
• Make it global config (can expand to suite/test level config if people ask for it).
• What is the effect to setting DPR during cypress open mode? Is it weird? Let's not do that if it's weird.
• What happens setting DPR via the command line flags versus CDP?

Example

These are current defaults for DPR (effectively) and would be exposed this way:

{
  "devicePixelRatio": {
    "runMode": 1,
    "openMode": null
  }
}

[kuceb]

How about a global setting devicePixelRatio in cypress.json

[jennifer-shehane]

Experiments from @bkucera on ways to set DPR:

chrome:

when using Emulation.setDeviceMetricsOverride to set dpr after browser launch

• cy.screenshot resolution is doubled (you can see chrome scaling the app when we send the screenshot cdp command)
• The video will remain 1280x720. therefore cdp dpr will not fix users wanting doubled video size or make them less blurry

when using --force-device-scale-factor=2

• browser is launched at 2x size and both screenshots and video are double resolution
• however the command log is wider since css pixel size has increased, so users will see proportionally less of their app without us changing css

firefox:

can use layout.css.devPixelsPerPx to set dpr dynamically or at launch

• doubles screenshots and video
• however the command log is wider since css pixel size has increased, so users will see proportionally less of their app without us changing css

[kuceb]

Notes after looking at individual frames coming from cdp:
Chrome:
when using Emulation.setDeviceMetricsOverride to set dpr after browser launch:

• screenshots change resolution, however individual video frames do not. The video frames from startScreencast only change resolution when Emulation.setDeviceMetricsOverride changes the actual screen size, not the dpr
• the frames coming from startScreencast are compressed and have lossy artifacts, which match quality we see in uncompressed videos. Compression further reduces quality of the video recording

[b-sw]

@jennifer-shehane
Do you know if it's possible to set DPR on Electron browser as well?