jfgreffier / playwright-test-native-coverage

Playwright Test (@playwright/test) demo to collect chromium coverage information

Use Chromium coverage collection with Playwright Test

This example demonstrates how to use Playwright Test to collect coverage data during runtime with your end-to-end tests which will be stored on the filesystem. When applying the shown parts, you are able to view the coverage report e.g. as HTML, or convert it to the lcov format for upload to Coveralls or other similar providers.

Prerequisites

Coverage APIs are only supported on Chromium-based browsers.

Usage

• Place baseFixtures.ts into your test directory. Instead of requiring @playwright/test to get the test object, use ./baseFixtures.
• This will collect the corresponding coverage as attachment.
• For an example test, see App.test.ts

Coverage formats

Helpful commands are the following:

• npx nyc report --reporter=html -> Writes an HTML report to coverage/index.html.
• npx nyc report --reporter=lcov -> commonly used to upload to Coveralls or Codecov.
• npx nyc report --reporter=text -> CLI output how the current code coverage per file and statement will look like.

Used tools

• vite - tooling and bundling for React
• @web/test-runner-coverage-v8 - to convert V8 to Istanbul with fetching SourceMaps and nice config
• nyc - Istanbul CLI to generate lcov coverage