cy.wait("@route") sometimes does not catch route

[drewbrend]

Current behavior:

Occasionally (no, I do not have a reproducible example), when I wait for a route the route will complete before the call to cy.wait("@theRoute") is made, then the wait will time out. This happens a very small fraction (<1%) of the time and the only consistency that I can find is it happens after the test .click()s something, then immediately waits for a route, but it doesn't seen to be any tests in particular. It is like the route returns too fast for cypress to see.

See screenshot below - the line above the failed wait is the route it is supposed to wait for.

Desired behavior:

I think this is obvious

Steps to reproduce:

I don't have any - I know this is super helpful.

Versions

Cypress 3.1.0
Chrome 70

[jennifer-shehane]

Could you share the test code you have written for this? Feel free to exclude any sensitive data.

[drewbrend]

Let me know if you need more.

it("can edit a file", () => {
      cy.server();
      cy.route(
        "PUT",
        `v3/project/${projectUid}/documents/${createdAttachmentUid}`
      ).as("updateAttachment");

      checkDocumentCheckbox();

      cy.get(selectors.editButton).click();
      cy.get(editModalSelectors.documentName).type("updated");
      cy.get(editModalSelectors.saveChangesButton).click();

      cy.wait("@updateAttachment");
      cy.apiCall("attachments.getOneInProject", [projectUid, createdAttachmentUid])
        .its("name")
        .should("contain", "updated");
    });

[jennifer-shehane]

Is there a chance that the request that was made sometimes does not match the v3/project/${projectUid}/documents/${createdAttachmentUid} url? Like, there's an edge-case where the id is not defined when the route evaluates? Can you open the 'Routes' section above the commands to see what the route is matching against?

Just talking out loud, cause we haven't seen any other instances where the request was happening too fast for a wait to catch.

[drewbrend]

I don't think that could be the case, but I can't verify what that route actually was, the screen shot is an artifact of a CI build so I can't expand the side over to see the entire path.

I also can't open the Routes section because it's just a screenshot from CI. Is there a way to get that info from a cypress run command in CI that I could configure for next time? Some sort of verbose console output maybe?

[yuki-93]

I also had this issue several times. I made the route pattern very generic, which must have matched.

I think this happens because of, that your cy.server & cy.request calls are at the beginning of your spec. I suppose the app loads faster than cypress can hook into for listen to the requests. I hope this issue could be fixed with #687

Sadly because of this undeterministic issue, I can't use the wait on request for first reuqest(s) from my app.

[ldiary]

Also had this issue once in a while even though my route pattern is already very generic like below.

    export function search(term) {
      cy.server()
      cy.route({
        method: "POST",
        url: "**/graphql",
        status: 200
      }).as("searchResponse")
      cy.fetch(css.searchInput)
       .clear()
       .type(term)
      cy.wait("@searchResponse")
    }

The app only starts hitting the backend API after I type more than 3 letters of the search term. However, even with this delayed start of API request from the app, Cypress still wasn't able to catch the route. Cypress was still waiting until it timed out even though the app has already received the response from the API and has already displayed it in UI.

[bjornkvande]

I also have the same problem where sometimes cy.route() does not work. I get it working again by making changes in my code so cypress will load the new code. Then after a while again, the cy.route() call is not registered again.

This is how I load the fixtures:

