Cypress拦截REST请求时如何测试按钮点击后的disabled属性变化

解决方案 #

之前的写法报错是因为Cypress不允许在intercept的请求/响应回调内部调用cy开头的命令，这类回调的执行逻辑和Cypress的命令队列运行机制冲突。而固定延迟的方案确实不稳定，容易因为测试环境性能波动出现用例偶发失败。

更可靠的实现思路是主动hold住API响应，等完成按钮禁用状态的断言后再手动放行响应，全程没有多余的固定等待时间，完全事件驱动，稳定性拉满：

// 声明变量存储响应发送的控制权
let sendResponse;

// 配置接口拦截，暂不返回响应
cy.intercept('POST', '/api/item/1', (req) => {
  req.continue((res) => {
    // 将响应发送逻辑交给外部变量控制
    return new Cypress.Promise(resolve => {
      sendResponse = () => {
        res.send(200, { name: 'aa' });
        resolve();
      };
    });
  });
}).as('submitReq');

// 点击按钮触发提交
cy.findByRole('button', { name: /button0/i }).click();

// 此时响应尚未返回，直接断言按钮处于禁用状态
cy.findByRole('button', { name: /button0/i })
  .should('exist')
  .and('have.attr', 'disabled');

// 断言完成后手动放行响应
cy.then(() => sendResponse());

// 可选补充：等待请求完成后断言按钮恢复可用
cy.wait('@submitReq');
cy.findByRole('button', { name: /button0/i })
  .should('not.have.attr', 'disabled');

如果还需要验证按钮的禁用状态是在请求发出后立刻设置的，也可以把断言逻辑放在拦截的请求回调之后、响应返回之前的时间窗口，不需要做任何时间相关的妥协。

内容的提问来源于stack exchange，提问作者eth4io