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

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.

https://cypress.io

MIT License

46.74k stars 3.16k forks source link

Open jennifer-shehane opened 3 years ago

jennifer-shehane commented 3 years ago

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

Allow users to have higher DPR videos/screenshots (so they're not blurry)
Allow users to set this for testing different DPR https://github.com/cypress-io/cypress/issues/7075

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?

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

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

kuceb commented 3 years ago

How about a global setting devicePixelRatio in cypress.json

jennifer-shehane commented 3 years ago

Experiments from @Bkucera on ways to set DPR:

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

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 commented 3 years ago

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 commented 1 year ago

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