0

I am using cypress as automated testing on my cross-platform ionic app written in angular. I wanted to automate the screenshots for the deployment using cypress but the images are of a low quality I am currently setting the viewport to the presets. I tried just scaling the resolution but it causes all the elements to be too small.I am changing the viewport during the tests. I have tried setting the device scale factor with this code in my plugins\index.js file

module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
      // force screen to be retina
       launchOptions.args.push('--force-device-scale-factor=3')
    return launchOptions
  })
}

How would I go about taking higher resolution screenshots of my pages for multiple devices using Cypress?

Putra Prima A
  • 136
  • 7
Mhyland
  • 250
  • 1
  • 4
  • 14
  • 1
    Maybe setup the window size to 2000x1320 can give you higher resolution. More info on this link can help : https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots/ – Putra Prima A Dec 29 '21 at 21:46
  • This will affect the device scaling to be different from how it would look on a real mobile device. The link only discusses desktop resolutions not mobile – Mhyland Jan 05 '22 at 16:28

1 Answers1

0

This cypress command will take in a dpi / scale factor and a width and height and on chrome will change the dpi to get a higher resolution without changing the scaling on mobile for less responsive apps.

Cypress.Commands.add('dpiAndResize', (scaleFactor, width, height) => {
  cy.viewport(width,height);
  cy.wrap(Cypress.automation('remote:debugger:protocol', {
    command: 'Emulation.setDeviceMetricsOverride',
    params: {
      // target DPR here
      deviceScaleFactor: scaleFactor,
      // width and height set to 0 remove overrides
      width: 0,
      height: 0,
      // my use case didn't
      mobile: false,
    },
  }));

})
Mhyland
  • 250
  • 1
  • 4
  • 14