Azure Pipeline中Playwright测试自动分配空闲端口配置咨询

不需要修改Webpack配置，仅通过调整Playwright的配置即可实现自动分配空闲端口的需求，具体步骤如下：

1. 修改Playwright的webServer启动命令 #

在playwright.config.ts的webServer配置中，修改command字段，通过命令行参数覆盖Webpack Dev Server的固定端口配置，让它自动选择空闲端口：

webServer: {
  command: 'npm run start -- --port 0', // 添加--port 0参数
  timeout: 120 * 1000,
  // 移除原有的port: 3000配置
  waitForHTTP: {
    path: '/', // 等待服务根路径响应
    timeout: 120 * 1000
  }
},

这里的--是npm脚本的参数传递分隔符，作用是把后面的--port 0传递给npm run start对应的实际命令（即webpack serve），Webpack Dev Server会忽略配置文件中固定的port:3000，自动分配一个空闲端口。

2. 确保Playwright自动适配随机端口 #

Playwright会自动检测Webpack Dev Server启动的实际端口，并将测试的baseURL自动设置为服务的完整地址。在你的测试用例中，直接使用相对路径即可，比如：

await page.goto('/'); // 无需指定端口，Playwright会自动使用服务的实际地址

补充说明 #

• 这种方式完全不需要修改Webpack的配置文件，仅通过命令行参数覆盖即可实现端口随机分配。
• 在Azure Pipeline环境中，该方案能有效避免同一代理上多个流水线占用固定端口的冲突问题。

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