|
5 | 5 |
|
6 | 6 | This example demonstrates how to use [vite-plugin-istanbul](https://github.com/ifaxity/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](https://coveralls.io/) or other similar providers. In this example, we are using GitHub Actions to run the tests and upload them to Coveralls. |
7 | 7 |
|
| 8 | +Verified with: React 19, Vite 8, TypeScript 6, Playwright 1.60, `vite-plugin-istanbul` 9, `nyc` 18. |
| 9 | + |
| 10 | +## Why not Playwright's built-in coverage? |
| 11 | + |
| 12 | +Playwright exposes [`page.coverage`](https://playwright.dev/docs/api/class-coverage) which wraps Chromium's V8 coverage. That works for a single Chromium page but has limitations for app-level e2e coverage: |
| 13 | + |
| 14 | +- It is Chromium-only — no Firefox or WebKit. |
| 15 | +- It produces V8 coverage that is awkward to merge across tests and runs. |
| 16 | +- Source maps need to be applied manually (e.g. via `v8-to-istanbul`) to get per-file line/branch numbers that match your source. |
| 17 | + |
| 18 | +The Istanbul approach in this repo instruments the source at build time, so coverage is collected the same way in every browser, merges cleanly across tests, and reports against your original source files out of the box. |
| 19 | + |
8 | 20 | ## Prerequisites |
9 | 21 |
|
10 | | -- The web application which you are using needs to have [`vite-plugin-istanbul`](https://github.com/ifaxity/vite-plugin-istanbul) configured during the build process. |
| 22 | +- The web application which you are using needs to have [`vite-plugin-istanbul`](https://github.com/ifaxity/vite-plugin-istanbul) configured during the build process. `vite-plugin-istanbul` v9 requires Vite ≥7 and is ESM-only, so the Vite config in this repo lives at `vite.config.mts`. |
11 | 23 | - 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. |
12 | 24 | - You could also add it only when the dev server `NODE_ENV=development` is used. |
13 | 25 |
|
@@ -37,4 +49,4 @@ See this version in the [`ct-react-vite`](https://github.com/mxschmitt/playwrigh |
37 | 49 |
|
38 | 50 | ## Using create-react-app / Webpack |
39 | 51 |
|
40 | | -See this archived version in the [`create-react-app`](https://github.com/mxschmitt/playwright-test-coverage/tree/create-react-app) branch. |
| 52 | +Create React App is no longer maintained — new projects should use Vite (this branch) or another modern toolchain. An archived reference of the CRA setup is preserved in the [`create-react-app`](https://github.com/mxschmitt/playwright-test-coverage/tree/create-react-app) branch but is not kept up to date. |
0 commit comments