Playwright测试本地正常但GitLab CI/CD上全部失败求助

问题现象 #

本地运行Playwright测试完全正常，但在GitLab远程机器上所有测试都因page.goto超时（50000ms）失败。测试录制显示应用已打开，但未执行任何导航步骤直至超时。

CI环境安装日志 #

$ cd playwright
$ npm ci
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
> cd .. && husky install front/.husky
husky - Git hooks installed
added 236 packages, and audited 237 packages in 25s
70 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
$ npx playwright install
Downloading Chromium 105.0.5195.19 (playwright build v1019)...
|                                                                                |   0% of 133.2 Mb
|■■■■■■■■                                                                        |  10% of 133.2 Mb
|■■■■■■■■■■■■■■■■                                                                |  20% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■                                                        |  30% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                                |  40% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                        |  50% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                |  60% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                        |  70% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                |  80% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 133.2 Mb
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 133.2 Mb
Chromium 105.0.5195.19 (playwright build v1019) downloaded to /ms-playwright/chromium-1019

$ npm run ci:test
npx playwright test --config=src/configs/playwright.prod.config.ts
Running 30 tests using 10 workers

测试失败示例 #

✘  2 [chromium] › account-settings.test.ts:12:3 › Account Settings functionality › validate account timezone modification (50s)
  ✘  3 [chromium] › account-settings.test.ts:16:3 › Account Settings functionality › validate adding api key (50s)
 page.goto: Timeout 50000ms exceeded.
       7 | test.describe('Account Settings functionality', () => {
       8 |   test('validate account phone number modification', async ({ page }) => {
    >  9 |     await validateChangePhoneNumber({ page });
         |           ^
      10 |   });
...
  29 failed
        at Object.Account Settings (/builds/dashboard-client/playwright/src/support/navigate/navigateToPage.ts:91:28)
        at navigationByPageName (/builds/dashboard-client/playwright/src/support/navigate/navigateToPage.ts:102:10)
        at validateChangeTimezone (/builds/dashboard-client/playwright/src/support/validate/validateAccountSettings/validateChangeTimezome.ts:12:9)
        at /builds/dashboard-client/playwright/src/tests/account-settings.test.ts:13:11

排查方向与解决办法 #

1. 验证CI环境的应用可访问性 #

• 在CI脚本中添加curl <你的应用URL>命令，确认Git Runner所在网络能正常请求目标应用。如果curl超时或返回错误，说明存在网络连通性问题（比如内网限制、域名解析失败）。
• 若需要代理才能访问应用，在CI配置中设置HTTP_PROXY/HTTPS_PROXY环境变量，确保Playwright能通过代理访问目标地址。

2. 调整导航等待策略 #

• 针对SPA应用，默认的页面加载完成判断可能不适用，修改page.goto的等待条件：

  await page.goto('你的应用URL', {
    waitUntil: 'networkidle', // 等待500ms内无网络请求
    timeout: 60000 // 延长超时时间至60秒
  });
  

• 或者在导航后等待关键页面元素可见，确保应用已加载完成：

  await page.goto('你的应用URL');
  await page.waitForSelector('#核心内容元素选择器', { timeout: 60000 });
  

3. 降低CI环境的测试并行度 #

• GitLab Runner资源不足（CPU/内存）会导致Chromium运行卡顿，页面加载超时。将测试并行数从--workers 10调整为--workers 2或更低，减少资源占用。
• 若使用共享Runner，可申请配置更高规格的专属Runner，提升硬件资源。

4. 核对Playwright配置的环境差异 #

• 对比本地与CI环境的playwright.prod.config.ts，确认：
  • 目标URL是否正确（本地可能用localhost，CI需用生产/预发域名）。
  • 浏览器启动参数是否适配CI：Playwright在CI中默认无头模式，若配置headless: false会导致无法运行。
  • 视口大小配置是否合理，避免因布局异常导致元素无法加载。

5. 启用调试日志定位问题 #

• 在CI脚本中添加环境变量启用详细日志：

  PWDEBUG=console npm run ci:test
  

• 在配置文件中开启失败测试的追踪记录，方便事后排查：

  export default defineConfig({
    use: {
      trace: 'retain-on-failure',
      logger: {
        isEnabled: (name, severity) => severity === 'error' || severity === 'warn',
        log: (name, severity, message) => console.log(`${severity}: ${message}`)
      }
    }
  });
  

6. 确认认证流程的有效性 #

• 如果测试依赖登录状态，检查CI环境中的登录步骤是否正常执行。本地可能保存了认证Cookie，但CI环境需要重新完成登录流程，若登录步骤因网络或元素定位失败，会导致后续导航无法进行。
• 在登录步骤后添加断言，确保登录成功（比如检查页面上的用户头像元素是否可见）。

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