Playwrite UI Coverage Reporter

🚀 Measuring what actually runs in the browser—not just what’s written in the codebase 🔥

Playwright UI Coverage Reporter measures real execution coverage during end-to-end (E2E) tests, providing insights into which parts of your code are actually executed in the browser.

⚙️How it Works

• Start capturing coverage in test.beforeEach()
• Stop capturing coverage in test.afterEach()
• Save the coverage in the .coverage directory
• Generate the HTML report using Playwright UI Coverage Reporter

⚖️How Is It Different from Jest/Istanbul/Sonar?

• Jest/Istanbul → Measures unit test coverage (how much code is executed in unit tests).
• SonarQube → Analyzes static code quality & test coverage in CI/CD.
• Playwright UI Coverage → Captures real execution coverage during E2E tests in a live browser.

💡 Why it Matters?

Playwright coverage is capturing browser-executed JavaScript coverage. Here’s why it matters:

✅ Real User Interaction Coverage

• Traditional tools measure how much of the code is tested.
• Playwright Coverage tells you what actually runs in a real browser session.
• This highlights dead code that never gets executed by users.

✅ End-to-End Testing Insights

• Helps QA & Developers assess whether Playwright tests cover all critical paths.
• Essential for frontend-heavy applications where UI logic matters.

✅ Performance & Code Optimization

• Find and eliminate unused JavaScript, leading to faster page loads.
• Aligns with web performance best practices.

✅ Security & Risk Analysis

• Untested areas in real browser sessions could introduce security risks.
• Helps ensure critical authentication & authorization flows are covered.

🌍 Real-World Use Cases

🔹 QA Teams & Test Engineers → Validate Playwright test coverage and improve automation. 🔹 Frontend Developers → Identify dead code and optimize JavaScript. 🔹 Performance Engineers → Reduce unexecuted JS for better performance. 🔹 Security Teams → Detect untested areas that may pose risks. 🔹 Managers & Leads → Measure ROI of automation testing efforts.

📌 Installation

To install the package via NPM, run:

npm install -g playwright-ui-coverage-reporter

Or, if you want to use it in a specific project:

npm install --save-dev playwright-ui-coverage-reporter

🚀 How to Use

1️⃣ Enable Coverage Collection in Playwright Tests Modify your Playwright tests to start and stop coverage collection:

import { test, expect } from '@playwright/test';
import fs from 'fs';
import path from 'path';

// Start coverage in beforeEach
test.beforeEach(async ({ page }) => {
  await page.coverage.startJSCoverage();
});

// Stop coverage and save with test name in afterEach
test.afterEach(async ({ page }) => {
  const coverage = await page.coverage.stopJSCoverage();
  const coverageDir = '.coverage';

  // Ensure coverage directory exists
  if (!fs.existsSync(coverageDir)) {
    fs.mkdirSync(coverageDir, { recursive: true });
  }

  // Save the coverage file with test name suffix
  const testName = test.info().title.replace(/\s+/g, '_'); // Replace spaces with underscores
  const coverageFile = path.join(coverageDir, `${testName}_coverage.json`);
  
  fs.writeFileSync(coverageFile, JSON.stringify(coverage, null, 2));
});

✔ Saves coverage as {testName}_coverage.json instead of a single file ✔ Ensures the .coverage/ directory exists before writing ✔ Replaces spaces in test names with underscores for valid filenames

Each test case will generate its own coverage file!

2️⃣ Run Playwright Tests Execute Playwright tests as usual:

npx playwright test

This will generate *_coverage.json files inside the .coverage directory.

test-login_coverage.json
test-dashboard_coverage.json

3️⃣ Generate the Coverage Report Import the PlaywrightUICoverageReporter and generate the report programmatically:

import { PlaywrightUICoverageReporter } from "playwright-ui-coverage-reporter";

const reporter = new PlaywrightUICoverageReporter();
reporter.generateReport();

This will generate the HTML coverage reports inside the .coverage directory.

📂 Example Directory Structure

my-project/
│── tests/
│   ├── example.spec.ts
│── .coverage/                          # Coverage data stored here
|   ├── coverageSummary.html            # HTML report generated here
|   ├── coverageExecutedRanges.html     # HTML report generated here
|   ├── coverageUnExecutedRanges.html   # HTML report generated here
│── package.json
│── playwright.config.ts

🎯 Summary

✔ Install the package ✔ Capture coverage in Playwright tests ✔ Run tests to generate coverage.json ✔ Generate HTML report using the reporter ✔ View report in the browser

License

MIT

Free Software, Hell Yeah!

⚠ Important: This package uses ES modules (ESM).

If your project does not already have "type": "module" in package.json, add it manually:

{
  "type": "module"
}

This ensures users explicitly enable ES modules in their Playwright project.