Skip to content

4.12.0 Regression: CreateSnapshot causes images to be loaded many times #8679

Closed
@gcoombe

Description

@gcoombe

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

Activity

mtc3bmtc3b

mtc3bmtc3b commented on Sep 28, 2020

@mtc3bmtc3b

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

jennifer-shehane

jennifer-shehane commented on Sep 29, 2020

@jennifer-shehane
Member

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

crfrolik

crfrolik commented on Sep 30, 2020

@crfrolik

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

crfrolik commented on Sep 30, 2020

@crfrolik

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

image

jennifer-shehane

jennifer-shehane commented on Oct 1, 2020

@jennifer-shehane
Member

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.

crfrolik

crfrolik commented on Oct 1, 2020

@crfrolik

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.

22 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @gcoombe@chrisbreiding@jennifer-shehane@mtc3bmtc3b@hernqvistdaniel

    Issue actions

      4.12.0 Regression: CreateSnapshot causes images to be loaded many times · Issue #8679 · cypress-io/cypress