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.

• The web application which you are using needs to have vite-plugin-istanbul configured during the build process. This is not needed anymore in the Vite App, since we do it inside the playwright-ct.config.ts under ctViteConfig instead.

• Place baseFixtures.ts into your test directory. Instead of requiring @playwright/experimental-ct-react to get the test object, use ./baseFixtures.
• Modify the playwright-ct.config.ts so it includes the Istanbul plugin in the ctViteConfig.
• 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

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.

• vite - tooling and bundling for React
• vite-plugin-istanbul - to add coverage information
• nyc - Istanbul CLI to generate lcov coverage

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