如何使用WebdriverIO自动化带双输入框的登录提示框？

针对你遇到的原生浏览器登录提示框（HTTP Basic/Digest认证）无法用常规sendAlertText或URL嵌入账号密码的问题，以下是可行的替代方案：

WebdriverIO原生支持的方案（基于Chrome DevTools Protocol） #

原生认证框属于浏览器网络层控制，可通过WebdriverIO调用Chrome DevTools Protocol（CDP）直接注入认证信息，适用于Chromium内核浏览器（Chrome、Edge等）：

// 启用Network模块
await browser.executeCdpCommand('Network.enable', {});

// 注入认证信息（推荐方式）
await browser.executeCdpCommand('Network.authenticate', {
  username: '你的用户名',
  password: '你的密码'
});

// 访问受保护页面
await browser.url('目标页面URL');

也可以通过设置HTTP请求头的方式实现：

await browser.executeCdpCommand('Network.enable', {});
await browser.executeCdpCommand('Network.setExtraHTTPHeaders', {
  headers: {
    'Authorization': 'Basic ' + Buffer.from('用户名:密码').toString('base64')
  }
});
await browser.url('目标页面URL');

非WebdriverIO但兼容的解决方案 #

1. 自定义浏览器扩展自动注入认证头 #

通过浏览器扩展在请求发送前自动添加Authorization头，适用于所有支持扩展的浏览器：

步骤1：编写扩展文件

• manifest.json（以Chrome Manifest V3为例）：

{
  "manifest_version": 3,
  "name": "自动认证插件",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

• background.js：

chrome.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    details.requestHeaders.push({
      name: 'Authorization',
      value: 'Basic ' + btoa('用户名:密码')
    });
    return {requestHeaders: details.requestHeaders};
  },
  {urls: ["<all_urls>"]},
  ["blocking", "requestHeaders"]
);

步骤2：在WebdriverIO中加载扩展

// wdio.conf.js 配置示例
capabilities: [{
  browserName: 'chrome',
  'goog:chromeOptions': {
    // 加载未打包的扩展文件夹
    args: ['--load-extension=./path/to/your/extension-folder']
    // 或加载打包后的crx文件
    // extensions: [require('fs').readFileSync('./auth-extension.crx', 'base64')]
  }
}]

2. 使用代理工具自动添加认证头 #

通过MitmProxy等代理工具在请求转发时注入认证信息，适用于所有浏览器：

步骤1：编写MitmProxy脚本

# auth-script.py
from mitmproxy import http

def request(flow: http.HTTPFlow) -> None:
    # 替换为你的账号密码
    auth_str = "用户名:密码"
    flow.request.headers["Authorization"] = f"Basic {auth_str.encode('base64').strip()}"

步骤2：启动MitmProxy并配置WebdriverIO

1. 启动代理：mitmproxy -s auth-script.py
2. 在WebdriverIO配置中设置代理：

// wdio.conf.js
capabilities: [{
  browserName: 'chrome',
  'goog:chromeOptions': {
    args: ['--proxy-server=http://localhost:8080']
  }
}]

注意：首次使用需安装MitmProxy的CA证书，避免浏览器安全拦截。

内容的提问来源于stack exchange，提问作者Jerónimo