Cypress screenshotting functionality causes window resize event #9443

VaclovasVicius · 2020-12-03T13:10:34Z

Current behavior

Hello,
Our team spotted an issue, that when a cypress is creating a snapshot of a specific element (screenshot), a resize event is triggered in this case, because the panel is hidden by cypress and etc. Could this be eliminated somehow, because this is not normal behavior. In our case, if a resize event is triggered, some of the components are changing their state, in this case, test flakiness appears. Is it possible to get rid of this side effect somehow?

Desired behavior

Window resize event is not triggered

Test code to reproduce

None

Versions

All versions affected

jennifer-shehane · 2020-12-04T08:20:38Z

Taking the screenshot does triggers a few window resize events, which I could see creating some unexpected failures depending on the app.

Reproducible example

index.html

<html>
<body>
  <p>Resize the browser window to fire the <code>resize</code> event.</p>
  <p>Window height: <span id="height"></span></p>
  <p>Window width: <span id="width"></span></p>
  <script>
    const heightOutput = document.querySelector('#height');
    const widthOutput = document.querySelector('#width');
  
    function reportWindowSize() {
      heightOutput.textContent = window.innerHeight;
      widthOutput.textContent = window.innerWidth;
    }
  
    window.onresize = reportWindowSize;
  </script>
</body>
</html>

spec.js

it('resize event', () => {
  cy.visit('index.html')
  cy.get('#height').should('be.empty')
  cy.get('#width').should('be.empty')
  cy.screenshot()
  cy.get('#height').should('be.empty')
  cy.get('#width').should('be.empty')
})

gcaaa31928 · 2021-12-30T05:21:43Z

is there any update?

fboechats · 2022-03-02T16:00:27Z

Is there at least any workaround to this problem??

gcaaa31928 · 2022-03-09T05:57:10Z

this is very frustrated when we use cypress to determine our image has breaking diff, and this issue make a lot of false alarm

jguddas · 2022-03-09T08:53:29Z

@fboechats The workaround that worked for me was cy.screenshot({ capture: 'runner' });.

mschile · 2022-05-26T23:01:19Z

I was not able to reproduce the issue using the reproducible example above. I am using the following versions:

Cypress: 9.7.0
Chrome: 102.0.5005.61
Firefox: 99.0.1

Is anyone able to reproduce the issue on the latest Cypress and browser versions?

mschile · 2022-06-02T20:26:07Z

Closing as I can no longer reproduce on the newest version of Cypress and browsers.

bsekachev · 2023-03-23T20:31:15Z

The same behaviour on Cypress 12.5.1
resize event is triggered while screenshot is taken. This event causes our app to do some animations and result screenshots are broken.

To workaround it, I written custom command to make a screenshot of element.
We capture all the screen together with runner and then clip final image.

Cypress.Commands.add('customScreenshot', (element, screenshotName) => {
    cy.get(`${element} canvas`).then(([$el]) => ($el.getBoundingClientRect())).then((rect) => {
        const iframe = window.parent.document
            .querySelector('iframe.aut-iframe');
        const parentRect = iframe.getBoundingClientRect();

        const scale = parentRect.width / iframe.clientWidth;
        cy.screenshot(screenshotName, {
            // tricky way to make screenshots to avoid screen resizing
            // we do a screenshot of the whole screen including runner and then clip it
            // according to iframe coordinates and scale in the runner
            overwrite: true,
            capture: 'runner',
            scale: false,
            clip: {
                x: parentRect.x + rect.x * scale,
                y: parentRect.y + rect.y * scale,
                width: rect.width * scale,
                height: rect.height * scale,
            },
        });
    });
});

bsekachev · 2023-03-23T21:04:52Z

@mschile

Just an idea, the issue might be reproduced only if total browser size is not enough to show runner sidepanel and iframe with tested application at the same time (in this case, transform: scale( ... ) is applied to one of iframe parents). But I didn't check this assumption.

matsolyga · 2024-07-17T06:00:31Z

