Playwright+GitLab CI自动化测试页面加载异常排查求助

• 检查GitLab CI Runner的网络环境
  GitLab CI的Runner可能处于私有网络或受出站防火墙限制，导致无法完整拉取页面的静态资源（如CDN文件、后端接口）。可以在CI脚本中添加curl -v <目标页面URL>或wget <页面URL>命令，对比本地手动访问的返回内容，确认Runner能否正常获取页面资源。

• 模拟真实浏览器的请求头
  自动化浏览器的请求头和手动访问存在差异时，部分网站会拦截这类请求。可以在Playwright中设置完整的用户代理，同时对比手动与自动化请求的所有头信息：

  // 设置主流浏览器的用户代理
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');
  // 输出自动化请求的头信息用于对比
  page.on('request', req => console.log(req.headers()));
  

• 调整页面等待策略
  部分页面依赖异步加载，自动化测试可能因等待时间不足导致内容未加载完成。可以尝试：

  // 等待网络空闲（无请求持续500ms）
  await page.goto('<目标URL>', { waitUntil: 'networkidle' });
  // 等待目标元素出现，延长超时时间
  await page.waitForSelector('#关键内容元素', { timeout: 10000 });
  

  也可以开启Playwright追踪功能，在CI中生成追踪文件，下载后分析页面加载的完整流程：

  playwright test --trace on
  

• 排查CI环境变量干扰
  CI环境中的代理类环境变量（如HTTP_PROXY、HTTPS_PROXY）可能导致请求走错误链路。可以在CI脚本中执行printenv命令，检查是否存在异常的网络相关变量。

• 更换Playwright官方镜像
  第三方镜像可能存在兼容性问题，建议改用Playwright官方提供的镜像（如mcr.microsoft.com/playwright:v1.38.0-focal），官方镜像预装了所有依赖与匹配的浏览器版本，兼容性更有保障。

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