CODEWITHSUNDEEP
javascriptcypress
dns_nx
dns_nx

Reputation: 3933

Cypress - How to wait for XHR request

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:

enter image description here

Upvotes: 9

Views: 8141

Answers (2)

Boyd K.
Boyd K.

Reputation: 36

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.com

Also: I prefer to include the cy.server() and cy.route() command 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.

Upvotes: 2

Dima
Dima

Reputation: 89

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
});

Upvotes: 0

Related Questions