Merge Atomized Playwright Outputs
When running Playwright tests in CI environments, Nx can split tests across multiple parallel tasks for faster execution. However, this creates separate test reports for each task. With the Nx Plugin, the Playwright report merging feature allows you to combine these individual reports into a single, unified report.
Benefits:
- View all test results in one consolidated report
- Maintain the same reporting experience as non-atomized tests
- Keep the performance benefits of parallel test execution
Prerequisites
- Nx workspace with
@nx/playwrightplugin - Playwright tests configured in your project
- CI environment with task atomization enabled
- Nx v21.6.1
Nx v21.6.1 introduced automatic configuration of report merging which is the focus of this guide. Similar steps can be followed for manual configuration of Playwright for any versions prior to Nx v21.6.1
How report merging works
- Blob Reports: Playwright generates lightweight "blob" reports during test execution
- Individual Tasks: Each atomized test task creates its own blob report
- Report Merging: A separate merge task combines all blob reports into unified output using your configured reporters (HTML, JSON, JUnit, etc.)
Configuration
Step 1: Enable blob reports
The nxE2EPreset from @nx/playwright/preset automatically enable the blob reporter when running in CI:
1import { defineConfig } from '@playwright/test';
2import { nxE2EPreset } from '@nx/playwright/preset';
3
4export default defineConfig({
5 // automatically uses the blob reporter for CI
6 ...nxE2EPreset(__filename, { testDir: './src' }),
7 // Your additional configuration
8});
9The preset has a
generateBlobReportsoption that can be used to disable the reporter or maybe enable it not just in CI.
Alternative manual configuration:
1export default defineConfig({
2 reporter: [
3 ['html', { outputFolder: 'playwright-report' }],
4 ...(process.env.CI ? [['blob', { outputDir: 'blob-report' }]] : []),
5 ],
6 // Your other configuration
7});
8Step 2: Configure the Playwright plugin
Add a ciTargetName to the Playwright plugin to your nx.json. This will enable task splitting and report merging features for CI environments:
1{
2 "plugins": [
3 {
4 "plugin": "@nx/playwright/plugin",
5 "options": {
6 "targetName": "e2e",
7 "ciTargetName": "e2e-ci"
8 }
9 }
10 ]
11}
12With the above configurations, Nx automatically creates these targets for your Playwright projects:
e2e: Regular target for local development (runs all tests together)e2e-ci: CI target that runs tests in parallel across multiple taskse2e-ci--merge-reports: Target that merges blob reports into unified reports
Running the feature
Local Development:
❯
# Run tests normally (no blob reports generated)
❯
nx run my-app:e2e
CI Environment:
❯
# Run atomized tests (generates blob reports)
❯
nx run my-app:e2e-ci
❯
# Merge the reports
❯
nx run my-app:e2e-ci--merge-reports
Complete example
Here's a complete working example for reference:
1import { defineConfig } from '@playwright/test';
2import { nxE2EPreset } from '@nx/playwright/preset';
3
4export default defineConfig({
5 ...nxE2EPreset(__filename, { testDir: './e2e' }),
6 use: {
7 baseURL: 'http://localhost:4200',
8 },
9 webServer: {
10 command: 'npm run start',
11 port: 4200,
12 reuseExistingServer: !process.env.CI,
13 },
14});
151{
2 "plugins": [
3 {
4 "plugin": "@nx/playwright/plugin",
5 "options": {
6 "targetName": "e2e",
7 "ciTargetName": "e2e-ci"
8 }
9 }
10 ]
11}
12CI Integration
The following example CI configuration is for GitHub Actions, but the same steps can be followed in all CI providers. The most important part is to always call the merge report target,
e2e-ci--merge-reports, even if the E2E tests fail to always have a final merged report.
1name: CI
2on:
3 pull_request:
4
5jobs:
6 main:
7 steps:
8 ...
9 - name: Run E2E Tests
10 run: nx run my-app:e2e-ci
11
12 - name: Merge Test Reports
13 run: nx run my-app:e2e-ci--merge-reports
14 # Run even if tests fail to get partial results
15 if: always()
16Troubleshooting
"The blob reporter is not configured"
Problem: The merge task warns that no blob reporter is configured.
Solution: Ensure the blob reporter is added to your Playwright configuration:
- If overriding the
reporterin the Playwright configuration, make sure to add the blob reporter:
1export default defineConfig({
2 reporter: [
3 // existing reporters
4 ...(process.env.CI ? [['blob', { outputDir: 'blob-report' }]] : []),
5 ],
6 // Your other configuration
7});
8Missing test results in report
Problem: The merge shows fewer results than expected test suites.
Solution:
- Check if some test tasks failed or were cancelled
- Verify all blob report files are present in the blob report directory
- Review CI logs for any task failures
Reports not merging
Problem: Individual blob reports exist but aren't being merged.
Solution:
- Ensure the merge target is running after all test tasks complete
- The default merge target name is
e2e-ci--merge-reports - You can run
nx show project <e2e-project-name>to view targets available on your project to verify the target exists
- The default merge target name is
- Check that the blob report directory path is correct
- Verify Playwright CLI is available in the CI environment
[WARNING] "No additional reporters are configured"
Problem: Only the blob reporter is configured, so it will be the only report produced
Solution: Add at least one additional reporter (HTML, JSON, JUnit, etc.) alongside the blob reporter.
List of available Playwright reports can be found in the Playwright documentation.
Best Practices
- Environment-based Configuration: Only enable blob reports in CI to avoid overhead during local development
- Error Handling: Use
if: always()(or similar) in CI workflows to merge partial results even when some tests fail - Output Artifacts: Archive both blob reports and merged reports as CI artifacts for debugging
- Validation: The merge task automatically validates the expected number of test results