"Cypress.io - 断言没有对 URL 的 XHR 请求？"

Question

使用 cypress.io 进行测试时，是否有一种好方法可以断言没有对给定 URL 发出 XHR 请求？

我想断言单击“保存”按钮时会添加一个新的 foo，但单击“取消”按钮时不会添加新的 foo。

像这样的东西：

cy.route('POST', '/foos').as('postFoo');
cy.get('.cancel-button').click();
cy.route('@postFoo').should('not.have.been.called'); // (magic imaginary syntax!)

Answer 1

您可以重新设置route的别名并将其onRequest行为更改为 throw； 然而，断言事情没有发生通常更糟糕，因为它们是不确定的。 在继续之前，您应该等待错误多久？ ：

cy.route({
  method: 'POST',
  url: '/foos',
  onRequest: () => {
    throw new Error('Whoops')
  }
})
cy.get('.cancel-button').click();
cy.wait(1000)  // give it one second to throw, then move on

像这样的断言只会给你的测试增加不必要的时间。 这种类型的测试被称为Cypress Docs 中提到的条件测试

Answer 2

我认为您可以比较cy.state('routes')并检查状态。

let routes = cy.state('routes');
// check each URL and if it has "/foos" in it, add it to an array to test
// this step is just an example, there are plenty of different ways to approach this
let foosRoutes = [];
for (let route in routes) {
  for (let req in routes[route].requests) {
    let reqUrl = routes[route].requests[req].request.url;
    // test each URL for "/foos" and if it has it, add the URL to the array
    if((/\/foos/).test(reqUrl)) {
      fooRoutes.push(reqUrl);
    }
  }
};
expect(foosRoutes).to.have.property("length", 0);

或者，如果您以不同的方式挖掘cy.state('routes') ，也许您可​​以通过postFoo的alias进行postFoo ，然后确保其requests为空或您期望的计数。

Answer 3

断言：

.should('not.have.been.called')

不能用于检查是否已发出网络请求。 它用于 cy.spy()

您的 hack 有效，但您也可以尝试：

cy.intercept('POST', '/foos').as('postFoo');
cy.get('.cancel-button').click();
cy.wait('@postFoo').should('not.exist'); // (magic imaginary syntax!)