如何在Cypress测试中验证API调用的精确数量与预期一致

要确保只有指定的API调用被触发，你可以通过收集所有实际拦截到的请求，再与预期列表做精准对比来实现，具体步骤如下：

方法一：手动收集请求信息 #

1. 初始化数组存储实际调用，同时拦截目标API并记录关键请求信息

   const expectedCalls = [
     { url: '/api/user', method: 'POST', body: { name: 'test' } },
     { url: '/api/orders', method: 'GET' }
   ];
   const actualCalls = [];
   
   // 拦截API，将请求的关键信息存入数组
   cy.intercept('**/api/**', (req) => {
     actualCalls.push({
       url: req.url,
       method: req.method,
       body: req.body
     });
   }).as('api');
   

2. 执行触发API的操作（如点击按钮、页面跳转等）

   cy.get('#submit-action').click();
   

3. 等待请求完成后，对比实际与预期列表

   // 若已知预期调用次数，可多次调用cy.wait确保请求完成
   cy.wait(['@api', '@api']); 
   // 或短时间等待，确保没有额外延迟的请求
   // cy.wait(1000);
   
   // 断言：实际调用与预期完全匹配（数量、顺序、内容一致）
   expect(actualCalls).to.deep.equal(expectedCalls);
   

方法二：利用Cypress拦截对象的all属性 #

无需手动维护数组，直接通过@api.all获取所有拦截到的请求：

const expectedCalls = [
  { url: '/api/user', method: 'POST', body: { name: 'test' } },
  { url: '/api/orders', method: 'GET' }
];

cy.intercept('**/api/**').as('api');

// 触发API操作
cy.get('#submit-action').click();

// 等待所有预期的请求完成
cy.wait(['@api', '@api']);

// 获取所有拦截请求并提取关键信息，再与预期对比
cy.get('@api.all').then((interceptedCalls) => {
  const actualCalls = interceptedCalls.map(call => ({
    url: call.request.url,
    method: call.request.method,
    body: call.request.body
  }));
  expect(actualCalls).to.deep.equal(expectedCalls);
});

注意事项 #

• 预期列表expectedCalls的结构必须与实际提取的字段完全一致（包括字段名、数据类型）
• 若调用顺序不影响结果，可使用expect(actualCalls).to.have.members(expectedCalls)替代deep.equal，忽略顺序只校验内容
• 若存在异步延迟的请求，需调整cy.wait的时间或次数，确保所有请求都被拦截到

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