@bsekachev I think that your assumption is correct. When your viewport is too big to fit the runner browser window, the runner will scale your application, but when you perform the screenshot command, scale it will be removed (I am not sure why it works that way...). So it happens for me only when in the test I set by cy.viewport bigger resolution that is not possible to fit without scaling in the runner window. The solution for me was to increase the runner window size :) So I have this code in my cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://localhost:4300',
    setupNodeEvents(on) {
      on('before:browser:launch', (browser = {} as Cypress.Browser, launchOptions) => {
        console.log(
          'launching browser %s is headless? %s',
          browser.name,
          browser.isHeadless,
        )

        // the browser width and height we want to get
        const width = 2560
        const height = 1440

        console.log('setting the browser window size to %d x %d', width, height)

        if (browser.name === 'chrome' && browser.isHeadless) {
          launchOptions.args.push(`--window-size=${width},${height}`)

          // force screen to be non-retina and just use our given resolution
          launchOptions.args.push('--force-device-scale-factor=1')
        }

        if (browser.name === 'electron' && browser.isHeadless) {
          // might not work on CI for some reason
          launchOptions.preferences.width = width
          launchOptions.preferences.height = height
        }

        if (browser.name === 'firefox' && browser.isHeadless) {
          launchOptions.args.push(`--width=${width}`)
          launchOptions.args.push(`--height=${height}`)
        }

        // IMPORTANT: return the updated browser launch options
        return launchOptions;
      }),
    },
  },
})

cypress-app-bot · 2025-01-20T01:58:15Z

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

baxitfund · 2025-01-20T01:59:50Z

Approved

jennifer-shehane added topic: screenshots 📸 type: unexpected behavior User expected result, but got another labels Dec 4, 2020

cypress-bot bot added the stage: needs investigating Someone from Cypress needs to look at this label Dec 4, 2020

galr52 mentioned this issue Apr 21, 2021

feat: added wait before and after screenshot #15878

Closed

5 tasks

kindoflew mentioned this issue Jun 21, 2021

feat(parallax): add e2e tests pmndrs/react-spring#1542

Merged

3 tasks

cypress-bot bot added stage: backlog and removed stage: needs investigating Someone from Cypress needs to look at this labels Apr 29, 2022

mjhenkes assigned mschile May 26, 2022

cypress-bot bot added stage: internal stage: investigating Someone from Cypress is looking into this and removed stage: backlog labels May 26, 2022

cypress-bot bot added stage: awaiting response Potential fix was proposed; awaiting response and removed stage: investigating Someone from Cypress is looking into this labels May 26, 2022

mschile closed this as completed Jun 2, 2022

mschile removed the stage: awaiting response Potential fix was proposed; awaiting response label Jun 2, 2022

jennifer-shehane reopened this Jul 23, 2024

jennifer-shehane unassigned mschile Jul 23, 2024

jennifer-shehane added the stage: needs investigating Someone from Cypress needs to look at this label Jul 23, 2024

cypress-app-bot added the stale no activity on this issue for a long period label Jan 20, 2025

cypress-app-bot removed the stale no activity on this issue for a long period label Jan 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress screenshotting functionality causes window resize event #9443

Cypress screenshotting functionality causes window resize event #9443

VaclovasVicius commented Dec 3, 2020

jennifer-shehane commented Dec 4, 2020

gcaaa31928 commented Dec 30, 2021

fboechats commented Mar 2, 2022

gcaaa31928 commented Mar 9, 2022

jguddas commented Mar 9, 2022

mschile commented May 26, 2022 •

edited

Loading

mschile commented Jun 2, 2022

bsekachev commented Mar 23, 2023 •

edited

Loading

bsekachev commented Mar 23, 2023 •

edited

Loading

matsolyga commented Jul 17, 2024

cypress-app-bot commented Jan 20, 2025

baxitfund commented Jan 20, 2025

Cypress screenshotting functionality causes window resize event #9443

Cypress screenshotting functionality causes window resize event #9443

Comments

VaclovasVicius commented Dec 3, 2020

Current behavior

Desired behavior

Test code to reproduce

Versions

jennifer-shehane commented Dec 4, 2020

Reproducible example

gcaaa31928 commented Dec 30, 2021

fboechats commented Mar 2, 2022

gcaaa31928 commented Mar 9, 2022

jguddas commented Mar 9, 2022

mschile commented May 26, 2022 • edited Loading

mschile commented Jun 2, 2022

bsekachev commented Mar 23, 2023 • edited Loading

bsekachev commented Mar 23, 2023 • edited Loading

matsolyga commented Jul 17, 2024

cypress-app-bot commented Jan 20, 2025

baxitfund commented Jan 20, 2025

mschile commented May 26, 2022 •

edited

Loading

bsekachev commented Mar 23, 2023 •

edited

Loading

bsekachev commented Mar 23, 2023 •

edited

Loading