Cypress getting into an infinite XHR request loop

[jackfranklin]

Current behavior:

When visiting a page on our site through Cypress we're seeing it never complete loading because something causes the XHR requests being made to be made infinitely.

If we look at the Cypress CLI output when running the test we see:

GET /xhr/item/alternate-colours/1606925 200 236.222 ms - -
GET /xhr/item/alternate-colours/1606925 200 456.960 ms - -
GET /xhr/item/alternate-colours/1606925 200 288.704 ms - -
GET /xhr/item/alternate-colours/1606925 200 260.936 ms - -

This request is only made by our application once; if I got to the page in a browser and watch the network tab I can see that the request is made once. Watching the test through the Cypress UI, I can see that the browser just hangs and becomes unresponsive as all these requests are firing.

I'm not sure what, but something is causing these requests to run again and again and again.

Interestingly, this only happens via cypress open and then running the test through the UI. If I do cypress run and watch the video, the test does complete and the XHR requests complete as expected.

I'm not sure what extra info is useful here but let me know what I can provide to help with this.

• Operating System: Mac OS X Sierra
• Cypress Version: 1.1.4
• Browser Version: Chrome 63

[bahmutov]

That's a very interesting bug!

• great that this happens while in the GUI mode, will be simpler to debug
• is there a small reproducible example? We have never seen this behavior and there are a lot of tests around XHR

[jackfranklin]

I've yet to figure out exactly what the cause here is. The particular XHR code is a $.getJSON (from jQuery call) in a React componentWillMount lifecycle hook. I don't see why those characteristics would lead to it behaving like this but I'm going to try using a plain fetch call and see if that helps.

Is there a way from the Cypress GUI to get to the developer console for the page I'm testing to see if there's any useful information in the console / network tab?

[jennifer-shehane]

Are you using React 16? I have seen this happen in my React app when running in Cypress when there was an error that was not being handled properly by an ErrorBoundary component. I kind of assumed this was reflective of the behavior of my application though and didn't look at the live application in the circumstance. I fixed my ErrorBoundary problem and it hasn't happened since. I could recreate that circumstance if you think there's any chance this sounds related. 🤔

[brian-mann]

@jackfranklin just open your Dev Tools. Everything is in there the same as when you use your application outside of Cypress.

[jackfranklin]

@brian-mann that's what I thought; but when I open the dev tools they don't work. I'm assuming this is because the browser is locked in an infinite loop of some sorts.

@jennifer-shehane that sounds relevant, I'll do some digging into that. I'll see if I can fix it by using an error boundary to catch any problems.

[wulfovitch]

We are currently using React 15 and also have this problem. Will an update to React 16 solve this problem as @jennifer-shehane indicates?

[brian-mann]

This is not possible to track down without a reproducible repo. Cypress works with XHR mocking on a large number of projects including many many react 15 and react 16 projects.

[paulpruteanu]

I'm facing the same issue, hope the screenshot helps further. One thing that I'm noticing is that recurrence happens when the resource is required via text/plain.

The test remains stuck.
UPDATE: It happens only when I'm doing things like

cy.contains('foobar').should('be.visible')

and it's not there in the page yet. If I'm waiting for a route that would eventually display the content, the endless loop is not happening.

[lsplogi]

We are also facing the same issue while running in the browser, whereas in headless mode its working fine.
The actual request is made only once.

[jennifer-shehane]

We really need a small reproducible example to begin work on this issue.

[balmar]

I have just installed cypress via npm. With just the default settings I get into an infinite loop of GET requests after redirecting to the url below. The requests in browser's console are just like on @lsplogi screenshot.

I'm on Debian 9, using Chrome Version 65.0.3325.146 (Official Build) (64-bit).

My code:

describe('Cypress infinite loop', function() {
	it('hangs', function(){
		cy.visit('https://evryplace.com/panel');
	})
})

Output:

...
GET /panel/i18n/59858b7/app-webvr_en.json 200 190.868 ms - -
GET /panel/i18n/59858b7/app-webvr_en.json 200 187.331 ms - -
GET /panel/i18n/59858b7/app-webvr_en.json 200 195.618 ms - -
GET /panel/i18n/59858b7/app-webvr_en.json 200 150.965 ms - -
GET /panel/i18n/59858b7/app-webvr_en.json 200 191.312 ms - -

