Add option to cy.visit() to complete on DOMContentLoaded instead of onLoad

[mkellyclare]

I'm testing a site that has a lot of scripts loaded on it and even though the elements I want to test for are present quickly, the test has to wait for everything on the page to load.

[netusco]

+1

[anhaley]

+1

[darth-stewie]

This would be incredibly helpful for my tests as well - DOMContentLoaded will succeed, but window:load will not. I really would need to pass a param that would use DOMContentLoaded instead of window:load, perhaps in a window:before:load event listener

[WinstonN]

+1

[pm-komal-jain]

+1
I am a newbie to Cypress. And trying to use it on our site that has lots and lots of blocking scripts & images which delays the onload event to trigger. If this feature - of completing cy.visit() on DOMContentLoaded event is available, it would be great.

This issue seems to be open for long, how have others handled similar situation on their end?

[AustinBernerEvercast]

@pm-komal-jain I've recently found a solution, at least for my automation project in my web app.
Cypress version 9.1.1, for some reason, plays much more nicely with my web app. I recommend giving that version a try. Do not update higher or lower version than that though, it caused me problems anyway

[pm-komal-jain]

@AustinBernerEvercast - Thanks for your response.
I did try out, using specific Cypress version 9.1.1, However, I wasn't lucky and the issue did persist for me.
I also, did try setting blockHosts property in Cypress.json to block out calls like -googletagmanager.com , www.google-analytics.com, however that wasn't of much help either, as the onload event is trigger quiet late on the website.

[AustinBernerEvercast]

@pm-komal-jain That sucks 😞
Another workaround that I've heard about but didn't have much success implementing, was manually triggering the onload event from the window object - but you'll need to modify the existing cy.visit() command in order for that to possibly work as cy.visit() is what awaits the onload event. If you can get that to work, you could build in an assertion that specifically waits for the main element(s) on your bage page to be visible. Perhaps there's something there for you to look into 🤷

[hangboss1761]

+1

[BarrySaikSoundry]

+1

[meatnordrink]

This would be a great feature. It's currently implemented in Playwright, and has been useful recently as we've had an issue with a third-party script that's making a request that never resolves, and holds up the load event. Because of this, all of my Cypress tests have become unusable, whereas, with the company Playwright suite, we can still run them by appending {waitFor: domContentLoaded} to the Playwright equivalent of cy.visit(). (It's a pain, but at least it gives us some option.)

If anyone knows another way I can get Cypress tests to work in this situation, I'd love to be enlightened!

[tina-zeng]

+1

[ffsugar]

+1

[a8trejo]

my current workaround is to check on the Network tab what is the last request sent by the application after loading the URL, for example https://www.heroku.com/, on the Network tab I see a GET request to https://hello.heroku.com/analytics?

So in cypress I would have a cy.intercept("**/hello.heroku.com/analytics*").as("getAnalytics") on a beforeEach hook, or at the beginning of the test, then cy.visit() and then I would have a cy.wait("@getAnalytics")

So far with that, and maybe having a cy.get("any DOM element").should("be.visible") to query the DOM until it has loaded, between those 2 tricks I have been able to get around this issue

[gvlasov]

How hard can it be to add this essential feature? It's been requested since 2017. What is everyone testing with cypress while not having this exact problem? Is it that rare to have a long-loading resource on a page that is not critical for DOM rendering?

[a8trejo]

Since using the approach I described above, I've never encountered this issue anymore @gvlasov

[gvlasov]

@a8trejo I've also come up with that solution. Doing that for a script-heavy website like an e-commerce store is a huge pain in the ass, and I don't think that can be considered a viable workaround.

[PKD-2050]

Hi Team I have encountered the similar issue like this when i try to click on an dropdown element within the page it gets loaded into an infinite loop. Is it causing because of this issue or it isn't working is because in Cypress, tests run in a separate frame than your application under test (AUT). The event you're waiting for will never fire inside of Cypress's document.

cy.get('#body_x_tabc_info_prxinfo_x_selEntity_search').trigger('click');

      cy.get('#body_x_tabc_info_prxinfo_x_selEntity_MenuItem > li').then(dropdown => {

         cy.wrap(dropdown).click();

     })

[ivanharalampiev]

are we waiting for a 10y anniversary for this feature request?