Add Playwright fixture for CSS coverage collection

[bartveneman]

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 custom test fixture that extends Playwright's base test with CSS coverage collection capabilities

  • cssCoverage fixture: Automatically starts/stops CSS coverage for each test and writes results to disk
  • cssCoverageDir option: Configurable output directory (defaults to css-coverage)
  • Generates sanitized filenames based on test title paths
  • Attaches coverage JSON files to Playwright HTML reports

• Build configuration: Added tsdown entry point for the new Playwright module with proper ESM output and external dependency handling

• Package exports: Updated package.json to expose the new fixture via @projectwallace/css-code-coverage/playwright subpath export

• Documentation: Added comprehensive usage guide in README covering:

  • How to extend fixtures with the CSS coverage fixture
  • Example test implementation
  • Configuration options
  • Integration with the CLI tools

Implementation Details

• The fixture sanitizes test title paths to create valid filenames (removing special characters, converting to lowercase)
• Coverage data is written as JSON and automatically attached to test reports for easy access
• The cssCoverageDir is a worker-scoped option, allowing configuration at the test suite level
• The fixture properly handles async operations and integrates with Playwright's test lifecycle

https://claude.ai/code/session_018rtpbM5EyF5KJTUBiA7JSc

[codecov-commenter]

Bundle Report

Changes will increase total bundle size by 1.44kB (5.28%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name	Size	Change
playwright.js-esm	1.44kB	1.44kB (100%) ⬆️⚠️

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.76%. Comparing base (946d694) to head (a3e6d1c).
⚠️ Report is 1 commits behind head on main.

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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.