如何按顺序执行Playwright多项目测试并保留完整HTML报告？

问题1：第一个测试失败后第二个测试终止执行 #

npm脚本中的&&会在前一个命令返回非0状态码（测试失败）时直接终止后续命令。要实现“无论第一个测试是否失败，都执行第二个测试”，有两种可行方案：

方案1：使用npm-run-all（跨平台推荐） #

1. 安装依赖包：

npm install --save-dev npm-run-all

2. 修改package.json的脚本配置：

"scripts": {
  "test:chromium": "npx playwright test --project=chromium",
  "test:firefox": "npx playwright test --project=firefox",
  "test:merge-reports": "npx playwright merge-reports --reporter html test-results-chromium test-results-firefox",
  "test:html-report": "npx playwright show-report",
  "test:all": "run-s --continue-on-error test:chromium test:firefox && npm run test:merge-reports && npm run test:html-report"
}

--continue-on-error参数会强制run-s忽略前序命令的失败状态，继续执行后续测试。

方案2：无需额外依赖（注意跨平台差异） #

直接修改test:all脚本，让每个测试命令即使失败也返回成功状态：

"scripts": {
  "test:chromium": "npx playwright test --project=chromium",
  "test:firefox": "npx playwright test --project=firefox",
  "test:merge-reports": "npx playwright merge-reports --reporter html test-results-chromium test-results-firefox",
  "test:html-report": "npx playwright show-report",
  "test:all": "(npm run test:chromium || true) && (npm run test:firefox || true) && npm run test:merge-reports && npm run test:html-report"
}

• Unix/Linux/macOS：|| true会让失败的命令返回0状态码，确保后续命令执行
• Windows（PowerShell）：替换为|| $true；Windows（CMD）：改为npm run test:chromium & npm run test:firefox（仅保证执行顺序，无法捕获失败状态）

问题2：仅保留第二个项目的HTML报告 #

两次测试默认将HTML报告写入同一个playwright-report文件夹，第二次会直接覆盖第一次的内容。解决方法是先让每个项目生成独立的JSON测试结果，再合并为统一的HTML报告：

1. 修改测试脚本，指定独立的结果目录和JSON报告格式：

"scripts": {
  "test:chromium": "npx playwright test --project=chromium --reporter=json --output=test-results-chromium",
  "test:firefox": "npx playwright test --project=firefox --reporter=json --output=test-results-firefox",
  // 其余脚本同上
}

• --reporter=json：让测试生成JSON格式的结果文件（用于后续合并）
• --output=xxx：为每个项目指定独立的结果存储目录，避免文件冲突

2. 添加合并报告的脚本：

"test:merge-reports": "npx playwright merge-reports --reporter html test-results-chromium test-results-firefox"

该命令会读取两个目录下的JSON结果，合并生成包含所有测试的HTML报告，默认输出到playwright-report文件夹。

最终完整配置 #

package.json：

"scripts": {
  "test:chromium": "npx playwright test --project=chromium --reporter=json --output=test-results-chromium",
  "test:firefox": "npx playwright test --project=firefox --reporter=json --output=test-results-firefox",
  "test:merge-reports": "npx playwright merge-reports --reporter html test-results-chromium test-results-firefox",
  "test:html-report": "npx playwright show-report",
  "test:all": "run-s --continue-on-error test:chromium test:firefox && npm run test:merge-reports && npm run test:html-report"
},

playwright.config.ts可移除原HTML reporter配置（避免重复生成）：

reporter: [['json', { outputFile: 'test-results/results.json' }]],

执行npm run test:all后，无论第一个测试是否失败，第二个都会执行，最终能得到包含两个项目所有测试结果的完整HTML报告。

内容的提问来源于stack exchange，提问作者Mateusz Puczyłowski