Device pixel ratio/density simulation

I’m following the advice here : https://docs.cypress.io/api/commands/viewport.html#devicePixelRatio

Current behavior:

Actually we can’t simulate pixelRatio/pixelDensity with Cypress. It can be very useful for testing correct behavior around responsive images.

Desired behavior:

Have the possibility to switch the DevicePixelRatio in cypress.

Viewport dimension changes and testing the currentSrc is already very useful. Having DevicePixelRatio in cypress would enable finer tests.

Test code to reproduce

Not applicable as it’s not implemented.

It could be another option to cy.viewport()

[smoolin]

I was able to configure device pixel ratio with these lines in my tests, YMMV:

cy.wrap(Cypress.automation('remote:debugger:protocol', {
  command: 'Emulation.setDeviceMetricsOverride',
  params: {
    // target DPR here
    deviceScaleFactor: 2,
    // width and height set to 0 remove overrides
    width: 0,
    height: 0,
    // my use case wasn't on mobile
    mobile: false,
  },
}));

[roman01la]

This could also help cypress-image-snapshot to avoid diff size of screenshots between local and CI runs https://github.com/palmerhq/cypress-image-snapshot/issues/129