XHRs Not Logged/Handled (due to Service Workers)

Current behavior:

When running build in webpack 4’s production mode (but probably not the root cause of this bug), Cypress is not logging XHR requests and not noticing them, hence cy.route()/cy.wait() mechanism fails. (These are not fetch requests) This is probably not the culprit, but haven’t thought of anything else that’s different yet.

As per the documentation:

Now we know exactly why our test failed. It had nothing to do with the DOM. Instead we can see that either our request never went out or a request went out to the wrong URL.

But in my case I can see the requests have been made and when running locally (development mode) everything works perfectly, no change to the URL.

** Update - seems that when I comment out a test that signs in on a different site (no option to programmatically login) the rest of the tests run fine and the XHRs are logged. Somehow, having the first test sign up and then redirect to my own app breaks XHR logging. (Still weird that local setup doesn’t suffer from this)

Desired behavior:

XHR requests are noticed and can be waited upon.

Steps to reproduce:

Not sure how you can reproduce it yourself. Local setup with webpack - everything works fine. Building in production mode (webpack 4) and serving with http-server (in order to mock how it runs in the CI which is where I initially spotted the problem) - Cypress is blind to XHRs - they don’t appear in the log as well as you can see in the screenshots below. I can see the XHRs request in the network pane and my site loads up as normal. There is no difference in the URL and you can see no XHRs are even logged. Initially I thought it might be happening because I serve under port 80, but then I changed to a random port and it still didn’t work so I ruled it out.

Local scenario (everything’s fine):

Served scenario (XHRs not logged):

Anything else I can provide that will help?

Versions

MacOS High Sierra 10.13.3 Chrome 66.0.3359.170 (Official Build) (64-bit) Cypress 2.1.0

[cintrzyk]

Are you using service workers in production? If so, then try to unregister them before each spec:

Cypress.Commands.add('unregisterServiceWorkers', () => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations()
      .then(registrations => registrations.forEach(reg => reg.unregister()));
  }
});

beforeEach(() => {
    cy.unregisterServiceWorkers();
});

works for me 💃

[ShaneMckenna23]

Below are some snippets of the behaviour I’m seeing. I can make a working example over a longer timeframe if you are still having trouble solving this.

Setup: React Application built using create-react-app Cypress: 3.1.0 Circle Ci image: cypress/base:8

Circle CI

-  run:
	name:  Build the browser app
	command:  cd browser-app && npm run build
-  run:
	name:  Serve the browser app
	command:  cd browser-app && serve -l 3000 -s build
	background:  true
- run:
	name:  Running Cypress tests
	command:  cd browser-app && npm run cy:run

Cypress Test

describe('Find Player',  ()  =>  {
	beforeEach(()  =>  {
		cy.server();
		cy.route('POST',  routes.api.queryForLoginPlayer).as('queryForLoginPlayer');
		cy.visit('http://localhost:3000/');
	});
	
	it('Finds Player sucessfully',  ()  =>  {
		cy.get('[data-cy=email-input]')
		.type(testEmail)
		.should('have.value',  testEmail);
		
		cy.get('[data-cy=email-input-button]').click();
  
		// Only resolves locally
		cy.wait('@queryForLoginPlayer');
});

Cypress local

Cypress Circle Ci