Code Coverage for Playwright
Learn how to enable Code Coverage reporting for Playwright
Follow the feature request to get notified when we enable V8 coverage reports
Check out the example GitHub repository
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
Requires@currents/playwright
v1.7.0+
Install and configure Currents reporter following Your First Playwright Run. 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
or setting the --pwc-coverage projectA,projectB
when using the pwc
CLI command
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 | |
vite | |
rollup | |
swc | |
esbuild |
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 Currents Playwright fixtures for more information.
Update tests to use new test method
Import and use the extended test
for every test case to enable automatic collection of coverage reports
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
Update (or create) babel.config.js
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