Cypress - How to wait for XHR request

Question

I'm a newbie to cypress, so please be patient with me. ;-) 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. Any help or hints are appreciated:

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:

Thanks for any help.

Answer 1

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.