Cypress验证Segment API调用次数的GitHub Actions问题排查

问题概述 #

应用集成Segment后，需要通过Cypress E2E测试验证Segment API的调用次数，确保每个事件仅触发一次。本地测试正常通过，但在GitHub Actions中执行时，出现以下超时错误：

AssertionError: Timed out retrying after 10000ms: Expected to find element: eventAlias.all, but never found it.

相关代码如下：

自定义验证调用次数的Cypress命令 #

Cypress.Commands.add(`verifyCallCount`, (alias, expectedNumberOfCalls) => {
  const resolvedAlias = alias[0] === `@` ? alias.substring(1) : alias;

  cy.get(`${resolvedAlias}.all`, { timeout: 20000 }).then((calls) => {
    cy.wrap(calls.length).should(`equal`, expectedNumberOfCalls);
  });
});

测试执行代码 #

cy.wait(`@${eventAlias}`, { timeout: 20000 })
  .then((interception) => {
    return JSON.parse(interception.request.body);
  })
  .then(() => cy.verifyCallCount(eventAlias, 1));

API拦截配置 #

beforeEach(() => {
  cy.intercept('POST', 'https://api.segment.io/v1', (req) => {
    const body = JSON.parse(req.body);

    if (body.hasOwnProperty('type') && body.type === SampleEvent) {
      req.alias = eventAlias;
    }
  });
});

问题原因与修复方案 #

GitHub Actions环境的网络或应用响应速度通常慢于本地，原代码中手动拼接别名的方式不符合Cypress官方规范，且依赖内部状态存储，在慢环境下容易超时。

修复方案1：修正自定义命令的别名获取逻辑 #

使用Cypress官方支持的@alias.all语法，统一别名格式并延长超时时间适配CI环境：

Cypress.Commands.add(`verifyCallCount`, (alias, expectedNumberOfCalls) => {
  // 统一别名格式为@xxx.all
  const targetAlias = alias.startsWith('@') ? `${alias}.all` : `@${alias}.all`;
  cy.get(targetAlias, { timeout: 25000 }).should('have.length', expectedNumberOfCalls);
});

修复方案2：简化测试逻辑，无需自定义命令 #

直接在cy.wait之后验证调用次数，减少中间环节：

cy.wait(`@${eventAlias}`, { timeout: 25000 })
  .then(() => {
    cy.get(`@${eventAlias}.all`).should('have.length', 1);
  });

额外优化：全局延长CI环境超时时间 #

在cypress.config.js中增加全局超时配置，适配GitHub Actions的慢环境：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    defaultCommandTimeout: 25000,
    requestTimeout: 25000,
    responseTimeout: 25000,
  },
});

其他验证API调用次数的替代方法 #

• 使用cy.intercept的times参数
  若明确事件只会触发一次，可直接在等待时指定times参数，Cypress会自动验证调用次数：

  beforeEach(() => {
    cy.intercept('POST', 'https://api.segment.io/v1', (req) => {
      const body = JSON.parse(req.body);
      if (body.type === SampleEvent) {
        req.alias = eventAlias;
      }
    });
  });
  
  // 等待指定次数的调用
  cy.wait(`@${eventAlias}`, { timeout: 25000, times: 1 });
  

• 手动跟踪调用计数
  在拦截回调中维护计数器，测试末尾验证计数：

  let eventCallCount = 0;
  
  beforeEach(() => {
    eventCallCount = 0;
    cy.intercept('POST', 'https://api.segment.io/v1', (req) => {
      const body = JSON.parse(req.body);
      if (body.type === SampleEvent) {
        eventCallCount++;
      }
    });
  });
  
  // 执行触发事件的操作后验证计数
  cy.wrap(eventCallCount).should('equal', 1);
  

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