如何在WSL的Docker中通过Jest和Puppeteer调用宿主机Chrome运行可视化测试

要实现容器内的Puppeteer直接调用Windows宿主机的可视化Chrome，核心思路是让Puppeteer通过远程调试协议连接到宿主机已启动的Chrome实例，而非在容器内启动浏览器。以下是具体步骤：

1. 配置宿主机Chrome开启远程调试 #

在Windows上启动Chrome时，添加远程调试参数，允许容器访问：

• 右键Chrome快捷方式 → 属性 → 目标栏末尾追加：

  --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0 --user-data-dir="C:\Temp\ChromeDebugProfile"
  

  其中--user-data-dir用于指定独立用户目录，避免与日常使用的Chrome实例冲突；0.0.0.0允许所有IP访问调试端口。
• 或通过命令行启动Chrome：

  "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0 --user-data-dir="C:\Temp\ChromeDebugProfile"
  

2. 修改Puppeteer代码，从启动改为连接远程Chrome #

将原有的launch逻辑替换为connect，通过WebSocket连接到宿主机的Chrome调试端点：

const puppeteer = require('puppeteer');

async function runTests() {
  // 请求Chrome调试接口获取WebSocket连接地址
  const response = await fetch('http://host.docker.internal:9222/json/version');
  const data = await response.json();
  const browserWSEndpoint = data.webSocketDebuggerUrl;

  // 连接到宿主机的Chrome实例
  const browser = await puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null // 保留宿主机Chrome的窗口尺寸
  });

  // 原有测试逻辑保持不变
  const page = await browser.newPage();
  await page.goto('http://your-app-url');
  // ...你的测试代码

  // 测试结束后仅断开连接，不要关闭宿主机Chrome
  await browser.disconnect();
}

runTests();

说明：host.docker.internal是Docker内置域名，自动映射到宿主机IP（WSL2环境下有效）。若该域名无法解析，可直接替换为Windows宿主机的局域网IP（如192.168.x.x）。

3. 确保Docker容器网络能访问宿主机端口 #

启动容器时无需额外端口映射（容器主动访问宿主机），但需确认：

• Windows防火墙允许9222端口的入站请求（可临时关闭防火墙测试，再添加规则放行）。
• WSL2与Windows网络互通正常（默认环境下WSL2可直接访问Windows主机）。

关键注意事项 #

• 启动远程调试的Chrome需使用独立用户目录，避免与日常使用的实例冲突。
• 若需多浏览器实例，可在宿主机启动多个Chrome进程，指定不同的调试端口和用户目录。
• 测试结束时调用browser.disconnect()而非browser.close()，防止关闭宿主机的Chrome。

内容的提问来源于stack exchange，提问作者Andrey Mikhaylov - lolmaus