javascript - 点击按钮后 Cypress 等待 API

Question

我制作了一个 React 应用程序，一切都运行良好，我现在正在使用 Cypress 编写一些端到端测试。

React 应用程序都在同一个 url 上工作，它没有任何路由，来自应用程序内部的 api 调用是通过按钮单击来处理的。

该应用程序的基础是最终用户选择一些选项，然后按过滤器查看依赖于所选选项的一些图表。

cy.get('button').contains('Filter').click()

当在 cypress 中按下按钮时，它会运行 3 个按预期返回的 api 调用，但是查看 cypress 文档没有简单的方法，除非我使用内联 cy.wait(15000)这并不理想，因为有时它们返回得更快，有时它们返回更慢，具体取决于所选选项。

编辑 1
我试过使用服务器和路由:

cy.server({ method: 'GET' });
cy.route('/endpoint1*').as('one')
cy.route('/endpoint2*').as('two')
cy.route('/endpoint3*').as('three')
cy.get('button').contains('Filter').click()
cy.wait(['@one', '@two', '@three'], { responseTimeout: 15000 }) 

这给了我错误:

CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'one'. No request ever occurred.

经进一步调查

从 responseTimeout 更改只需 timeout修复了错误。

cy.server({ method: 'GET' });
cy.route('/endpoint1*').as('one')
cy.route('/endpoint2*').as('two')
cy.route('/endpoint3*').as('three')
cy.get('button').contains('Filter').click()
cy.wait(['@one', '@two', '@three'], { timeout: 15000 }).then(xhr => {
  // Do what you want with the xhr object
}) 

Answer 1

听起来你会想要 wait for the routes .像这样的东西:

cy.server();
cy.route('GET', '/api/route1').as('route1');
cy.route('GET', '/api/route2').as('route2');
cy.route('GET', '/api/route3').as('route3');

cy.get('button').contains('Filter').click();

// setting timeout because you mentioned it can take up to 15 seconds.
cy.wait(['@route1', '@route2', 'route3'], { responseTimeout: 15000 });

// This won't execute until all three API calls have returned
cy.get('#something').click();