如何在Protractor测试中取消HTTP基础认证弹窗

我来给你几个实用的方案，帮你绕开这个烦人的认证弹窗，完全不用添加任何凭据：

方案1：拦截并取消iframe的加载请求 #

既然iframe内容对测试无关，最直接的方式就是阻止它发起请求。你可以利用Chrome DevTools协议（CDP）来拦截指定的iframe请求，直接取消掉它。

在你的测试用例的beforeEach钩子中添加这段代码：

beforeEach(async () => {
  // 获取当前浏览器的CDP会话
  const cdpSession = await browser.driver.createCDPSession();
  // 启用网络请求拦截
  await cdpSession.send('Network.enable');
  // 设置请求拦截规则
  await cdpSession.send('Network.setRequestInterception', {
    patterns: [
      {
        // 匹配你的iframe的URL，可以用通配符，比如"*://*.your-domain.com/iframe-path/*"
        urlPattern: '*://your-iframe-url.com/*',
        interceptionStage: 'Request'
      }
    ]
  });

  // 监听请求拦截事件，直接取消匹配到的请求
  cdpSession.on('Network.requestIntercepted', async (event) => {
    await cdpSession.send('Network.continueInterceptedRequest', {
      interceptionId: event.interceptionId,
      errorReason: 'Aborted' // 取消请求
    });
  });
});

这个方法的好处是从根源上阻止了认证请求的发起，不会触发任何弹窗。

方案2：关闭浏览器的HTTP认证弹窗 #

如果拦截请求对你来说有点复杂，也可以直接处理浏览器弹出的认证窗口。HTTP基础认证弹窗属于浏览器级别的alert，你可以用WebDriver的alert处理API来关闭它：

it('测试页面时处理认证弹窗', async () => {
  // 先导航到页面
  await browser.get('/your-page-url');
  
  // 等待认证弹窗出现，然后取消
  try {
    const alert = await browser.switchTo().alert();
    await alert.dismiss(); // 点击取消按钮
  } catch (err) {
    // 如果没有弹窗，忽略错误
    console.log('未检测到认证弹窗');
  }

  // 继续执行你的测试逻辑
});

注意：这个方法要把握好时机，确保弹窗出现后再执行dismiss操作，如果弹窗加载较慢，可以加个browser.wait()来等待alert出现。

方案3：移除DOM中的iframe元素 #

另一种简单粗暴的方式是直接把iframe从页面DOM中移除，这样它就不会加载内容，自然也不会触发认证：

beforeEach(async () => {
  await browser.get('/your-page-url');
  // 执行JS移除iframe，根据你的iframe选择器修改
  await browser.executeScript(() => {
    const iframe = document.querySelector('iframe');
    if (iframe) {
      iframe.remove();
    }
  });
});

这个方法适合iframe的选择器很明确的情况，操作起来最快捷。

你可以根据自己的测试环境和iframe的情况选择最合适的方案，个人推荐方案1，因为它最干净，不会影响页面其他元素的加载。

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