如何在无头Chrome中允许或阻止通知弹窗（Protractor测试场景）

嘿，我来帮你搞定无头Chrome下Protractor测试的通知权限问题，分几个关键点给你梳理清楚：

其实无头模式下不会显示可视化的通知弹窗，但浏览器的通知权限状态是真实存在的——如果你的测试逻辑依赖权限状态（比如判断用户是否允许通知、后续业务逻辑是否触发），还是需要主动配置，不然可能和非无头模式的测试行为不一致。

你可以用两种简单的方式判断，方便后续根据模式切换配置：

• 方式一：通过浏览器版本信息检测（最可靠）

async function isHeadless() {
  const browserCapabilities = await browser.getCapabilities();
  const browserVersion = browserCapabilities.get('browserVersion');
  // 无头Chrome的版本字符串里会包含"HeadlessChrome"标识
  return browserVersion.includes('HeadlessChrome');
}

• 方式二：通过userAgent判断（简单快捷，测试环境足够用）

async function isHeadless() {
  const userAgent = await browser.executeScript(() => navigator.userAgent);
  return userAgent.includes('HeadlessChrome');
}

不管是Angular还是非Angular应用，核心都是通过Chrome启动参数或CDP（Chrome DevTools协议）来设置，分两种场景：

3.1 全局静态配置（启动Chrome时直接生效） #

在你的protractor.conf.js的capabilities中添加ChromeOptions参数，一次性配置所有站点的通知权限：

capabilities: {
  browserName: 'chrome',
  chromeOptions: {
    args: [
      '--headless=new', // 推荐用新版无头模式，行为更接近正常Chrome
      '--disable-gpu',
      // 允许所有站点的通知权限
      '--permissions-policy=notifications=*',
      // 如果要全局阻止通知，替换成下面这行
      // '--permissions-policy=notifications=()'
    ]
  }
}

注意：--permissions-policy是新版Chrome推荐的参数，替代了旧的--disable-notifications或--use-fake-ui-for-media-stream，对无头模式兼容性更好。

3.2 动态配置（测试过程中针对特定站点调整） #

如果需要在测试中动态切换权限，或者只给某个目标站点设置权限，可以用CDP的Permissions API：

async function setNotificationPermission(permission = 'granted') {
  // 获取当前页面的Origin
  const currentOrigin = await browser.executeScript(() => window.location.origin);
  // 通过CDP发送权限设置命令
  await browser.driver.sendChromeCommand('Browser.setPermission', {
    origin: currentOrigin,
    permission: 'notifications',
    setting: permission // 可选值：granted（允许）、denied（阻止）、prompt（弹窗询问）
  });
}

// 在测试中使用：
beforeEach(async () => {
  const isHeadlessMode = await isHeadless();
  if (isHeadlessMode) {
    await setNotificationPermission('granted'); // 根据需求设置为granted或denied
  } else {
    // 这里复用你已经实现的非无头模式的权限配置逻辑
  }
});

权限配置本身和应用是否基于Angular无关，都是浏览器层面的设置，但有个小细节要留意：

• Angular应用中，如果通知请求是在组件初始化时触发的，要确保等待Angular稳定后再操作（比如用browser.waitForAngularEnabled(true)，或者结合ExpectedConditions等待组件加载完成）
• 非Angular应用则不需要等待Angular，直接设置权限后访问页面即可

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