Extract slugify(), share TEST_CONTENT, simplify auto-coverage docs

- 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

Author: claude

README.md

@@ -83,14 +83,12 @@ test('my test', async ({ page, cssCoverage }) => {
 
 The fixture starts coverage when the test begins and stops it when the test ends. JSON files are written to the output directory and attached to the Playwright HTML report.
 
-**Enable for an entire test file** by requesting the fixture in `test.beforeEach`:
+**Enable for an entire test file** with a single line:
 
 ```ts
 import { test, expect } from './fixtures.js'
 
-test.beforeEach(async ({ cssCoverage }) => {
-  // every test in this file will now collect CSS coverage
-})
+test.beforeEach(async ({ cssCoverage }) => {})
 
 test('first test', async ({ page }) => { ... })
 test('second test', async ({ page }) => { ... })

src/playwright.test.ts

@@ -1,22 +1,15 @@
 import { mergeTests, test as base, expect } from '@playwright/test'
-import { test as withCssCoverage } from './playwright/index.js'
+import { test as withCssCoverage, slugify } from './playwright/index.js'
 import * as fs from 'node:fs/promises'
 import * as os from 'node:os'
 import * as path from 'node:path'
 
 const test = mergeTests(base, withCssCoverage)
 
+const TEST_CONTENT = '<style>body { margin: 0 }</style><body></body>'
+
 function expected_filename(title_path: string[]): string {
-	return (
-		title_path
-			.map((s) =>
-				s
-					.replaceAll(/\s+|\/|\./g, '-')
-					.replaceAll(/[^a-zA-Z0-9-_]/g, '')
-					.toLowerCase(),
-			)
-			.join('-') + '.json'
-	)
+	return title_path.map(slugify).join('-') + '.json'
 }
 
 test.describe('cssCoverageDir option', () => {
@@ -30,7 +23,7 @@ test.describe('cssCoverageDir option', () => {
 	})
 
 	test('writes coverage to the configured directory', async ({ page, cssCoverage }, testInfo) => {
-		await page.setContent('<style>body { margin: 0 }</style><body></body>')
+		await page.setContent(TEST_CONTENT)
 		filename = expected_filename(testInfo.titlePath)
 	})
 
@@ -45,7 +38,7 @@ test.describe('default cssCoverageDir', () => {
 	let filename = ''
 
 	test('defaults to css-coverage relative to cwd', async ({ page, cssCoverage }, testInfo) => {
-		await page.setContent('<style>body { margin: 0 }</style><body></body>')
+		await page.setContent(TEST_CONTENT)
 		filename = expected_filename(testInfo.titlePath)
 	})
 
@@ -66,7 +59,7 @@ test.describe('file naming', () => {
 	})
 
 	test('derives filename from the test title path', async ({ page, cssCoverage }, testInfo) => {
-		await page.setContent('<style>body { margin: 0 }</style><body></body>')
+		await page.setContent(TEST_CONTENT)
 		filename = expected_filename(testInfo.titlePath)
 	})
 
@@ -79,22 +72,19 @@ test.describe('file naming', () => {
 
 test.describe('file content', () => {
 	let dir = path.join(os.tmpdir(), 'css-code-coverage-fixture-content-test')
-	let filename = ''
 
 	test.use({ cssCoverageDir: dir })
 
 	test.beforeAll(async () => {
 		await fs.rm(dir, { recursive: true, force: true })
 	})
 
-	test('writes valid JSON', async ({ page, cssCoverage }, testInfo) => {
-		await page.setContent('<style>body { margin: 0 }</style><body></body>')
-		filename = expected_filename(testInfo.titlePath)
+	test('writes valid JSON', async ({ page, cssCoverage }) => {
+		await page.setContent(TEST_CONTENT)
 	})
 
-	test('content is an array of coverage entries', async ({ page, cssCoverage }, testInfo) => {
+	test('content is an array of coverage entries', async ({ page, cssCoverage }) => {
 		await page.setContent('<style>h1 { color: red }</style><body><h1>hi</h1></body>')
-		filename = expected_filename(testInfo.titlePath)
 	})
 
 	test.afterAll(async () => {

src/playwright/index.ts

@@ -10,6 +10,15 @@ type CssCoverageOptions = {
 	cssCoverageDir: string
 }
 
+// Needed because titlePath entries can contain '/' (creates subdirs), spaces,
+// dots, and other chars that are invalid or problematic in file names.
+export function slugify(s: string): string {
+	return s
+		.replaceAll(/\s+|\/|\./g, '-')
+		.replaceAll(/[^a-zA-Z0-9-_]/g, '')
+		.toLowerCase()
+}
+
 export const test = base_test.extend<CssCoverageFixtures, CssCoverageOptions>({
 	cssCoverageDir: ['css-coverage', { option: true }],
 
@@ -19,13 +28,7 @@ export const test = base_test.extend<CssCoverageFixtures, CssCoverageOptions>({
 			await use()
 			let coverage = await page.coverage.stopCSSCoverage()
 
-			let parts = testInfo.titlePath.map((s) =>
-				s
-					.replaceAll(/\s+|\/|\./g, '-')
-					.replaceAll(/[^a-zA-Z0-9-_]/g, '')
-					.toLowerCase(),
-			)
-			let file_name = parts.join('-') + '.json'
+			let file_name = testInfo.titlePath.map(slugify).join('-') + '.json'
 
 			let dir = path.resolve(process.cwd(), cssCoverageDir)
 			await fs.mkdir(dir, { recursive: true })