playwright-test-coverage-native

Measure test coverage with Playwright.
Its only dependency is @playwright/test
— unlike its alternatives, playwright-test-coverage-native
uses Playwright's
built-in coverage functionality without Istanbul.
Installation
Using NPM:
npm i -D playwright-test-coverage-native
Using PNPM:
pnpm i -D playwright-test-coverage-native
Configuration
Add coverageDir
to playwright.config.ts
to set where coverage data should be written to.
For example,
import { defineConfig, devices } from "playwright-test-coverage-native";
// See https://playwright.dev/docs/test-configuration.
export default defineConfig({
projects: [
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
coverageDir: './coverage/tmp', // output location for coverage data
coverageSrc: './src', // filter coverage data for only files in ./src (optional)
// one of: '@fs', 'localhosturl'. Sadly you'll just have to play around to see which one works
coverageSourceMapHandler: '@fs'
},
},
],
});
[!NOTE]
Coverage APIs are only supported on Chromium-based browsers.
Usage
playwright-test-coverage-native
is a drop-in replacement for @playwright/test
. Edit the import of your test files like this:
-import { test, expect } from '@playwright/test';
+import { test, expect } from 'playwright-test-coverage-native';
If you're brave, you can do the changes in bulk:
# using GNU coreutils
find -type f -name '*.test.?s' -exec sed -i -e 's#@playwright/test#playwright-test-coverage-native#' \;
Post-processing
Install c8.
After running playwright test -c playwright.config.ts
,
run c8 report
to print a summary of the coverage.
c8 report
is also used to convert to various formats,
see c8 report --help
for more options.
Alternatives
[!NOTE]
V8 code coverage can be inaccurate due to JavaScript code transformation and source maps,
in which case alternatives (which use istanbul) may be preferable.