如何用Cypress测试登录按钮API请求时的连续点击锁定功能？

核心问题是Cypress默认会等待所有异步请求完成，所以要手动拦截并控制登录API的响应时机，才能在请求pending时测试按钮的锁定状态。以下是具体实现步骤：

1. 拦截登录API请求，暂停响应 #

首先用cy.intercept拦截登录接口（根据你的NextAuth配置，通常是/api/auth/signin/credentials），并给它一个别名方便后续操作：

cy.intercept('POST', '/api/auth/signin/credentials').as('loginRequest');

2. 触发登录请求，进入pending状态 #

填写账号密码并点击登录按钮，此时请求会被拦截并处于pending状态：

cy.get('#email-input').type('test-user@example.com');
cy.get('#password-input').type('test-password');
cy.get('button[type="submit"]').click();

3. 验证按钮的锁定状态 #

此时立即检查按钮的pointer-events属性是否为none，确认按钮处于锁定状态：

cy.get('button[type="submit"]').should('have.css', 'pointer-events', 'none');

4. 测试重复点击不会触发新请求 #

用force: true强制点击按钮（因为pointer-events: none会阻止默认的Cypress点击），然后验证登录请求只被触发了一次：

// 强制点击按钮
cy.get('button[type="submit"]').click({ force: true });

// 等待请求完成后，检查请求次数
cy.wait('@loginRequest').then((interception) => {
  expect(interception.allRequests.length).to.equal(1);
});

可选：手动完成请求（如果需要测试后续流程） #

如果还要测试登录成功后的页面跳转，可以在验证完锁定状态后，手动让请求完成：

cy.intercept('POST', '/api/auth/signin/credentials', {
  statusCode: 200,
  body: { success: true }
}).as('loginRequest');
// 或者用之前的拦截对象，调用respond方法：
// cy.get('@loginRequest').invoke('respond', { statusCode: 200 });

替代测试思路 #

如果不想依赖真实API请求，也可以直接模拟按钮的loading状态：

• 手动给按钮添加pointer-events: none样式，验证点击无反应；
• 或者触发页面的loading状态（比如调用对应的state setter），再验证按钮属性。但这种方式不如结合真实请求的测试场景全面。

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