Use Istanbul coverage collection with Playwright Test

This example demonstrates how to use vite-plugin-istanbul 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. In this example, we are using GitHub Actions to run the tests and upload them to Coveralls.

Prerequisites

• The web application which you are using needs to have vite-plugin-istanbul configured during the build process.
• It's recommended to only enable it during end-to-end testing, for example by checking a variable to determine if it should be enabled.
• You could also add it only when the dev server NODE_ENV=development is used.

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 files into the .nyc_output directory which can be used from the Istanbul CLI.
• 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
• vite-plugin-istanbul - to add coverage information
• nyc - Istanbul CLI to generate lcov coverage

Using with @playwright/experimental-ct-react

See this version in the ct-react-vite branch.

Using create-react-app / Webpack

See this archived version in the create-react-app branch.