loadFixtures() {
	return cy.fixture('data.json').then(data => {
		cy.route(/"action":"data.get"/, data);
	}
}

My test:

describe('Sort data', () => {
	loadFixtures(cy);
	cy.visit('/?someParam=4,55.2,8');
	...
}

When it works (from the network tab in chrome developer tools):

http://localhost/__cypress/xhrs/http://localhost/a?query={"action":"data.get"}

When it does not work

http://localhost/a?query={"action":"data.get"}

Also, it will sometimes work if I change the someParam to another value.

[jennifer-shehane]

Unfortunately we'll have to close this issue if no reproducible example is provided. Can anyone provide a way to reproduce this?

[Sharondio]

I have a set of tests that fails reliably on at least one of the cy.wait('@fixture') calls, but it isn't always the same call. This spec is 368 lines long, and it only started failing when I added a couple of new "it" blocks. Each of the blocks passes individually when run with .only. This leads me to believe it's a timing issue or memory leak within Cypress.

Update: After noticing that more and more cy.wait calls were failing as I went along, I just refreshed the whole chrome page instead of letting cypress re-run the tests. All tests passed. I'm voting memory leak.

[ghost]

@jennifer-shehane,
I have a reproducible example if you wanted to get on a call with me, I can share.
I'm seeing in the network request in cypress's console output as well as the network tab of Chrome's devtools.

Cypress's output window (left pane) shows a route object being setup (matching pattern), in the test object I never see the XHR entry. More over I have the exact same form that fires off the XHR request working 100% of the time, and does show a XHR entry in Cypress's left pane output.

GET /api/misc/stuffs?x=y 200 262.549 ms - -

[ashvaibhav]

@jennifer-shehane - why did we close this issue?
It does seem like a memory issue to me - though I am on Cypress v2.1.0.

[jennifer-shehane]

This was closed due to no one providing a reproducible example that we can run locally to recreate the failure. We will reopen if someone provides a reproducible example - app and test code that can be run to see the problem.

[chr1sjf0x]

@jennifer-shehane,
I have a reproducible example if you wanted to get on a call with me, I can share.
I'm seeing in the network request in cypress's console output as well as the network tab of Chrome's devtools.

Cypress's output window (left pane) shows a route object being setup (matching pattern), in the test object I never see the XHR entry. More over I have the exact same form that fires off the XHR request working 100% of the time, and does show a XHR entry in Cypress's left pane output.

GET /api/misc/stuffs?x=y 200 262.549 ms - -

I'm seeing similar issues. For us it is intermittent. We have about 7 out of 55 specs which are susceptible to this type of failure. Pretty reliably at least one of them will fail on every CI run. Running the tests individually always seems to work.

[gituser3000]

We have similar issue, however wait ignores 100% of requests like PUT, POST and others (only get is okay). Also i have the problem on my local pc, not even CI.
we tried to catch requests with:

cy.route("PUT", "api/textObject/*").as("waitTextObjectReload").wait("@waitTextObjectReload");

or

cy.route("PUT", "api/textObject/*", {}).as("waitTextObjectReload").wait("@waitTextObjectReload");

or

cy.route("PUT", "/api/textObject/*").as("waitTextObjectReload").wait("@waitTextObjectReload");

and other variations of this command.
Example of request:

PUT 200 /api/textObject/AE961F7C6EB14A56BBACD295A97B8DA200000000

XHR request is displayed in cypress panel, however it's completely ignored by wait.

Our app is split in two parts: 1st part is backbone, 2nd part is angular 7. The issue is reproducible in each. Requests go through nginx.

[gituser3000]

update:

cy.route("PUT", "/api/textObject/*").as("waitTextObjectReload")
makeSomethingToCallXHR();
cy.wait("@waitTextObjectReload");

this makes cypress to catch POST requests. GET requests tend to fail from time to time when written in one line like this:

cy.route("GET", "api/textObject/*").as("waitTextObjectReload").wait("@waitTextObjectReload");

so we have splitted it in two parts too.
Also calling cy.server right before catching requests can make waits fail. This is strange and should be explicitly mentioned in docs, i suppose.

[FilepCsaba]

For me it is easily reproducible, if i perform an action before waiting, and the XHR response comes before the wait() starts, it fails, if the request is a bit slower, it always passes.

You can see it in the OPs screenshot, his XHR ('PUT' , '/v3/projects/....') was faster than .wait() started.

If use the bellow code, it usually succeeds as the wait is initialized very fast after the click()

const openShoppingCart = () => {
	cy.server();
	cy
		.route({ method: 'GET', url: '/api/users/*/attributes/checkout-shipping-details' })
		.as('/api/users/*/attributes/checkout-shipping-details')
		.route({ method: 'GET', url: '/api/currencies' })
		.as('/api/currencies')
		.route({ method: 'GET', url: '/api/users/*/wishlist/saved?limit=100' })
		.as('/api/users/*/wishlist/saved?limit=100')
		.route({ method: 'GET', url: '/api/users/*/cart/config' })
		.as('/api/users/*/cart/config')
		.route({ method: 'GET', url: '/api/users/*/cart/estimate' })
		.as('/api/users/*/cart/estimate');
	return (
		cy
			.get(Cart_Badge_Header)
			.should(($element) => {
				expect($element).to.be.visible;
			})
			.click()
			.wait(
				[
					'@/api/users/*/attributes/checkout-shipping-details',
					'@/api/currencies',
					'@/api/users/*/wishlist/saved?limit=100',
					'@/api/users/*/cart/config',
					'@/api/users/*/cart/estimate'
				],
				{ timeout: 20000 }
			)
			.then(() => {
				cy.xpath(element_myCart_Tab).should(($element) => {
					expect($element).to.contain('My cart');
				});
			})
			.then(() => {
				cy.get(element_loadingAnimation_shipmentPanel, { timeout: 20000 }).should('not.exist');
			})
	);
};

But in case I'm using this code, it will fail most of the time, as by the time cy.server() and the routes are initialised and i start the wait, the XHR already finished and the wait() will fail.

const openShoppingCart = () => {
	return (
		cy 
			.get(Cart_Badge_Header)
			.should(($element) => {
				expect($element).to.be.visible;
			})
			.click()
			.then(() => {
				cy.server();
				cy
					.route({ method: 'GET', url: '/api/users/*/attributes/checkout-shipping-details' })
					.as('deleteCartReq1')
					.route({ method: 'GET', url: '/api/countries' }).as('deleteCartReq2')
					.route({ method: 'GET', url: '/api/currencies' }).as('deleteCartReq3')
					.route({ method: 'GET', url: '/api/users/*/wishlist/saved?limit=100' }).as('deleteCartReq4')
					.route({ method: 'GET', url: '/api/users/*/cart/config' }).as('deleteCartReq5')
					.route({ method: 'GET', url: '/api/users/*/cart/estimate' }).as('deleteCartReq6')
				cy.wait(
					[
						'@deleteCartReq1',
						'@deleteCartReq2',
						'@deleteCartReq3',
						'@deleteCartReq4',
						'@deleteCartReq5',
						'@deleteCartReq6'
					],
					{ timeout: 20000 }
				);
			})
			.then(() => {
				cy 
					.xpath(element_myCart_Tab)
					.should(($element) => {
						expect($element).to.contain('My cart');
					});
			})
			.then(() => {
				cy.get(element_loadingAnimation_shipmentPanel, { timeout: 20000 }).should('not.exist');
			})
	);
};

[jennifer-shehane]

cy 
  .get(Cart_Badge_Header)
  .should(($element) => {
    expect($element).to.be.visible;
})

The above code can just be written as

cy 
  .get(Cart_Badge_Header).should('be', 'visible')

@FilepCsaba Your issues with the waits is the same as @gituser3000, the routes should be defined BEFORE the calls to the routes happen.

Workaround

You should NEVER have a cy.wait() directly after a cy.route(). This will NEVER work. The wait will ALWAYS time out. Think of cy.route() as essentially just setting up a LISTENER to listen to those XHR requests.

cy.route('GET', '/thing').as('getThing')
cy.wait('@getThing') // <---- WILL NEVER WORK

It should be like this:

cy.route('GET', '/thing/*').as('getThing')
// <--- Do the thing that triggers the XHR request
// <--- maybe .click() on something or cy.visit() a url
cy.wait('@getThing');

[hakuna0829]

I have similar issue.

I call cy.server() and cy.route() at the top of my code.
When I run cy.wait('@getAppLists') without expect() method , then it works well.
If I add expect() method before call cy.wait('@getAppLists'), then it failed.

I am not sure why.
Do you know its reason?

Here is my code snippet.

beforeEach(() => {
    // runs before each test in the block
    cy.server();
});

it('Create App Test', () => {
    cy.checkSignin(); // this is my customization function. it works without error.

//This part is just issue expect()
    cy.get('div.ant-notification').should($note => {
       expect($note, 'Login Success Notification').to.contain(
          'Login success!',
       );
    });
    
   cy.route('POST', Cypress.env('graphqlUrl'), 'fixture:apps/getApp.json').as('getAppLists');
   cy.wait('@getAppLists');

[FilepCsaba]

@jennifer-shehane Thank you, putting all .route() in before and waiting in tests, works.

[hakuna0829]

@jennifer-shehane
thanks for your message.

I have added cy.server() on the top of my code like following.

beforeEach(() => {
    // runs before each test in the block
    cy.server();
});

And I have to add several routes with same url - Cypress.env('graphqlUrl').

Of course, its request parameters and return json value are different for each other.
I am using alias, too.
But, in this case , when I add all routes in before (), then I can only get return value for last route.

How can I put all routes with same url at same place and get its return value using wait()?

[clock-rick]

The issue I'm seeing related to this is that the wait is occurring after page load due to a redirect. At which point is too late.

Test:

beforeEach(function() {
	cy.loginByCSRF();
	cy.visit('/account/update-email')
});

it('Successfully submit the form', function() {
	cy.server();
	cy.route('POST', '/account/update-email').as('postBody');
	let submittedEmail = '';
	//Calls function in commands.js to generate a random name
	cy.getRandomName().then(function(name) {
		submittedEmail = name;
		cy.get('#new_email').clear().type(name + '@foobar.com');
		cy.get('#new_email_confirm').clear().type(name + '@foobar.com');
	});
	cy.get('#password').clear().type(resetEmail);
	cy.get('.form-action > .button').click().wait('@postBody');
	cy.get('@postBody').then(function(xhr) {
		expect(xhr.status).to.eq(302);
	});
});

Result:

[jennifer-shehane]

@clock-rick I'd probably add an assertion about the url before defining the wait.

cy.get('.form-action > .button').click();
cy.url().should('include', 'account');
cy.wait('@postBody');

[alberto64]

Unfortunately I also have this issue and I do follow some of the suggestions made.

Here is a clean version of my code:

it("Verify Form Work.", function () {
        cy.server();
        cy.route('/server-call/*').as('servercall');
        cy.wait('@servercall'); // This one works!!!

        // Check UI Elements are present
        // Check form attributes 
        // Previous steps take about 5 seconds to complete
      
         cy.get('div').contains('default-name').click(); // Click on a default preset for form
         cy.wait('@survey'); // Wait for the server to retrieve the preset's values for the form.
         // This wait fails ^^^

         // Check that fields filled by the preset are there
});

Here is a snippet of the output:

I'm not too knowledgeable on Cypress, but it looks like after I click there is a delay which I imagine it's cypress giving a bit of time to the DOM to reload and in that small time the API call is made before the cy.wait executes.

The reason I do this is because this call that I'm waiting for fills the form that I'm trying to validate and if I don't wait for it to resolve those assertions fail because the data is not there yet.
Example:
Before Call

   After Call

[jennifer-shehane]

We were provided one example of a route definition never catching during cy.wait when the request was clearly made here, but marketly the request never resolves: #3427 (comment)

[basvanlaarhoven]

The problem is that sometimes the Request is exactly the same exempt for the request body (which I both want to catch)

So say create a route

Cy.route('POST','https://Iamanawesomeurl.com').as('post1')

I then setup my cy.wait('@post1').

But the application sends 2 post requests to https://Iamanawesomeurl.com

reqbody 1 {'submit':false}
reqbody 2 {'submit:true'}

Now I can only cath the second one by adding a route just before the second request.

Cy.route('POST','https://Iamanawesomeurl.com').as('post1')
cy.click(fireroute)
cy.wait('@post1').then((xhr)=>{
writefilebody as body 1
})
Cy.route('POST','https://Iamanawesomeurl.com').as('post2')
cy.wait('@post2').then((xhr)=>{
writefilebody as body 2
})

This seems to me the only way to catch both instances? isn't that correct?

[sarangkh]

Cy.route and then wait for that request to complete - Is this the only way to add synchronised wait in cypress? what if there is no xhr request getting captured but still application has some wait time(some business logic layer computations) and after that dry wait (variable amount of time, depends on data provided and user load ) time xhr gets triggered and one button gets change from in progress to completed. Unable to find way to ass wait in this scenario.

[thril]

@clock-rick I'd probably add an assertion about the url before defining the wait.

cy.get('.form-action > .button').click();
cy.url().should('include', 'account');
cy.wait('@postBody');

@jennifer-shehane What is the reasoning behind adding an assertion before the wait?

[ifs-medardegue]

I experienced the same issue since last week and for some obscure reasons, adding a timeout to the wait did the trick. In the original post, adding a responseTimeout like this

cy.wait("@updateAttachment", {responseTimeout: 15000});

did the trick.

The error message is misleading. So is the fact that the WAIT appears after the request in the console log.
"cy.wait() timed out waiting 5000ms for the 1st request to the route: updateAttachment. No request ever occurred."
makes it sound like the request was never fired after the wait() call. In fact, the request did not finish before the 5000ms, that's why it failed. Adding a greater responseTimeout solved my issue.

Is cypress in fact catching response return instead of entire cycle (send/receive)?

[ldiary]

I think I finally found a reproducible example. Github's login response is very fast such that this test always fail on me.

describe('Capturing data sent by the form via POST method', () => {
    before( () => {
        Cypress.config('baseUrl', 'https://github.com');
        cy.server();
        cy.route({
            method: 'POST',
            url: '/session'
        }).as('githubLogin');
    });
    it('should capture the login and password', () => {
        cy.visit('/login');
        cy.get('#login_field').type('username');
        cy.get('#password').type('password');
        cy.get('input[value="Sign in"]').click();

        cy.wait('@githubLogin').then(  xhr => {
            cy.log(xhr.responseBody);
            cy.log(xhr.requestBody);
            expect(xhr.method).to.eq('POST');
        })
    });
});

Reddit is not as fast as Github so a similar test always pass.

describe('Capturing data sent by the form via POST method', () => {
  before(() => {
    Cypress.config('baseUrl', 'https://www.reddit.com');
    cy.server();
    cy.route({
      method: 'POST',
      url: '/login'
    }).as('redditLogin');
  });
  it('should capture the login and password', () => {
    cy.visit('/login');
    cy.get('#loginUsername').type('username');
    cy.get('#loginPassword').type('password');
    cy.get('button[type="submit"]').click();

    cy.wait('@redditLogin').then(xhr => {
      cy.log(xhr.responseBody);
      cy.log(xhr.requestBody);
      expect(xhr.method).to.eq('POST');
    })
  });
});

I was hoping to capture this GitHub login request.

This is how the test pass in Reddit.
https://i.stack.imgur.com/vKwAj.png

The result is the same even if I use:

cy.visit('/login', {
  onBeforeLoad: (win) => {
    delete win.fetch;
  }
});

[timharsch]

I came here trying to figure out why wait fails for me. I think I have this problem too because I'm watching the steps of the test and the network tab in the browser and I can see my XHR is made there, but I can't catch it with a wait no matter where in my test steps I move the wait call. It seems to me, this issue should be reopened based on the small and self contained example above #2700 (comment).

[iozzyi]

Also having this issue! The request is not captured by cypress so it's not mocked and the live API is called instead.

There is now a reproducible example so the thread should be reopened?

[gabrielgt3k]

I have the same issue :/

[Neurrone]

Another vote here for the issue to be reopened, this just costed me half of a working day.

[ghost]

I was having this same issue just now. My issue was that I was using fetch instead of XHR

in my cypress.json I had to add "experimentalFetchPolyfill":true and everything seemed to work with cy.route() and cy.wait()

I tried using cy.route2 with experimentalNetworkStubbing enabled and that didn't work.

You should see your network requests appear in the steps pane. If they don't, you might not have the Fetch polyfill enabled.

as @jennifer-shehane mentioned the order of ops is:

• define cy.server() somewhere (in your before or in your command you want to sniff network requests on)
• define your cy.route(<METHOD>, <URLMatcher>, <Options>).as("mySpecialAlias") before invoking the click event or button that triggers your ReST call
• Do your steps to invoke the API
• Define cy.wait(["@myAlias",...,"@myOtherAlias"]) <-- this handles multiple calls in one waiter with similar behavior to Promise.all()

hope this helps!

[pelssersconsultancy]

Experiencing the same issue. Please reopen the issue

[scridget]

+1 - we see this pretty frequently and have to workaround with a bunch of assertions that elements on the page exist as a result of a route rendering.

Code example:

it('can be loaded', () => {
        cy.server();
        cy.route('GET', '/sales').as('getSales');
        cy.siteSignIn('test-user');
        cy.visit('/account/sales');
        cy.wait('@getSales');
        cy.get('#accountDashboardApp').should('be.visible');
        cy.get('.screen-sales').should('be.visible');
        cy.get('.sales').should('be.visible');
        cy.get('.tips').should('be.visible');
        cy.fullRegressionSnapshot('Sales Dashboard Page');
});

Yet, often this fails when the getSales route starts and finishes rendering before the wait call starts. If we take out the wait because presumably the route renders quickly enough, we get flaky results because the route is not always fast enough for the subsequent snapshot.

When this fails, we see the getSales route has already completed before cypress begins waiting for the route. To answer some troubleshooting questions from earlier in this thread; we are calling cy.server() and defining the route first thing in the test and the route endpoint does not change, it is always the same.

We need a reliable way to wait for a request to finish loading, whether it's fast or slow. It'd be nice if we could have some kind of listener or way to call a wait before the command that will trigger the request, so it's for certain waiting before the request starts.

[pakhilov]

I have the same problem

[jennifer-shehane]

While we were never given a clear reproducible example of this bug (I was never able to reproduce from #2700 (comment) either), I believe this was likely occuring for some people. There were some documented cases of similar bugs here: #5999

Resolution

We suggest migrating cy.route() to use cy.intercept(). cy.route() will be deprecated in a future version. Moving to this new command resolved many documented reproducible examples of 'wait' never catching a route in #5999 and may resolve your issue also.

If you're experiencing a bug after upgrading to cy.intercept(), please open a new issue with a fully reproducible example that we can run.

[OsidAbu-alrub]

@jennifer-shehane

Steps to reproduce:
1- Have a function like the one below:

callApi() {
        cy.intercept("POST", GetNetCoreUrlPrefix("example/url")).as("ApiCall");
        // DO STUFF TO CALL API...
        cy.wait("@ApiCall");
    }

2- Call it once
3- Call it another time in the same testcase

The cy.wait("@ApiCall") will think that the API has been already called in the second function call and the code will continue running (because of the first time we called the function).
Im assuming it has something to do with some flag that's being saved.

[mike2tango]

@jennifer-shehane - why did we close this issue? It does seem like a memory issue to me - though I am on Cypress v2.1.0.

Many people have problems but you are simply closing issues, cool

[Noha-ElAbrouki]

some problem here

[jsdevtom]

Because Cypress doesn't use promises, you can't use Promise.all to accommodate potential race conditions with fast API calls:

      // Does not work
      await Promise.all([
            cy.get(selectors.editButton).click(),
            cy.wait('@fastApiCallExample'),
      ]);

Does anyone know of a similar capability that Cypress does have?

[nagash77]

@jsdevtom Check out our community chat, it can be helpful for debugging or answering questions on how to use Cypress.

[vukobrat]

@jennifer-shehane - why did we close this issue? It does seem like a memory issue to me - though I am on Cypress v2.1.0.

Many people have problems but you are simply closing issues, cool

lol, so unprofessional