Code Coverage for Playwright

Learn how to enable Code Coverage reporting for Playwright

Intro

This guide teaches how to report Playwright Code Coverage to Currents. If you are looking for information about how Code Coverage works, or what is Currents, head to the pages below.

Code CoverageWhat is Currents?

Report code coverage to Currents

Reporting code coverage to Currents as part of running your Playwright tests consist of 3 steps:

1. Setting up the project

2. Instrumenting the code

3. Configuring Playwright coverage fixtures

4. Updating the tests code

Setting up the Currents reporter

• Follow the feature request to get notified when we enable V8 coverage reports

• Check out the example GitHub repository

Requires@currents/playwright v1.7.0+

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

playwright.config.ts

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.

Bundler	Plugin
webpack	babel-plugin-istanbul
vite	vite-plugin-istanbul
rollup	rollup-plugin-istanbul
swc	swc-plugin-coverage-instrument (experimental)
esbuild	esbuild-plugin-instanbul

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.

It is a good practice to extend the default Playwright test method, for example to enable Page Object Model, sharing a state between multiple tests etc. See Playwright Fixtures for more information.

base.ts

   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,
   });

If you are using custom fixtures, please refer to Combining Currents fixtures with existing custom fixtures to ensure they are set up correctly.

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

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.

Exploring 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: