Add Playwright fixture for CSS coverage collection#135
Merged
Conversation
Exposes a `test` fixture via `@projectwallace/css-code-coverage/playwright` that starts/stops CSS coverage around each test and writes JSON files to disk automatically. The output directory defaults to `css-coverage` and is configurable via the `cssCoverageDir` fixture option in playwright.config.ts. Closes #134
Users should explicitly request cssCoverage in each test rather than having it run automatically for all tests. The expect re-export was unnecessary since users import it directly from @playwright/test.
Bundle ReportBundle size has no change ✅ |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #135 +/- ##
=======================================
Coverage 96.76% 96.76%
=======================================
Files 14 14
Lines 1081 1081
Branches 143 143
=======================================
Hits 1046 1046
Misses 34 34
Partials 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…Tests usage - Tests cover: configured output directory, default directory, file naming from titlePath, and file content being valid JSON coverage data - Drop scope: 'worker' from cssCoverageDir so it can be set per describe block with test.use() — worker-scoped options can only be set at file top-level which is too restrictive for users - Use mergeTests() instead of test.extend() when composing the fixture, which is the correct Playwright API for merging test objects - Update README to reflect mergeTests usage
- Extract slugify() as a named exported function in the playwright fixture with a comment explaining why it's needed (titlePath entries contain '/' which would otherwise create subdirectories) - Import slugify in tests instead of duplicating the regex logic - Extract repeated HTML string to TEST_CONTENT const in tests - Collapse beforeEach auto-coverage example to a single line in README
Avoids importing @playwright/test entirely, removing the implicit dependency that would require it as a peerDependency or dependency in the published package. Users wire save_css_coverage() into their own Playwright fixture, keeping full control over the fixture lifecycle. Tests no longer need a browser — mock coverage data is passed directly to save_css_coverage(), making them faster and simpler.
The subpath added no real value once reduced to a plain helper function. The full fixture setup is simple enough to paste directly, and keeping it in the README means users own the code and can adapt it freely.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a new Playwright fixture that enables automatic CSS coverage collection and reporting for individual tests. The fixture integrates with Playwright's built-in coverage API and outputs results as JSON files that can be analyzed with the existing CLI tools.
Key Changes
New Playwright fixture module (
src/playwright/index.ts): Exports a customtestfixture that extends Playwright's base test with CSS coverage collection capabilitiescssCoveragefixture: Automatically starts/stops CSS coverage for each test and writes results to diskcssCoverageDiroption: Configurable output directory (defaults tocss-coverage)Build configuration: Added tsdown entry point for the new Playwright module with proper ESM output and external dependency handling
Package exports: Updated
package.jsonto expose the new fixture via@projectwallace/css-code-coverage/playwrightsubpath exportDocumentation: Added comprehensive usage guide in README covering:
Implementation Details
cssCoverageDiris a worker-scoped option, allowing configuration at the test suite levelhttps://claude.ai/code/session_018rtpbM5EyF5KJTUBiA7JSc