From 41c8ad896527fc9b75bee4b64f5cd55f5ddc898e Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Sun, 24 May 2026 11:23:39 -0700 Subject: [PATCH] docs: refresh README with relevance notes Adds a "verified with" line so readers can see the stack was refreshed, explains why this repo's Istanbul-based approach is preferred over Playwright's built-in V8 coverage (Chromium-only, hard to merge, needs source-map post-processing), notes that vite-plugin-istanbul v9 requires Vite >=7 and is ESM-only (hence vite.config.mts), and clarifies that the create-react-app branch is an archived reference since CRA is no longer maintained. --- README.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9f9b9956fd..2689d80493 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,21 @@ 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. +Verified with: React 19, Vite 8, TypeScript 6, Playwright 1.60, `vite-plugin-istanbul` 9, `nyc` 18. + +## Why not Playwright's built-in coverage? + +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: + +- It is Chromium-only — no Firefox or WebKit. +- It produces V8 coverage that is awkward to merge across tests and runs. +- Source maps need to be applied manually (e.g. via `v8-to-istanbul`) to get per-file line/branch numbers that match your source. + +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. + ## Prerequisites -- 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. +- 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`. - 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. @@ -37,4 +49,4 @@ See this version in the [`ct-react-vite`](https://github.com/mxschmitt/playwrigh ## Using create-react-app / Webpack -See this archived version in the [`create-react-app`](https://github.com/mxschmitt/playwright-test-coverage/tree/create-react-app) branch. +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.