“Coverage report” can mean two different things in Playwright. The built-in HTML, JSON, JUnit, and blob reporters summarize test outcomes; they do not measure which application statements ran. For JavaScript execution coverage in a Chromium page, call startJSCoverage(), exercise the page, call stopJSCoverage(), and convert the V8 ranges to Istanbul data. For source-level statement, branch, function, or line coverage across end-to-end tests, instrument the application and finish with nyc report.
Choose the report you actually need
| Goal | Use | Browser scope | Typical output |
|---|---|---|---|
| See passed, failed, skipped, flaky, and duration data | Playwright reporters | Any browser project configured in Playwright | Interactive HTML, JSON, JUnit, blob, or a custom format |
| Measure JavaScript or CSS used by a page | Playwright Coverage API | Chromium-based browsers only | Raw V8 entries, then Istanbul JSON or another converted format |
| Measure application source coverage over end-to-end flows | Instrumented build plus Istanbul/nyc | Browsers that can run your instrumented build | Text, HTML, lcov, and Istanbul-compatible artifacts |
Keep these products separate: npx playwright show-report opens a test-result report. It does not create code-coverage percentages.
Generate a Playwright test-result report
Use this path when you want a readable account of test execution rather than application-code metrics.
- Run the suite:
npx playwright test. - Open the generated report:
npx playwright show-report. - Filter the HTML view by browser, passed or failed tests, skipped tests, and flaky tests.
Playwright also supports JSON and JUnit reporters for CI systems. Set a reporter in playwright.config.js:
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
import { defineConfig } from '@playwright/test';
export default defineConfig({
reporter: [
['html', { outputFolder: 'playwright-report', open: 'never' }],
['json', { outputFile: 'artifacts/playwright-results.json' }],
['junit', { outputFile: 'artifacts/playwright-results.xml' }]
]
});Choose one or more formats according to the consumer: HTML for people, JSON for processing, and JUnit for CI dashboards. A blob reporter is useful when workers or CI shards produce separate result files.
Merge sharded test results
Configure each shard to emit a blob, retain every blob as a CI artifact, then merge them in a job that has all artifacts available:
npx playwright merge-reports path/to/blob-directoryThis combines Playwright test-result data. It does not merge JavaScript execution coverage. Coverage files need the Istanbul/nyc collection and merge strategy described below.
Path A: collect browser JavaScript coverage with Playwright
The official Coverage API reports JavaScript and CSS usage by the page. Its APIs are supported only in Chromium-based browsers, so a Firefox or WebKit project cannot use this method as written.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallInstall the converter
npm install -D playwright v8-to-istanbulRun a complete Chromium example
const { chromium } = require('playwright');
const v8toIstanbul = require('v8-to-istanbul');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
try {
await page.coverage.startJSCoverage();
await page.goto('https://your-app.example', { waitUntil: 'networkidle' });
// Exercise the code paths you want to measure.
await page.getByRole('button', { name: 'Open menu' }).click();
const coverage = await page.coverage.stopJSCoverage();
for (const entry of coverage) {
const converter = v8toIstanbul('', 0, { source: entry.source });
await converter.load();
converter.applyCoverage(entry.functions);
console.log(JSON.stringify(converter.toIstanbul()));
}
} finally {
await browser.close();
}
})();The converter output is Istanbul JSON, not a hosted dashboard. In production, write each converted object to a stable coverage directory (for example, .nyc_output) instead of only printing it. Then use an Istanbul-compatible reporter to render HTML, lcov, or text.
Important API details
- Start coverage before navigation or the interaction whose execution you want counted.
- Stop it after all relevant navigation and interactions; stopping early omits later code.
- Use the V8 entry’s source when creating the converter. Bundles without usable source text can produce incomplete mappings.
- Run this flow with
chromium. Do not advertise the result as cross-browser coverage. - Coverage reflects executed code, not the quality or completeness of assertions.
Path B: generate application coverage with Istanbul and nyc
Use instrumentation when the question is “which source statements, branches, functions, or lines did my end-to-end tests exercise?” The browser must load instrumented JavaScript. Running tests against an ordinary production bundle will not magically create Istanbul metrics.
Install the test and coverage packages
npm install -D @playwright/test babel-plugin-istanbul nycInstrument the build
Add babel-plugin-istanbul to the Babel configuration used for the test build, or use the equivalent Istanbul instrumentation step in your bundler. Keep instrumentation scoped to the build used for coverage and exclude generated files, dependencies, and test code where appropriate. Confirm in browser devtools or the emitted bundle that Istanbul counters are present.
Run tests and render reports
npx playwright test
npx nyc report --reporter=text
npx nyc report --reporter=html
npx nyc report --reporter=lcovThe HTML report is normally written under coverage/; the text report is convenient for CI logs and lcov can feed compatible quality tools. Preserve the raw files between parallel jobs. If your environment needs a different temporary directory, the nyc package documents the ISTANBUL_TEMP_DIR environment variable; set it consistently for every worker and merge job.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteCollect data from multiple workers or shards
- Give every process a writable, unique temporary location or ensure its coverage files do not overwrite another process.
- Upload those raw Istanbul files as artifacts at the end of each shard, even when the Playwright tests fail.
- Download all artifacts into one directory in a final job.
- Run
nyc reportthere to produce the combined text, HTML, or lcov result.
Do not use npx playwright merge-reports for these files: that command understands Playwright blob test results, not Istanbul coverage objects.
Instrumented coverage versus V8 coverage
| Question | V8 Coverage API | Istanbul/nyc instrumentation |
|---|---|---|
| What is measured? | JavaScript (and, through the Coverage API, CSS) used by a page | Source-level application statements, branches, functions, and lines |
| Where does data come from? | Chromium V8 execution ranges | Counters inserted into the application build |
| Browser support | Chromium only | Any browser that can execute the instrumented build, subject to your instrumentation |
| First useful artifact | Raw entries, then converted Istanbul JSON | Raw Istanbul files collected during tests |
| Rendering command | An Istanbul-compatible reporter after conversion | nyc report --reporter=... |
Use V8 data for a focused Chromium page or diagnostics. Use instrumentation for a durable application metric that can be combined across end-to-end scenarios and CI jobs.
Troubleshooting coverage reports
The HTML page opens but has no coverage numbers
You probably opened the Playwright test-result report. Check that you collected application coverage and ran nyc report; show-report alone cannot calculate code metrics.
Coverage is empty
- Verify that
startJSCoverage()ran before navigation. - Verify that the test actually loaded JavaScript and exercised the intended route.
- For Istanbul, inspect the served bundle for instrumentation counters.
- Check that the process can write its temporary directory.
Firefox or WebKit fails at the Coverage API call
This is expected for the official Playwright Coverage APIs, which are Chromium-only. Use instrumented application coverage when you need results from those browser projects.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Reports omit code from a bundle
Check source maps, dynamic imports, and whether the converter received the entry’s source. Exclude or include files deliberately in your Istanbul configuration rather than judging a bundle by its generated filename.
Parallel jobs overwrite one another
Use unique artifact names and temporary directories per worker or shard. Merge raw coverage only after all jobs finish; generate the final report once.
The report changes between runs
Coverage is path-dependent. Stabilize test data, wait for the application to finish loading, and make the same interactions in every run. A report is only comparable when the tested routes and build are comparable.
Performance, reliability, and CI practices
- Collect coverage in a dedicated CI job when instrumentation materially slows the application; keep a faster uninstrumented test job for feedback.
- Pin and review coverage package versions. Istanbul integrations and bundler plugins are version-sensitive.
- Store raw coverage as a build artifact so a failed report-rendering step does not destroy the evidence.
- Set explicit navigation and action waits. A timeout can leave a partial data set that looks valid but excludes late-loaded code.
- Separate browser projects in your CI output. Do not average Chromium V8 coverage with Firefox or WebKit results as if they came from the same collection mechanism.
- Define exclusions for generated code, vendor libraries, and test harnesses so the percentage answers a product question.
Or skip the browser setup
If what you need is a visual snapshot of a coverage dashboard or test report, ScreenshotNeo can capture the report URL through one request instead of maintaining browser-launch code. It accepts consent banners like a visitor, removes more than 60 known consent platforms plus newsletter popups and chat widgets before capture, and reports whether the page was cleanly captured. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed.
See the ScreenshotNeo documentation for all options. A cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-report.example -o coverage-report.webpIt also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
Frequently asked questions
Frequently Asked Questions
Can Playwright calculate branch coverage by itself?
Not with its test reporters or the basic V8 API alone. Branch metrics generally require instrumenting the application and rendering the collected Istanbul data with nyc or another compatible reporter.
Can I combine Playwright HTML results with an Istanbul HTML report?
Yes, publish them as separate CI artifacts or link to both locations. They answer different questions and are generated by different tools.
Should coverage run against a production build?
Use a build that contains the instrumentation needed for Istanbul metrics, while keeping source maps and exclusions configured so the report maps back to the code your team maintains.
The Bottom Line
Use Playwright reporters for test outcomes, the Chromium-only Coverage API for V8 execution data, and an instrumented build with Istanbul/nyc for application coverage that can be reported across end-to-end tests and CI shards.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
