如何为Playwright中的多浏览器设置单个WS端点？

当然可以实现适配多浏览器的统一WS端点，下面是两个落地性强的方案：

方案1：自定义反向代理（最灵活） #

核心思路是用一个轻量代理服务监听统一端口，根据请求参数转发到对应浏览器的WS服务。

步骤1：启动多浏览器独立WS服务 #

在容器中分别启动Chromium、Firefox、Webkit的Playwright服务器，每个绑定不同端口：

# 启动Chromium WS服务（端口8080）
playwright run-server --browser chromium --port 8080
# 启动Firefox WS服务（端口8081）
playwright run-server --browser firefox --port 8081
# 启动Webkit WS服务（端口8082，仅支持mac/Linux容器）
playwright run-server --browser webkit --port 8082

步骤2：编写代理服务 #

用Node.js的http-proxy库实现WS代理，统一对外暴露端口9000：

const http = require('http');
const httpProxy = require('http-proxy');
const proxy = httpProxy.createProxyServer({});

const server = http.createServer((req, res) => {
  // 从URL参数获取目标浏览器类型，默认Chromium
  const browser = new URL(req.url, 'http://localhost').searchParams.get('browser') || 'chromium';
  const targetPort = {
    chromium: 8080,
    firefox: 8081,
    webkit: 8082
  }[browser];

  if (!targetPort) {
    res.writeHead(400, {'Content-Type': 'text/plain'});
    res.end('无效浏览器类型，支持：chromium、firefox、webkit');
    return;
  }

  proxy.web(req, res, {
    target: `ws://localhost:${targetPort}`,
    ws: true
  });
});

// 处理WS升级请求
server.on('upgrade', (req, socket, head) => {
  const browser = new URL(req.url, 'http://localhost').searchParams.get('browser') || 'chromium';
  const targetPort = {
    chromium: 8080,
    firefox: 8081,
    webkit: 8082
  }[browser];
  proxy.ws(req, socket, head, {target: `ws://localhost:${targetPort}`});
});

server.listen(9000);
console.log('统一Playwright WS端点已启动：ws://localhost:9000');

步骤3：测试连接 #

在你的测试代码中，通过统一端点指定浏览器类型：

const { chromium } = require('playwright');

// 连接到Firefox实例
const browser = await chromium.connect({
  wsEndpoint: 'ws://你的容器IP:9000?browser=firefox'
});

// 后续测试逻辑...
await browser.close();

方案2：用Playwright Cluster管理实例 #

如果不想手动维护多个独立WS服务，可以用playwright-cluster库统一管理多浏览器实例，通过封装逻辑分发请求：

const { Cluster } = require('playwright-cluster');

// 启动集群，每种浏览器维持一个实例
const cluster = await Cluster.launch({
  concurrency: Cluster.CONCURRENCY_BROWSER,
  maxConcurrency: 3,
  browsers: ['chromium', 'firefox', 'webkit'],
});

// 注册任务处理逻辑，根据参数指定浏览器
await cluster.task(async ({ page, data }) => {
  const { browserType, url } = data;
  // 确保使用指定浏览器的页面
  if (page.browser().browserType().name() !== browserType) {
    // 自定义切换浏览器实例逻辑
    const newBrowser = await cluster.getBrowser(browserType);
    page = await newBrowser.newPage();
  }
  await page.goto(url);
  return await page.title();
});

// 提交任务
const title = await cluster.execute({ browserType: 'firefox', url: 'https://example.com' });
console.log(title);

await cluster.close();

容器化注意事项 #

• 用Docker Compose编排代理服务和多个Playwright服务，避免端口冲突。
• 容器内部用localhost通信，仅对外暴露代理端口（9000）即可。
• 可给代理服务添加API密钥鉴权，防止未授权访问。

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