javascript - Cypress - 如何等待 XHR 请求

Question

我是 cypress 的新手，所以请耐心等待我。 ;-)
我确定这是一个简单的问题，我已经阅读了 cypress 的文档，但我的 cypress 中似乎仍有问题测试。
我想等待 xhr当我单击要测试的页面的其他语言时，请求完成。
它有效，当我使用 wait(5000) ，但我认为，有更好的方法来等待 xhr请求完成比修复等待 5 秒。
这是我的代码。任何帮助或提示表示赞赏:

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

最后一次检查

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

不成功，因为 xhr请求尚未完成。 xhr当点击图标完成时，请求被触发:

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

这里是 xhr 请求的图像，如果这有助于找到错误:



谢谢你的帮助。

Answer 1

你确定这条线是正确的吗？否则 cy.wait 将无法按您的意愿运行。

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

我期待类似的东西

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

您可以通过开发人员工具(Chrome 中的 F12)查找它的路线。
转到网络以监控打开页面时加载的 XHR 类型。

Find out request URL and Method - example with bing.com

还:
我更喜欢在 beforeEach 中包含 cy.server() 和 cy.route() 命令。
然后你只需要测试本身的 cy.wait() 。
见 https://docs.cypress.io/guides/references/best-practices.html#2-Run-shared-code-before-each-test了解更多信息。