如何使用Karma/Jasmine测试会打开新窗口/标签页的Angular Web应用？

嘿，这个问题我之前也遇到过，结合Karma/Jasmine的运行机制和你的场景，给你一步步拆解解答：

1. 为什么点击链接没反应？ #

核心原因是Karma的测试运行环境是一个受控的iframe，它默认会静默拦截window.open()调用——包括通过<a target="_blank" rel="opener">触发的新窗口打开行为。这么做是为了防止测试过程中弹出不受控的窗口干扰测试流程，但这个拦截不会抛出任何错误，所以你的测试只会卡在等待状态，直到超时。

2. 是TestBed、Jasmine还是Karma的锅？ #

主要是Karma在浏览器层面做的拦截。Jasmine本身没有直接拦截窗口打开的逻辑，TestBed只是Angular的组件初始化工具，和这个问题无关。Karma为了维持测试环境的封闭性，会自动注入脚本阻止window.open()生效。

3. 怎么绕过这个行为？ #

有两种可行的方法，都不需要mock掉实际交互：

方法一：恢复原生window.open并配置浏览器允许弹窗

在你的测试代码里，先保存原生的window.open方法，在测试前恢复它，同时修改Karma的浏览器配置允许弹窗：

首先，在测试的beforeEach和afterEach里添加：

let originalOpen: typeof window.open;

beforeEach(async () => {
  // 保存原生的window.open
  originalOpen = window.open;
  // 恢复原生方法，让它真正打开窗口
  window.open = originalOpen;

  TestBed.configureTestingModule(xssDemoConfig);
  await TestBed.compileComponents();
  fixture = TestBed.createComponent(XssDemoComponent);
  fixture.detectChanges();
});

afterEach(() => {
  // 测试后关闭新窗口（如果存在）
  if (globalThis.testNewWindow) {
    globalThis.testNewWindow.close();
    delete globalThis.testNewWindow;
  }
  // 恢复Karma的拦截，避免影响其他测试
  window.open = () => ({ closed: false, close: () => {} });
});

然后修改karma.conf.js，添加允许弹窗的浏览器配置：

module.exports = function(config) {
  config.set({
    browsers: ['ChromeWithAllowPopups'],
    customLaunchers: {
      ChromeWithAllowPopups: {
        base: 'Chrome',
        flags: ['--disable-popup-blocking']
      }
    },
    // 其他配置...
  });
};

方法二：代理window.open追踪新窗口

如果你需要追踪新窗口实例方便后续交互测试，可以自定义window.open的实现，调用原生方法的同时保存窗口引用：

window.open = (url, target) => {
  const newWindow = originalOpen(url, target);
  // 把新窗口存到全局，方便测试里访问
  globalThis.testNewWindow = newWindow;
  return newWindow;
};

4. 这种测试在Karma/Jasmine里可行吗？ #

可行，但有几个需要注意的局限性：

• 浏览器兼容性：不同浏览器对弹出窗口的限制不同，比如Firefox可能需要额外配置。
• 测试稳定性：新窗口加载需要时间，你需要用async/await结合等待逻辑，确保窗口加载完成后再测试：

  it('should interact with the new window', async () => {
    el.querySelector('a').click();
    // 等待新窗口加载完成
    await new Promise(resolve => {
      const checkLoaded = () => {
        if (globalThis.testNewWindow?.document.readyState === 'complete') {
          resolve();
        } else {
          setTimeout(checkLoaded, 100);
        }
      };
      checkLoaded();
    });
    // 在这里进行交互测试，比如检查新窗口的DOM元素
    expect(globalThis.testNewWindow.document.querySelector('#target-element')).toBeTruthy();
  });
  

• 清理工作：必须在每个测试后关闭新窗口，否则会影响后续测试甚至导致Karma崩溃。

5. 如果Karma/Jasmine不合适，该试什么工具？ #

如果多窗口交互的测试场景比较复杂，更推荐用专门的端到端测试框架：

• Cypress：原生支持多窗口测试，能自动追踪弹出窗口，API简洁，上手快，集成测试体验流畅。
• Playwright：跨浏览器兼容性强，原生支持多页面/窗口交互，适合复杂的端到端场景，稳定性高。

这两个工具都是直接控制整个浏览器，不像Karma在iframe里运行，所以对多窗口、跨页面交互的支持要友好得多。

备注：内容来源于stack exchange，提问作者meeque