Playwright测试在CircleCI中失败但本地正常的问题求助

本地Playwright测试3秒内即可通过，但在CircleCI中执行时全部出现30秒超时错误，报错信息如下：

locator.click: Target closed
=========================== logs ===========================
waiting for locator('button').filter({ hasText: 'Nouvelle question' }).first() #

通过trace查看发现beforeAll中的GraphQL请求均正常，但后续页面显示空白。以下是可能的原因及解决方法：

1. 服务未完全就绪就启动测试 #

wait-on仅检查端口是否开放，无法确保应用完成初始化（比如前端资源加载、后端启动脚本执行完毕）。

解决方法：
在wait-on后增加延迟，或添加更精准的健康检查：

wait-on http://localhost:3000
wait-on http://localhost:4466
sleep 10 # 增加10秒延迟确保服务完全初始化
npx playwright install --with-deps
npm run test

也可以请求应用的健康检查接口，确认返回预期状态后再启动测试。

2. Playwright浏览器环境配置缺失 #

CircleCI容器环境可能存在依赖缺失，或无头模式配置不当。

解决方法：
修改playwright.config.js，确保无头模式配置正确：

use: {
  headless: true,
  viewport: { width: 1280, height: 720 },
  ignoreHTTPSErrors: true,
  waitForNavigation: { waitUntil: 'networkidle' },
},

同时确保CircleCI执行环境分配了足够的CPU和内存资源（可在项目设置中调整）。

3. 页面加载存在隐性失败 #

前端可能依赖外部资源（如CDN）在CircleCI环境中无法访问，导致页面渲染失败。

解决方法：
在测试中添加页面加载状态检查，排查是否真的渲染成功：

await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
// 等待页面至少有一个可见元素
await page.waitForSelector('body > *', { timeout: 15000 });
// 输出页面内容长度，确认是否为空
const contentLength = (await page.content()).length;
console.log('Page content length:', contentLength);

4. 测试选择器稳定性不足 #

依赖first()或模糊文本定位容易受页面渲染顺序影响，导致元素无法找到。

解决方法：
给页面元素添加data-testid属性，使用精准定位：

// 原代码
await page.locator('button', { hasText: 'Nouvelle question' }).first().click();
// 修改为（需在按钮上添加data-testid="new-question-button"）
await page.getByTestId('new-question-button').waitFor({ state: 'visible' });
await page.getByTestId('new-question-button').click();

5. 工作目录与路径配置问题 #

检查CircleCI中working_directory: e2e是否正确，确保npm run test能找到测试配置和文件；同时确认测试结果、artifacts的路径是否正确，避免隐性路径错误。

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