You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
let report =awaitcalculcate_coverage(coverage_data)
29
27
30
-
let report =calculcate_coverage(coverage_data, parse_html)
28
+
// => report.line_coverage_ratio: 0.80
29
+
// => report.byte_coverage_ratio: 0.85
30
+
// => report.total_lines: 1000
31
+
// => report.covered_lines: 800
32
+
// etc.
31
33
```
32
34
33
35
See [src/index.ts](https://github.com/projectwallace/css-code-coverage/blob/main/src/index.ts) for the data that's returned.
@@ -36,12 +38,30 @@ See [src/index.ts](https://github.com/projectwallace/css-code-coverage/blob/main
36
38
37
39
There are two principal ways of collecting CSS Coverage data:
38
40
41
+
### Coverage API (preferred)
42
+
43
+
Both Puppeteer and Playwright provide an API to programmatically get the coverage data, allowing you to put that directly into this library. Here is the gist:
44
+
45
+
```ts
46
+
// Start collecting coverage
47
+
awaitpage.coverage.startCSSCoverage()
48
+
// Load the page, do all sorts of interactions to increase coverage, etc.
49
+
awaitpage.goto('http://example.com')
50
+
// Stop the coverage and store the result in a variable to pass along
51
+
let coverage =awaitpage.coverage.stopCSSCoverage()
In Edge, Chrome or chromium you can manually collect coverage in the browser's DevTools. In all cases you'll generate coverage data manually and the browser will let you export the data to a JSON file. Note that this JSON contains both JS coverage as well as the CSS coverage. Learn how it works:
42
62
43
63
- Collect coverage in Microsoft Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/coverage/
44
-
- Collect coevrage in Google Chrome: https://developer.chrome.com/docs/devtools/coverage/
64
+
- Collect coverage in Google Chrome: https://developer.chrome.com/docs/devtools/coverage/
45
65
46
66
Additionally, DevTools Tips writes about it in their [explainer](https://devtoolstips.org/tips/en/detect-unused-code/).
Both Puppeteer and Playwright provide an API to programmatically get the coverage data, allowing you to put that directly into this library. Here is the gist:
74
-
75
-
```ts
76
-
// Start collecting coverage
77
-
awaitpage.coverage.startCSSCoverage()
78
-
// Load the page, do all sorts of interactions to increase coverage, etc.
79
-
awaitpage.goto('http://example.com')
80
-
// Stop the coverage and store the result in a variable to pass along
81
-
let coverage =awaitpage.coverage.stopCSSCoverage()
let report =calculcate_coverage(coverage, parse_html)
91
-
```
92
-
93
-
### Optional: coverage from `<style>` blocks
94
-
95
-
Coverage generators also create coverage ranges for `<style>` blocks in HTML. If this applies to your code you should provide a HTML parser that we use to 'scrape' the HTML in case the browser gives us not just plain CSS contents. Depending on where you run this analysis you can use:
0 commit comments