赛普拉斯-如何等待XHR请求

Question

我是cypress的新手，所以请耐心等待我。 ;-) 我确定这是一个简单的问题，并且我已经阅读了cypress的文档，但是在我的cypress测试中似乎还是有问题。 当我单击要测试的页面的另一种语言时，我想等待xhr请求完成。 当我使用wait(5000)时，它可以工作，但我认为，等待5年以上的xhr请求完成是更好的方法。 这是我的代码。任何帮助或提示，请感激：

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

您应该这样做：

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

Answer 2

您确定此行正确吗？否则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。