如何在GitHub Actions CI中输出Playwright测试详细日志

问题场景 #

在GitHub Actions中运行Playwright E2E测试时，仅能看到自定义console.log的输出，无法获取类似jobSearch.spec.js:39:3 › Search functionality › Click on All Work types and click on Full time check box的测试用例执行明细日志，需要调整配置启用详细日志输出。

解决方案 #

1. 调整Playwright配置文件（playwright.config.js）的Reporter设置 #

当前配置仅使用html reporter，该Reporter主要用于生成可视化报告，不会在终端输出详细的用例执行信息。需要添加终端友好的list或line reporter，同时保留HTML报告生成能力：

修改reporter字段为数组形式：

/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: [
  ['html'], // 保留HTML报告生成
  ['list']  // 在终端输出详细测试用例执行日志
],

• list reporter：逐行输出每个测试用例的执行状态（开始、通过、失败等），完全匹配你需要的详细格式。
• 若偏好更简洁的单行输出，可替换为['line']。

2. 简化GitHub Actions中的测试运行命令 #

原配置中的管道处理会干扰Playwright的日志输出缓冲，导致部分日志无法正常显示。直接运行测试命令即可：

修改playwright.yml中的Run Playwright tests步骤：

- name: Run Playwright tests
  run: npx playwright test

如果需要额外的调试细节（如每个操作的执行日志），可添加--verbose参数：

- name: Run Playwright tests
  run: npx playwright test --verbose

3. 验证效果 #

修改完成后重新触发GitHub Actions，日志将显示每个测试用例的执行信息，示例如下：

Running 10 tests using 1 worker
jobSearch.spec.js:39:3 › Search functionality › Click on All Work types and click on Full time check box
Option text ::Full time
✓ jobSearch.spec.js:39:3 › Search functionality › Click on All Work types and click on Full time check box (2.3s)
...

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