本文介绍在 ci 环境（如 azure pipelines）中避免端口冲突的实践方案：通过 playwright 配置动态选取空闲端口启动 devserver，无需修改 webpack 配置，兼顾本地调试与持续集成稳定性。
本文介绍在 ci 环境（如 azure pipelines）中避免端口冲突的实践方案：通过 playwright 配置动态选取空闲端口启动 devserver，无需修改 webpack 配置，兼顾本地调试与持续集成稳定性。
在使用 Playwright 进行端到端测试时，webServer 配置常用于在测试前自动启动前端开发服务（如 Webpack Dev Server、Vite 或 React Scripts）。但硬编码 port: 3000 在共享 CI 代理（如 Azure Pipelines 的托管 agent）上极易引发端口占用错误——多个 pipeline 并发运行时可能同时尝试绑定同一端口，导致测试失败。
Playwright 本身不提供内置的“自动探测空闲端口”功能，但可通过环境变量协同机制优雅解决：在 playwright.config.ts 中提前生成并注入一个随机可用端口（注意：此处“随机”不等于“绝对可用”，但结合合理范围与 CI 环境隔离性，冲突概率极低；如需 100% 可靠性，可进一步集成 get-port 等库进行真实端口探测），再将其透传给应用启动命令。
以下为推荐实现方式（已验证兼容 Playwright v1.40+）：
// playwright.config.ts
import { defineConfig } from '@playwright/test';
// 动态端口分配逻辑（仅在 BASE_URL 未设置时触发）
if (!process.env.BASE_URL) {
// CI 环境使用大范围随机端口（10000–30000），降低冲突概率
// 本地开发使用固定端口，便于调试和浏览器直连
const port = process.env.CI
? Math.floor(Math.random() * 20000) + 10000 // 10000 ~ 29999
: 8088;
process.env.BASE_URL = `http://localhost:${port}`;
process.env.PORT = String(port); // 确保应用启动时读取该端口
}
export default defineConfig({
webServer: {
command: 'npm run start', // 此命令需能响应 PORT 环境变量
timeout: 120 * 1000,
port: parseInt(process.env.PORT || '8088', 10),
reuseExistingServer: !process.env.CI, // 本地复用，CI 强制重启
},
// 其他配置...
});
⚠️ 关键注意事项：
- 应用启动脚本必须支持 PORT 环境变量：例如，Webpack Dev Server 默认识别 PORT；Create React App 和 Vite 均原生支持；若使用自定义脚本，请确保其读取并应用 process.env.PORT。
- 避免端口硬编码泄露：检查 package.json 中的 start 脚本（如 "start": "webpack serve --port 3000"），应改为 "start": "webpack serve" 或 "start": "webpack serve --port $PORT"（Shell）/ %PORT%（Windows）。
-
CI 环境需启用端口探测增强（可选进阶）：若对可靠性要求极高，可引入 get-port 库实现真实端口检测：
npm install --save-dev get-port
// 替换上述随机逻辑（需 top-level await 或 IIFE） import getPort from 'get-port'; // ... const port = await getPort({ port: getPort.makeRange(10000, 30000) });
✅ 总结：该方案以最小侵入性解耦了测试配置与构建配置，既规避了 Webpack 配置修改，又提升了 CI 稳定性。核心思想是——将端口决策权交给 Playwright 配置层，并通过环境变量驱动应用启动行为。对于大多数团队，随机端口策略已足够健壮；对超大规模并发流水线，建议叠加 get-port 实现确定性空闲端口获取。
