💡 Blog post: how to gather CSS Code Coverage data in your Playwright tests

[bartveneman]

Basically explain this:

projectwallace.com/tests/fixtures.ts

Lines 11 to 40 in 5df6bb5

	cssCoverage: [
	async ({ page }, use, testInfo) => {
	// start before test
	await page.coverage.startCSSCoverage()
	await use()
	// stop after test
	let coverage = await page.coverage.stopCSSCoverage()
	// build unique human-readable file name
	// titlePath gives [file, describe, test]
	let parts = testInfo.titlePath.map(s =>
	s.replaceAll(/\s+|\/|\./g, '-') // spaces or / → -
	.replaceAll(/[^a-zA-Z0-9-_]/g, '') // remove other invalid chars
	.toLowerCase() // lowercase
	)
	let file_name = parts.join('-') + '.json'
	let dir = path.join(process.cwd(), 'css-coverage')
	await fs.mkdir(dir, { recursive: true })
	let file_path = path.join(dir, file_name)
	await fs.writeFile(file_path, JSON.stringify(coverage))
	// attach to report
	await testInfo.attach('css-coverage', {
	path: file_path,
	contentType: 'application/json'
	})
	},
	{ auto: true }
	]

And then how to store them in github actions as artifacts so you can download them and analyze them in https://www.projectwallace.com/css-coverage