Playwright测试本地运行正常，GitLab CI中持续超时求助

针对本地测试正常但GitLab CI中出现导航超时、页面关闭的问题，以下是针对性的排查和修复方案：

1. 修正WebServer启动配置 #

你的Playwright配置中reuseExistingServer: true在CI环境下无意义（CI为全新环境，无复用服务器），且可能导致服务启动检测不充分。建议调整为：

webServer: {
  command: "npm run start",
  url: "http://localhost:5173",
  reuseExistingServer: false, // CI环境禁用复用
  timeout: 60000, // 延长启动超时到60秒
  waitFor: async ({ page }) => {
    await page.waitForSelector('body > #root'); // 等待应用根元素加载完成，确保服务真正就绪
  },
},

2. 优化页面导航等待逻辑 #

报错显示等待steps/3超时，但实际仅导航到steps/1、steps/2，说明CI环境下路由跳转延迟更高，或等待策略不合理：

• 合并跳转与等待逻辑，改用更适合SPA的等待策略：

  await page.goto(`http://localhost:5173/projects/load?ip=${test_param_id}`, {
    waitUntil: 'networkidle', // 等待网络空闲，适配SPA异步加载特性
    timeout: 60000,
  });
  // 用通配符匹配URL，避免硬编码完整路径
  await page.waitForURL('**/steps/1', { timeout: 60000 });
  

• 若路由跳转依赖API请求，优先等待页面元素而非URL：

  await page.goto(`http://localhost:5173/projects/load?ip=${test_param_id}`);
  // 等待步骤1的容器元素出现，确保页面渲染完成
  await page.waitForSelector('[data-testid="step-1-container"]', { timeout: 60000 });
  

3. 排查CI环境下的应用异常 #

页面关闭错误可能是应用在CI中出现未捕获崩溃，可通过以下方式排查：

• 在Playwright配置中开启控制台日志捕获：

  use: {
    // ...其他配置
    console: 'on', // 捕获所有控制台日志，便于排查应用报错
  },
  

• 检查Vite的CI环境配置，确认API地址、静态资源路径等环境变量是否正确。

4. 调整CI资源与超时设置 #

GitLab CI Runner资源有限可能导致运行缓慢，可做以下调整：

• 在.gitlab-ci.yml中增加资源限制（需GitLab Premium支持）：

  playwright:
    # ...其他配置
    resources:
      limits:
        memory: 4G
        cpu: 2
  

• 延长Playwright全局与操作超时：

  export default defineConfig({
    timeout: 60000, // 全局超时设为60秒
    use: {
      actionTimeout: 30000, // 单个操作超时
    },
    // ...其他配置
  });
  

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