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