[jennifer-shehane]

Yep, this code does cause this never loading behavior. Thanks @balmar. The behavior looks oddly similar to this other issue's test code I just ran here: #1235 (comment)

it('hangs', function () {
  cy.visit('https://evryplace.com/panel/')
})

[LawJolla]

This was my "welcome to Cypress" bug.

I went through the tutorial on my project, and then it got stuck in this XHR loop. I can choose any route too and I get the same response. In this video recording, I chose a bad route. It didn't matter -- XHR loop. Only changing from Canary to Chrome solved it. (See screen cast below)

https://cl.ly/2d3K0X2V3207

[nickspiel]

In my case I was migrating tests from nightmare where you need to fire the callback when the test is complete. I had left the callback in the function call.

Was:

it('should test something', (done) => { ... })

Now:

it('should test something', () => { ... })

Tests no longer hang - this wont be a fix for the majority but thought I would add it for others to check.

[matt212]

@jennifer-shehane , i am also facing same xhr waiting scenario any update or alternative code snippets to place in config files like (commands file or cypress.json) wherein we would put timeout for xhr to complete and if there are uable to complete within provided timeframe we could cancel the request and continue with other test cases for time being till we could resolve this bug.

[QA-Fresh]

I see it's been almost a year since this thread was last addressed: any updates on this? Works fine when using Electron but hangs forever in Chrome.

I'm trying to decide between using Cypress or something else like WebDriverIO combined with Jest for the React module testing. This is a big red flag right out of the gate, along with a community that doesn't keep up.

[ayandebbarman]

I am facing this same issue with infinite xhr loop when using wait.. any workaround would be appreciated

[SmitharyZach]

I also have this issue. The xhr request will get stuck in an infinite loop when I run Cypress through the GUI. When I run cypress headless it works perfectly fine. The GUI will freeze and I will have to force close it through the activity monitor. It is a web component using React.

[queen-of-code]

I'm experiencing the same - it doesn't always reproduce, but is much more likely to do so when hitting a slower environment.

[tanyutu]

I also have this issue. The XHR request will get stuck in an endless loop. Any progress for fixing this?

[ha404]

I just ran into this issue after trying to fix fetch: https://dev.to/mjsarfatti/how-to-test-your-fetch-requests-with-cypress-bh5

The culprit was the addition of:

Cypress.on('window:before:load', win => {
  delete win.fetch;
});

Removing the above fixed my issues.

[javiermrz]

This is still happening, no updates after 3 years with this issue opened. Problem still happens only in GUI mode.

[arsfeld]

I've had the same issue described here, but it's only consistently failing when running cypress run, with cypress open it's inconsistent.

But I noticed it doesn't happen when using Firefox, so I've switched CI to use Firefox and so far it's ok.

I really was hoping to test the frontend on Chrome though, so I'm looking forward for a solution.

[panzarino]

@swiecaJS That's actually a separate issue here. The Office login page has some code that detects if it's running in an iframe, and if so reload itself / make some requests. Cypress works by running everything within an iframe, so that's where this becomes a problem. However, our new system of source rewriting is designed to fix some issues like this, which you can enable by setting experimentalSourceRewriting to true in your config. This fixes some of the issues that page was having with Cypress, but it still doesn't load yet. That's mainly because we're only rewriting sources from the same domain as the main document, but the page is pulling in some scripts from different domains that (also) contain problematic code for iframes. We'll have to reconsider the way that we handle source rewriting in order to make this page work, cc: @flotwig

As far as the original issue goes, I've been able to narrow down the issue and am trying to figure out a viable fix.

[panzarino]

As for the original reported bug, it looks like the underlying issue was actually #7187, which has to do with how our snapshot functionality would accidentally interact with documents using custom elements. A PR #8080 has been created to address this, and fixes the issue initially reported here with https://evryplace.com/panel.

[cypress-bot]

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

[cypress-bot]

Released in 4.12.0.

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