javascript - Cypress - How to wait for XHR request - Stack Overflow

admin管理员组

文章数量:1387390

I'm a beginner to Cypress. I'm sure it is a simple question and I already read the documentation of Cypress, but something still seems to wrong in my Cypress test. I want to wait for an xhr request to be finished, when I click on a different language of the page I want to test.

It works, when I use wait(5000), but I think, there is a better way to wait for the xhr request to be finished than fix wait 5 secs. This is my code:

describe('test',() => {
    it('should open homepage, page "history", click on English language, click on German language',() => {
        cy.server();
        cy.route('POST','/ajax.php').as('request');
        cy.visit('http://localhost:1234/history');
        cy.wait('@request');
        cy.get('div[class="cursorPointer flagSelect flag-icon-gb"]').click({force:true});
        cy.route('POST','/ajax.php').as('request');
        cy.wait(['@request']);
        //cy.wait(5000); // <- this works, but seems to be not the best way
        cy.get('h2').should(($res) => {
            expect($res).to.contain('History');
        })
        cy.get('.dataContainer').find('.container').should('have.length', 8);
    });
});

The last check

cy.get('.dataContainer').find('.container').should('have.length', 8);

is not successful, because the xhr request is not yet finished. The xhr request is being fired, when the click on the icon is done:

cy.get('div[class="cursorPointer flagSelect flag-icon-gb"]').click({force:true});

Here an image of the xhr request, if that helps to find the error:

I'm a beginner to Cypress. I'm sure it is a simple question and I already read the documentation of Cypress, but something still seems to wrong in my Cypress test. I want to wait for an xhr request to be finished, when I click on a different language of the page I want to test.

It works, when I use wait(5000), but I think, there is a better way to wait for the xhr request to be finished than fix wait 5 secs. This is my code:

describe('test',() => {
    it('should open homepage, page "history", click on English language, click on German language',() => {
        cy.server();
        cy.route('POST','/ajax.php').as('request');
        cy.visit('http://localhost:1234/history');
        cy.wait('@request');
        cy.get('div[class="cursorPointer flagSelect flag-icon-gb"]').click({force:true});
        cy.route('POST','/ajax.php').as('request');
        cy.wait(['@request']);
        //cy.wait(5000); // <- this works, but seems to be not the best way
        cy.get('h2').should(($res) => {
            expect($res).to.contain('History');
        })
        cy.get('.dataContainer').find('.container').should('have.length', 8);
    });
});

The last check

cy.get('.dataContainer').find('.container').should('have.length', 8);

is not successful, because the xhr request is not yet finished. The xhr request is being fired, when the click on the icon is done:

cy.get('div[class="cursorPointer flagSelect flag-icon-gb"]').click({force:true});

Here an image of the xhr request, if that helps to find the error:

• javascript
• cypress

Share Improve this question Follow edited Jan 11, 2023 at 0:18 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jan 23, 2020 at 6:23 dns_nxdns_nx 3,94355 gold badges4545 silver badges7777 bronze badges 2

• At what point is the test not successful? Does it fail on the cy.wait(['@request']) or does it fail on cy.get('h2').should(($res) => {? Have you tried running the test headfull? The testrunner provides information of which call has been mocked and got an alias, and it shows for which alias it waits for. Those two point can give you more information. – Mr. J. Commented Jan 23, 2020 at 8:26
• It fails at cy.get('.dataContainer').find('.container').should('have.length', 8);, because the data is not loaded at this time. It does not wait for the request to plete. – dns_nx Commented Jan 23, 2020 at 10:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Are you sure that this line is correct? Otherwise the cy.wait won't function as you want.

cy.route('POST','/ajax.php').as('request');

I expect something like

cy.route('GET','/endpoint').as('request');

You can lookup what route is it via developer tools (F12 in Chrome). Go to network to monitor what kind of XHRs load when you open your page.

Find out request URL and Method - example with bing.

Also: I prefer to include the cy.server() and cy.route() mand in the beforeEach. Then you only need the cy.wait() in the test itself. See https://docs.cypress.io/guides/references/best-practices.html#2-Run-shared-code-before-each-test for more information about that.

you should do like that:

describe('test',() => { //no here async mode
    it('should open homepage, page "history", click on English language, click on German language', async () => { //but here
        cy.server();
        cy.route('POST','/ajax.php').as('request').as('requestToWait); // as-construction
        const requestToWait = await cy.wait('@requestToWait');//here we are waiting and getting response object
        // any other code
});

本文标签： javascriptCypressHow to wait for XHR requestStack Overflow