search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.54k stars 3.2k forks source link

Device pixel ratio/density simulation #7075

Open 0gust1 opened 4 years ago

0gust1 commented 4 years ago

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()

roman01la commented 4 years ago

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

stevenvachon commented 4 years ago

On my machine, cypress open produces sceenshots that are 2:1 pixel density, while cypress run is 1:1.

stevenvachon commented 4 years ago

I think this simulation could be implemented using page zoom (instead of post-processing). Might not be very complicated.

roman01la commented 4 years ago

zooming a web page may result is layout shift sometimes which will introduce flaky tests and require additional effort from an engineer

stevenvachon commented 4 years ago

Antialiasing from post-processing will also introduce flaky tests

smoolin commented 2 years ago

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,
  },
}));
Romex91 commented 1 year ago

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,
  },
}));

I created an npm package from this message. I fixed a couple of problems:

See https://github.com/Popmenu/cypress-set-device-pixel-ratio