Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
gcoombe opened this issue Sep 26, 2020 · 11 comments · Fixed by #9050
Closed

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

gcoombe opened this issue Sep 26, 2020 · 11 comments · Fixed by #9050
Assignees
@chrisbreiding
Labels
type: performance 🏃‍♀️ Performance related type: regression A bug that didn't appear until a specific Cy version release v4.12.0 🐛 Issue present since 4.12.0

Comments

@gcoombe
Copy link

gcoombe commented Sep 26, 2020 •
edited by sync-by-unito bot

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
@mtc3bmtc3b
Copy link

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

@jennifer-shehane jennifer-shehane added type: performance 🏃‍♀️ Performance related stage: needs investigating Someone from Cypress needs to look at this labels Sep 29, 2020
@jennifer-shehane
Copy link
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

@jennifer-shehane jennifer-shehane added reproducible Can be reproduced v4.12.0 🐛 Issue present since 4.12.0 type: regression A bug that didn't appear until a specific Cy version release stage: ready for work The issue is reproducible and in scope internal-priority and removed stage: needs investigating Someone from Cypress needs to look at this reproducible Can be reproduced labels Sep 29, 2020
@crfrolik
Copy link

crfrolik commented Sep 30, 2020 •
edited

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
Copy link

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

image

@jennifer-shehane
Copy link
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
Copy link

crfrolik commented Oct 1, 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.

@gcoombe
Copy link
Author

gcoombe commented Oct 19, 2020

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 gcoombe mentioned this issue Oct 21, 2020
Open
flotwig added a commit that referenced this issue Oct 21, 2020
@flotwig
remove snapshotting from net-stubbing logs
2efef16 
this is really slow, and with #8679, it's even worse 😢
@flotwig flotwig mentioned this issue Oct 21, 2020
Merged
2 tasks
@jennifer-shehane jennifer-shehane mentioned this issue Oct 22, 2020
Open
@sync-by-unito sync-by-unito bot changed the title CreateSnapshot causes images to be loaded many times 4.12.0 Regression: CreateSnapshot causes images to be loaded many times Oct 22, 2020
@hernqvistdaniel
Copy link

@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!

@chrisbreiding chrisbreiding mentioned this issue Oct 30, 2020
Merged
2 tasks
@cypress-bot cypress-bot bot added stage: work in progress There is an open PR for this issue [WIP] stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope stage: work in progress There is an open PR for this issue [WIP] labels Oct 30, 2020
@hernqvistdaniel
Copy link

Yes! Perfect @chrisbreiding !

@jennifer-shehane jennifer-shehane mentioned this issue Nov 2, 2020
Closed
@cypress-bot cypress-bot bot added stage: pending release There is a closed PR for this issue and removed stage: needs review The PR code is done & tested, needs review labels Nov 2, 2020
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 2, 2020

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.

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 9, 2020

Released in 5.6.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v5.6.0, please open a new issue.

@cypress-bot cypress-bot bot removed the stage: pending release There is a closed PR for this issue label Nov 9, 2020
@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Nov 9, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@chrisbreiding chrisbreiding

Labels
type: performance 🏃‍♀️ Performance related type: regression A bug that didn't appear until a specific Cy version release v4.12.0 🐛 Issue present since 4.12.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Fix issue with createSnapshot causing images to load too many times cypress-io/cypress
6 participants
@gcoombe @chrisbreiding @jennifer-shehane @mtc3bmtc3b @hernqvistdaniel @crfrolik