Cypress 中正确实现异步轮询 API 的方法-js教程-PHP中文网

Cypress 中正确实现异步轮询 API 的方法

本文详解如何在 Cypress 测试中安全实现带重试机制的异步 API 轮询，避免“mixing async and sync code”错误，重点解决递归调用未正确链式返回、cy.wait() 与同步逻辑混用、以及循环触发多重递归等常见陷阱。

本文详解如何在 cypress 测试中安全实现带重试机制的异步 api 轮询，避免“mixing async and sync code”错误，重点解决递归调用未正确链式返回、`cy.wait()` 与同步逻辑混用、以及循环触发多重递归等常见陷阱。

在 Cypress 中编写轮询逻辑时，一个常见误区是试图将原生 JavaScript 异步/递归模式（如 setTimeout 或直接调用函数）直接套用到 Cypress 命令链中。Cypress 的核心原则是：所有命令（如 cy.request()、cy.wait()、cy.then()）必须显式链式返回，且不可在 .then() 回调中混合返回同步值与异步命令。你遇到的 CypressError: cy.then() failed because you are mixing up async and sync code 正是这一原则被违反的典型表现。

问题根源有三：

同步返回 response 对象：return response 是纯 JS 同步值，而 Cypress 期望的是一个可链式消费的 Cypress Chainable（如 cy.wrap(response)）；
for 循环内误触发多次递归：当 items 包含多个非目标项时，else 分支会在每次循环中重复调用 pollStatusReason()，导致 7 次并发递归，严重破坏命令队列；
递归调用未被 cy.then() 包裹：pollStatusReason(...) 是普通函数调用，未通过 Cypress 命令链调度，导致其内部的 cy.request() 和 cy.wait() 脱离当前执行上下文。

✅ 正确做法是：始终返回 Cypress Chainable，并用 cy.then() 显式调度下一次轮询。以下是重构后的健壮轮询函数：

// cypress/support/commands.js 或 utils/pollStatusReason.js
function pollStatusReason(id, expectedReason, attempts = 0, maxAttempts = 30) {
  const url = `http://someurl/${id}`;

  if (attempts >= maxAttempts) {
    throw new Error(`Failed to find item with reason '${expectedReason}' after ${maxAttempts} attempts`);
  }

  return cy.request({
    method: 'GET',
    url,
    failOnStatusCode: false // 避免 4xx/5xx 自动失败，便于自定义重试逻辑
  }).then((response) => {
    // 状态码非 200 → 立即重试（不等待）
    if (response.status !== 200) {
      cy.log(`HTTP ${response.status} received, retrying... (${attempts + 1}/${maxAttempts})`);
      return cy.then(() => pollStatusReason(id, expectedReason, attempts + 1, maxAttempts));
    }

    // 解析响应体，使用 Cypress 内置的 Lodash 方法高效查找
    const items = response.body.items || [];
    const foundItem = Cypress._.find(items, { reason: expectedReason });

    if (foundItem) {
      // ✅ 关键：用 cy.wrap() 将原始 response 包装为 Chainable，支持后续 .then() 链式消费
      return cy.wrap(response);
    } else {
      cy.log(`Reason '${expectedReason}' not found. Retrying... (${attempts + 1}/${maxAttempts})`);
      // ✅ 关键：用 cy.wait() + cy.then() 确保等待完成后再发起下一次请求
      return cy.wait(5000).then(() => pollStatusReason(id, expectedReason, attempts + 1, maxAttempts));
    }
  });
}

export default pollStatusReason;

在测试中使用时，确保完整链式调用：

describe('Get items', () => {
  it('gets items with reason "correct"', () => {
    pollStatusReason('123', 'correct')
      .then((response) => {
        // ✅ 此处 response 是 Cypress Chainable 解包后的原始对象
        expect(response.status).to.eq(200);
        const item = Cypress._.find(response.body.items, { reason: 'correct' });
        expect(item).to.exist;
        cy.log('✅ Found target item:', item);
      })
      .catch((error) => {
        // 可选：捕获超时或网络错误
        throw error;
      });
  });
});

? 关键注意事项：

永远不要在 .then() 中 return 原始 JS 值（如 response, true, undefined）；若需传递数据，请用 cy.wrap(value)；
避免在循环中调用 Cypress 命令：应先用 Cypress._.find() / .some() 等纯函数判断条件，再统一处理；
递归必须包裹在 cy.then() 中：保证每次调用都进入 Cypress 命令队列，而非 JS 调用栈；
推荐设置 failOnStatusCode: false：便于手动控制非 200 状态的重试逻辑；
考虑使用 cy.intercept() + cy.wait('@alias') 替代轮询：若后端支持事件驱动（如 WebSockets 或 Server-Sent Events），轮询并非最佳实践。