https://github.com/pirosikick/puppeteer-coverage-bug-in-media-query
https://github.com/pirosikick/puppeteer-coverage-bug-in-media-query
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pirosikick/puppeteer-coverage-bug-in-media-query
- Owner: pirosikick
- License: mit
- Created: 2019-08-01T05:28:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T00:25:33.000Z (over 2 years ago)
- Last Synced: 2025-02-26T15:54:17.718Z (3 months ago)
- Language: JavaScript
- Homepage: https://pirosikick.github.io/puppeteer-coverage-bug-in-media-query/
- Size: 349 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# puppeteer-coverage-bug-in-media-query
https://pirosikick.github.io/puppeteer-coverage-bug-in-media-query/example.css-1.js.html
A css coverage report `puppetter-to-istanbul` generates is broken when `@media` rule has indent.
## Run example
**example.css**
There are 3 `@media` rules in example.css:
1. with no indent
2. with space indent
3. with tab indent
```css
/* @media without indent */
@media screen {
h1 {
color: red;
}
}
/* @media with space indent */
@media screen {
h1 {
color: blue;
}
}
/* @media with tab indent */
@media screen {
h1 {
color: yellow;
}
}
```
**example.html**
```html
Hello
```
**collect-coverage.js**
The script which collect css coverage of example.css.
```js
const path = require("path");
const puppeteer = require("puppeteer");
const pti = require("puppeteer-to-istanbul");
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.coverage.startCSSCoverage();
await page.goto(`file:///${path.join(__dirname, "example.html")}`);
const coverage = await page.coverage.stopCSSCoverage();
pti.write(coverage);
await browser.close();
})();
```
Please do `npm run collect-coverage` to run collect-coverage.js and generate a coverage report as html.
```console
# Run collect-coverage.js and generate a coverage report
$ npm run collect-coverage.js
```
After that, `coverage/index.html` will be generated.
```
# Open a coverage report in browser
$ open coverage/index.html
```