Cypress: 4.12.0 Regression: CreateSnapshot causes images to be loaded many times

Created on 27 Sep 2020 · 11Comments · Source: cypress-io/cypress

Current behavior

Currently if log is called (internally within a cypress command or by cy.log) all images which are in the process of loading will reload. On some pages this is generating so many network calls that xhr requests are getting stalled to the point that all tests time out.

I think this occurs when we clone the body element here https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/snapshots.js#L155

On some internal pages we have many XHR requests (which generate many logs) and many larger images. The reloading behavior is to the point that our tests time out due to requires xhr/fetch calls getting stuck behind all the images.

Desired behavior

Calling cy.log shouldn't trigger a reloading of all images

Test code to reproduce

Use this snippet with cy.open and disable cache off:

    cy.visit('https://github.com/');
    Array(15).fill().forEach(() => {
      cy.log('Test log')
      cy.wait(100);
    })

Using the above there were 1762 image requests when loading github homepage. Each image was loaded 33 times

Versions

Cypress 5.2
Using electron
cypress open

internal-priority performance 🏃‍♀️ regression v4.12.0

Source

gcoombe

👍9

Most helpful comment

This was introduced in 4.12.0, likely by #8080, which you referenced at the line of code https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/snapshots.js#L155

The waiting of these resources could significantly slow down whatever is waiting on these resources to load.

Reproducible example

Disable cache in the Network tab of DevTools

index.html

<html>
<body>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/City_Lights_of_the_United_States_2012.jpg/2560px-City_Lights_of_the_United_States_2012.jpg">
</body>
</html>

spec.js

it('test', () => {
  cy.visit('index.html')
  Array(15).fill().forEach(() => {
    cy.log('Test log')
  })
})

4.11.0

Screen Shot 2020-09-29 at 8 41 14 AM

4.12.0

Screen Shot 2020-09-29 at 8 38 51 AM

jennifer-shehane on 29 Sep 2020

👍5 ❤2

All 11 comments

We are observing the same issue, also with Cypress 5.2 using cypress open, but using Chrome.

mtc3bmtc3b on 29 Sep 2020

👍1

This was introduced in 4.12.0, likely by #8080, which you referenced at the line of code https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/snapshots.js#L155

The waiting of these resources could significantly slow down whatever is waiting on these resources to load.

Reproducible example

Disable cache in the Network tab of DevTools

index.html

<html>
<body>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/City_Lights_of_the_United_States_2012.jpg/2560px-City_Lights_of_the_United_States_2012.jpg">
</body>
</html>

spec.js

it('test', () => {
  cy.visit('index.html')
  Array(15).fill().forEach(() => {
    cy.log('Test log')
  })
})

4.11.0

Screen Shot 2020-09-29 at 8 41 14 AM

4.12.0

Screen Shot 2020-09-29 at 8 38 51 AM

jennifer-shehane on 29 Sep 2020

👍5 ❤2

I don't know what "CreateSnapshot" is but I'm seeing the same images fly by the console repeatedly while a test runs, e.g.

GET /assets/loading.gif 304 4.127 ms - -

(and many more images, repeated)

Could this be related?

EDIT I believe this is causing a timeout failure in a test that's using a mocked XHR cy.route. The route oddly finishes immedately after the timeout occurs, consistently, which is suspicious.

crfrolik on 1 Oct 2020

👍1

(Chrome DevTools network view: ah, is this what is meant by "CreateSnapshot"?)

crfrolik on 1 Oct 2020

Snapshots are what we call the DOM that's captured on each command, so that when you scroll over the command log the DOM is rerendered to the state it was previously (aka time travel feature).

@crfrolik See if the issue of the requests is resolved after downgrading to 4.11.0, that should narrow down if this is the same issue.

jennifer-shehane on 1 Oct 2020

Thank you @jennifer-shehane - I downgraded to cypress 4.11.0 and the issue does not occur there, so that confirms my problem is a duplicate of this one.

crfrolik on 1 Oct 2020

👍2

As a side note another issue this causes on our end is that cy.visit ends up timing out as images constantly load and the Load browser event never fires as a result

gcoombe on 19 Oct 2020

😕3

@jennifer-shehane I hope this gets resolved soon, we are running recursive forms of 60-70 inputs (medtech). I'm only clicking inputs and typing. After half a test the time scales up so much, running 4-5 of these forms takes 30 minutes (imagine the time writing each test).
Atleast it works on 4.11. Soon I will not be able to justify cypress for my CTO.
Let me know if I can be of any help, much love!

hernqvistdaniel on 30 Oct 2020

Yes! Perfect @chrisbreiding !

hernqvistdaniel on 2 Nov 2020

👍1

The code for this is done in cypress-io/cypress#9050, but has yet to be released.
We'll update this issue and reference the changelog when it's released.