Code Coverage for Playwright
Learn how to enable Code Coverage reporting for Playwright
Reporting code coverage to Currents as part of running your Playwright tests consist of 3 steps:
Setting up the project
Instrumenting the code
Configuring Playwright coverage fixtures
Updating the tests code
Setting up the Currents reporter
Install and configure Currents reporter following Playwright: Quick Start. Make sure that @currents/playwright reporter is configured with the right Record Key and Project ID.
By default Currents reporter uploads all discovered coverage reports, you can include only certain Playwright projects by setting the coverage projects
option, when using the reporter
import {
CurrentsConfig,
CurrentsFixtures,
currentsReporter,
CurrentsWorkerFixtures,
} from "@currents/playwright";
import { defineConfig, PlaywrightTestConfig } from "@playwright/test";
const currentsConfig: CurrentsConfig = {
recordKey: "xxx",
projectId: "yyy",
coverage: {
projects: ['projectA', 'projectB],
},
};
const config = defineConfig<CurrentsFixtures, CurrentsWorkerFixtures>({
use: {
...
currentsConfigOptions: currentsConfig,
},
reporter: [currentsReporter(currentsConfig)],
...
});
export default config;
or setting the --pwc-coverage projectA,projectB
when using the pwc
CLI command
npx pwc --key <record-key> --project-id <project-id> --pwc-coverage projectA,projectB
To check other configuration options run pwc
command with the --help
flag.
Instrumenting the code
Use the table below for enabling Istanbul instrumentation for your framework / bundler.
Once enabled, you'd be able to see window.__coverage__
object in your browser's console when opening your webapp. Don't hesitate to contact Currents Support if you need help with instrumenting your code.
Playwright Fixtures for Code Coverage
@currents/playwright
provides a set of Playwright fixtures that simplify extraction and collection of coverage reports.
import {
CurrentsFixtures,
CurrentsWorkerFixtures,
fixtures,
} from "@currents/playwright";
import { test as base } from "@playwright/test";
export const test = base.extend<CurrentsFixtures, CurrentsWorkerFixtures>({
...fixtures.baseFixtures,
...fixtures.coverageFixtures,
});
Update tests to use new test method
Import and use the extended test
for every test case to enable automatic collection of coverage reports
import { expect } from "@playwright/test";
import { test } from "./base.ts";
After completing this step and running the tests, Currents reporter will automatically merge and upload for post-processing the coverage reports. There's no need to run explicit upload commands.
NextJS + Babel Example
We will be using the example GitHub repository to configure code coverage reporting for NextJS + babel.
Install babel-plugin-istanbul
npm i -D babel-plugin-istanbul
Update (or create) babel.config.js
module.exports = {
presets: ["next/babel"],
plugins: ["istanbul"],
};
After completing this step, your app's code is instrumented. Running npm run dev
and opening your browser will activate the underlying code coverage methods and you'll see coverage information in window.__coverage__
object.

Note that Playwright tests use the extended test.extend
command with Currents coverage fixtures. Running Playwright tests npm run test
will activate a pre-configured Currents reporter and will send the code coverage information together with the rest of the results:

Last updated
Was this helpful?