Cypress测试Angular应用如何等待客户端渲染完成后执行后续测试

问题根因 #

你直接访问的window对象属于Cypress测试框架自身的运行上下文，而非被测Angular应用所在的iframe上下文，自然无法读取到Angular挂载的测试相关API。

实现步骤 #

1. 封装Angular稳定等待自定义命令 #

在cypress/support/commands.ts中添加如下代码，同时补全TypeScript类型声明：

// 扩展Window接口，补充Angular测试API的类型定义
declare global {
  interface Window {
    getAngularTestability: (rootElement: Element) => {
      isStable: () => boolean;
      whenStable: (callback: (didWork: boolean) => void, timeout?: number) => void;
    };
    getAllAngularRootElements: () => Element[];
  }

  // 扩展Cypress命令类型，获得自定义命令的类型提示
  namespace Cypress {
    interface Chainable {
      waitForAngularStable(timeout?: number): Chainable<boolean>;
    }
  }
}

const DEFAULT_ANGULAR_TIMEOUT = 10000;

Cypress.Commands.add('waitForAngularStable', (timeout = DEFAULT_ANGULAR_TIMEOUT) => {
  // 通过cy.window获取被测应用的上下文对象
  return cy.window({ log: false }).then((appWindow) => {
    // 边界处理：Angular未挂载测试API时直接返回，避免报错
    if (!appWindow.getAllAngularRootElements?.length || !appWindow.getAngularTestability) {
      cy.log('Angular testability API not detected, skip waiting');
      return cy.wrap(true, { log: false });
    }

    return new Cypress.Promise((resolve) => {
      const rootElement = appWindow.getAllAngularRootElements()[0];
      const testability = appWindow.getAngularTestability(rootElement);

      if (testability.isStable()) {
        return resolve(true);
      }

      testability.whenStable((didWork) => {
        resolve(didWork);
      }, timeout);
    });
  });
});

2. 测试用例中调用 #

需要等待Angular渲染完成的位置调用自定义命令即可：

it('验证客户端渲染结果', () => {
  // 触发渲染的操作
  cy.get('.submit-btn').click();
  // 等待Angular进入稳定状态后再执行后续断言
  cy.waitForAngularStable().then(() => {
    cy.get('.render-item').should('have.length', 10);
  });
});

3. 全局自动等待配置（可选） #

如果需要所有页面加载完成后自动等待Angular稳定，可在cypress/support/e2e.ts中添加全局钩子：

Cypress.on('window:load', (appWindow) => {
  if (appWindow.getAllAngularRootElements?.length && appWindow.getAngularTestability) {
    const rootElement = appWindow.getAllAngularRootElements()[0];
    const testability = appWindow.getAngularTestability(rootElement);
    if (!testability.isStable()) {
      return new Cypress.Promise((resolve) => {
        testability.whenStable(resolve, DEFAULT_ANGULAR_TIMEOUT);
      });
    }
  }
});

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