当`cy.wait()`超时时，我该如何操作？

Question

这段代码用于等待响应到来，并在其到达时执行一些操作。如果想要在网络请求等待超时时也执行某些操作，应该怎么办？

cy.wait('@login').then((interception) => {
        const token = interception.response.body.token
        Cypress.env('ACCESS_CODE', token)
    });

Dai · Answer

实现这一需求在 Cypress 中并不直接支持，因为 cy.wait() 方法本身并不提供条件结果处理的功能。但是，我们可以利用一个未记录的 cy.get() 特性来获取所有已别名的请求调用，并通过检查返回数组的长度来决定后续的操作：

cy.intercept('/foo').as('foo');
// 触发 '/foo' 请求的 Cypress 代码
cy.get('@foo.all').then((foo) => {
  if (foo.length > 0) {
    // 如果请求被发出，执行此代码块
  } else {
    // 如果请求没有发出，执行此代码块
  }
});

然而，cy.get('@alias.all') 并不具备等待或重试机制，所以如果请求在调用 cy.get() 之前已被触发但尚未完成，该请求可能不会出现在返回的数组中。

面对这种情况，我们可以通过捕获 Cypress 错误来处理：

cy.on('fail', (err, runnable) => {
  if (err.message.includes('route: `foo`')) { // 根据错误信息判断
    // 如果请求未发出，执行此处代码
    return false; // 返回 false 确保测试在此步骤不失败
  }
  throw err; // 如果前面没有返回 false，则抛出错误，确保其他测试失败依然能被捕捉
});

需要注意两点：

使用 cy.on() 而非 Cypress.on() 可以将事件监听限制在特定测试中。如果希望在整个测试套件中应用此变更，应在支持文件中使用 Cypress.on()。
包含 return false 和 throw err 确保测试只对预期的失败不报错，而对于未预期的失败仍会正常失败。

尽管如此，强烈建议尽量避免上述做法。虽然可以实现，但理想的解决方案是编写确定性和可复现性的测试或应用程序。在理想情况下，关于请求是否发出不应存在不确定性。如果这是对第三方资源的调用，可能建议通过存根（stub）或模拟（mock）整个流程来消除这种不确定性，并针对第三方与应用之间的集成有专门的集中测试。

Bruno · Answer

在 cy.wait('@alias') 后直接附加 .catch() 是不可行的，但你可以参考这个关于请求轮询的示例，并稍作修改来达到目的。

以下示例中，cy.catchAlias() 代替了 cy.wait('@alias') 来轮询拦截器。

测试中有两个拦截器，但只有第一个会被触发。

对于“未发生”的拦截，返回 null 而不是让测试失败，你可以根据返回值来执行失败时的动作。

Cypress.Commands.add('catchAlias', (alias, { timeout = Cypress.config('defaultCommandTimeout'), start = Date.now() }) => {
  if (start + timeout < Date.now()) return null;
  cy.get(alias, { log: false }).then(interception => {
    if (interception?.response) return interception;
    cy.catchAlias(alias, { timeout, start });
  });
});

// 设置拦截器
cy.intercept('/todos/1').as('api1');
cy.intercept('/todos/2').as('api2');

// 触发API调用（仅第一个）
cy.window().then(win => {
  win.fetch('https://jsonplaceholder.typicode.com/todos/1');
});

// 检查第一个
cy.catchAlias('@api1', { timeout: 2000 })
  .should(interception => {
    expect(interception.response.body.title).to.eq('delectus aut autem');
  });

// 检查第二个
cy.catchAlias('@api2', { timeout: 2000 })
  .should('eq', null);

cypress-wait-if-happens 插件

Gleb Bahmutov 开发了一个插件cypress-wait-if-happens，提供了更多选项以实现相同功能。

如果请求在超时时间内未发生，则返回 undefined。

import 'cypress-wait-if-happens';
cy.waitIfHappens({
  alias: '@users',
  timeout: 100,
  lastCall: true,
  yieldResponseBody: true,
})
  // 我们应该得到包含4个用户的列表
  // 因为那是实际发生的最后一次调用
  .should('have.length', 4);