单击按钮后，赛普拉斯等待 API

Question

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

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

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

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

当在柏树中按下按钮时，它会运行 3 api 调用，这些调用按预期返回，但是查看柏树文档没有简单的方法，除非我使用内联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更改为 just 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

听起来你会想要等待路线。 像这样的东西：

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

Answer 2

您可以使用超时参数，而不是使用.wait 。 这样，如果它完成得更快，您就不必等待。

cy.get('button').contains('Filter', {timeout: 15000}).click()

这在此处的官方文档中被称为选项参数之一。

Answer 3

cy.server()和cy.route()在Cypress 6.0.0中被弃用 在未来的版本中，将删除对cy.server()和cy.route()的支持。 考虑改用cy.intercept() 。

这对我有用...

例如：-看屏幕截图

    cy.intercept('GET', 'http://localhost:4001/meta').as('route');
    cy.get(':nth-child(2) > .nav-link').click();
    cy.contains('Filter');
    cy.wait(['@route'], { responseTimeout: 15000 });

Answer 4

尝试这个：

    cy.contains('button', 'Save').click();
    cy.get('[data-ng-show="user.manage"]', { timeout: 10000 }).should('be.visible').then(() => {
      `cy.get('[data-ng-show="user.manage"]').click();
   })