[FIXED] How to take high resolution screenshots with cy.screenshot cypress

Issue

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?

Solution

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

})

Answered By – Mhyland

Answer Checked By – Mary Flores (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published