Playwright 自动分配开发端口方法

本文揭秘了如何在 Playwright 端到端测试中巧妙规避 CI 环境（如 Azure Pipelines）下的端口冲突难题——无需改动 Webpack 或 Vite 等构建配置，仅通过 playwright.config.ts 动态生成并注入空闲端口（本地固定、CI 随机或结合 get-port 精确探测），让 devserver 智能启动、测试稳定运行，既保障本地调试便利性，又大幅提升持续集成的可靠性与并发能力，是前端工程化中轻量高效、开箱即用的实战利器。

本文介绍在 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 实现确定性空闲端口获取。

好了，本文到此结束，带大家了解了《Playwright 自动分配开发端口方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！