Vue项目中如何让Playwright无头运行并在测试失败时返回错误码？

核心问题总结 #

• 本地修改测试用例强制失败时，Playwright会打开浏览器窗口，且进程不返回错误码，导致CI环境执行时冻结
• 需要配置Playwright以无头模式运行，确保测试失败时返回正确的非0错误码
• 需明确process.env.CI变量的设置方式，控制报告自动打开行为

分步解决方案 #

1. 配置无头模式 #

Playwright默认在CI环境下启用无头模式，但本地测试时默认是有头模式。可以通过两种方式控制：

• 配置文件区分环境：在playwright.config.ts的chromium项目配置中，根据CI变量设置无头模式，兼顾本地调试和CI执行需求：

  import { defineConfig, devices } from '@playwright/test';
  
  export default defineConfig({
    testDir: './e2e',
    // 控制报告自动打开：本地失败时打开，CI环境永远不打开
    reporter: [["html", { open: !process.env.CI ? "on-failure" : "never" }]],
    projects: [
      {
        name: 'chromium',
        use: { 
          ...devices['Desktop Chrome'],
          // CI环境强制无头，本地保留有头模式方便调试
          headless: process.env.CI ? true : false 
        },
      },
    ],
  });
  

• 命令行强制无头：直接通过参数启用无头模式，适合临时模拟CI行为：

  playwright test --headless
  

2. 确保测试失败返回错误码 #

Playwright本身在测试失败时会返回非0错误码，之前的问题根源是本地测试失败时自动打开HTML报告的浏览器窗口阻塞了进程。通过上述reporter配置，在CI环境下设置open: "never"，即可避免窗口打开导致的进程阻塞，确保错误码正常返回。

3. 设置process.env.CI环境变量 #

有两种可靠方式：

• 手动在脚本中注入：在package.json的CI测试脚本中直接指定变量，适用于本地模拟CI或环境未自动设置的场景：

  {
    "scripts": {
      "test:e2e": "playwright test",
      // Linux/macOS用此写法，Windows需改为`set CI=true && playwright test`，跨平台可使用cross-env包
      "test:e2e:ci": "CI=true playwright test"
    }
  }
  

• CI平台自动注入：主流CI平台（如GitHub Actions、GitLab CI等）默认会自动设置CI=true环境变量，这也是你后续在CI环境运行时默认正常的原因。

关键注意事项 #

• --max-failures -x参数仅控制测试在首个失败时停止，不影响错误码返回或无头模式配置，因此之前尝试该参数无效是未触及核心问题
• 本地调试时保留有头模式，方便排查问题；CI环境下强制无头+关闭报告自动打开，确保流水线正常执行且返回正确状态码

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