Angular中Playwright在GitHub Actions运行E2E测试超时问题

针对你遇到的Angular 16项目在GitHub Actions中运行Playwright E2E测试时的WebServer超时问题，可按以下步骤排查修复：

1. 调整Angular启动命令 #

默认npm run start是开发模式，在CI环境下需要关闭热重载并确保服务器监听所有网络接口：

• 在package.json中新增CI专用启动命令：

  "scripts": {
    "start": "ng serve",
    "start:ci": "ng serve --host 0.0.0.0 --port 4200 --watch=false"
  }
  

  --host 0.0.0.0确保服务器能被容器内的127.0.0.1访问，--watch=false关闭文件监听，避免CI环境下不必要的资源占用。

2. 优化Playwright配置 #

修改playwright.config.ts的webServer相关配置，解决超时检测问题：

export default defineConfig({
  // 保留原有其他配置...
  use: {
    baseURL: 'http://127.0.0.1:4200', // 统一baseURL，简化测试用例中的路径
    trace: 'on-first-retry',
  },

  webServer: {
    command: 'npm run start:ci', // 使用新增的CI启动命令
    url: 'http://127.0.0.1:4200',
    reuseExistingServer: !process.env.CI, // CI环境禁用服务器复用，避免残留进程干扰
    timeout: 90000, // 延长超时时间至90秒，适配CI环境资源限制
    waitUntil: 'networkidle', // 等待网络空闲，确保Angular应用完全初始化完成
    stdout: 'pipe',
    stderr: 'pipe', // 输出服务器日志到CI控制台，方便排查启动异常
  },
});

3. 对齐GitHub Actions环境配置 #

确保E2E测试Job的Node版本与Build Job一致，避免依赖兼容性问题：

tests_e2e:
  name: Run end-to-end tests
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: "16.x" # 和Build Job保持相同的Node版本
        cache: "npm" # 启用npm缓存，加快依赖安装速度
    - name: Install dependencies
      run: npm ci
    - name: Install playwright browsers
      run: npx playwright install --with-deps
    - name: Run tests
      run: npx playwright test

4. 排查服务器启动状态（可选） #

若问题仍存在，可在E2E Job中添加手动检测步骤，确认服务器是否正常响应：

- name: Verify server accessibility
  run: |
    npm run start:ci &
    sleep 30
    curl -v http://127.0.0.1:4200

通过curl的输出判断服务器是否真正启动并可访问，进一步定位问题根源。

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