Component testing - browser window dimension will impact screenshot viewport dimension

[gsouf]

Current behavior

When taking a screenshot the dimension of the viewport of the screenshot will be impacted by the size of the browser window.

That will have effects when component dimensions are relative ie %, vh, vw.

Desired behavior

Screenshots made in components testing to be only dependent on the configured viewport dimension and not to be impacted by the browser window dimensions.

Test code to reproduce

Clone the repo https://gitlab.com/souf/react-webpack-playground/-/tree/cypress-screen-dimensions using branch cypress-screen-dimensions.

run yarn install and yarn cypress:open.

Open the component testing for the component "App" and make sure you windows is wide enough to not scale down the viewport as per the indicator in the top right hand corner:

Tests are working

Now size down the browser's window to have the viewport scaled down:

Tests are failing as per the following screenshot diff (left is expect / right is actual):

see screenshot in cypress/snapshots/__diff_output__

Cypress Version

10.4.0

Node version

16.x

Operating System

linux

Debug Logs

nc

Other

I suspect this could somehow share some with #23300 due to the way screenshots are processed

[JasonFairchild]

I think I'm getting this as well. I can't tell anything from the app viewport with it at just 10%. Affects videos too of course. I think it might be interfering with our VRT as well.

[JasonFairchild]

So I happened across a type of workaround for this, in case anyone is interested. This cypress doc talks about using browser launch options to force screen size/pixel ratio. I had to remove the "browser.isHeadless" from the conditional to have VRT snapshots match between headless and headed browser runs though. After doing that, my videos and screenshots are able to be made out visibly (not 10% of viewport) like this.

[eduardlind]

Are there any plans to work on it? As far as I see now, there is no ability to make a screenshot of page or element. Also it affects heavily visual testing(it breaks is totally). I tried solution from @JasonFairchild but it didn't work(electron).