Cypress 8.7.0拦截window.alert()偶发失效，触发真实弹窗求助

问题根源 #

Angular的Zone.js会包装window.alert等原生浏览器API，当Cypress的stub时机晚于Zone的包装操作，或者存在异步竞态时，你实际stub的是Zone生成的代理方法，而非原生alert，这就导致偶发出现真实弹窗的情况。

可行解决方案 #

1. 全局提前拦截（推荐） #

在cypress/support/index.js中添加全局钩子，在Angular应用加载前就拦截原生alert：

Cypress.on('window:before:load', (win) => {
  cy.stub(win, 'alert').as('windowAlert');
});

这个钩子在页面window对象创建后、Angular初始化前触发，直接绑定原生方法，完全避开Zone.js的干扰。

2. 直接替换原生alert（组件级处理） #

如果必须在组件测试的beforeEach中操作，可直接覆盖原生alert实现，同时处理Zone可能的包装：

beforeEach(() => {
  cy.window().then((win) => {
    // 直接替换原生alert
    win.alert = cy.stub().as('windowAlert');
    // 若Zone已包装alert，替换其原始委托方法
    if (win.alert.__zone_symbol__originalDelegate) {
      win.alert.__zone_symbol__originalDelegate = cy.stub().as('windowAlert');
    }
  }).then(() => {
    // 组件初始化逻辑
  });
});

3. 确保异步顺序 #

用cy.wrap()强制等待stub完成后再初始化组件，避免竞态：

beforeEach(() => {
  cy.window().then((win) => {
    cy.stub(win, 'alert').as('windowAlert');
  }).then(() => {
    // 确保stub完全生效后再执行组件初始化
    return cy.wrap(null);
  }).then(() => {
    // 组件初始化逻辑
  });
});

4. 添加验证断言 #

在测试中加入断言，确认alert被正确拦截，方便排查偶发问题：

it('should intercept alert on component failure', () => {
  // 触发组件失败逻辑
  cy.get('[data-test="trigger-failure"]').click();
  // 断言alert被调用
  cy.get('@windowAlert').should('have.been.called');
});

原理说明 #

Zone.js通过代理原生API实现变更检测，若Cypress的stub在Zone包装后执行，stub的是Zone的代理方法而非原生alert。使用window:before:load钩子能在Zone初始化前绑定原生方法，彻底解决竞态问题。

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