Using Puppeteer to Extract Code Coverage Data

October 29, 2018

 

阅读puppeteer example的代码，看到了里面有使用Coverage的使用，由于API中没有其目的的详细介绍，花了点时间研究了一下。

作用

Puppeteer的目的其实是对Chrome DevTools API的封装，而Coverage其实是对Chrome DevTools中的检查CSS 和 JS 代码覆盖率的功能的封装。

API

[typescript] 
class: Coverage
    coverage.startCSSCoverage(options)
    coverage.startJSCoverage(options)
    coverage.stopCSSCoverage()
    coverage.stopJSCoverage()

调用顺序：

  • 创建page，并调用startCSSCoverage/startJSCoverage开启分析js、css。
  • page.goto(URL);
  • 调用stopCSSCoverage/stopJSCoverage取回分析结果

分析结果为数组，没项包含了按url统计的js/css分析结果。

[text] 
url <string> StyleSheet URL
text <string> StyleSheet content
ranges <Array<Object>> StyleSheet ranges that were used. Ranges are sorted and non-overlapping.
    start <number> A start offset in text, inclusive
    end <number> An end offset in text, exclusive

DEMO

下面为一个完整的列子，用来分析某个网站的覆盖率数据。

[typescript] 
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.emulate(iPhone);

    //Begin collecting CSS coverage data
    await Promise.all([
        page.coverage.startCSSCoverage()
    ]);

    //Visit desired page
    await page.goto('http://www.baidu.com/');

    //Stop collection and retrieve the coverage iterator
    const [cssCoverage] = await Promise.all([
        page.coverage.stopCSSCoverage(),
    ]);

    //Investigate CSS Coverage and Extract Used CSS
    const css_coverage = [...cssCoverage];
    let css_used_bytes = 0;
    let css_total_bytes = 0;
    let covered_css = "";

    for (const entry of css_coverage) {
        css_total_bytes += entry.text.length;
        console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);
        for (const range of entry.ranges){
            css_used_bytes += range.end - range.start - 1;
            covered_css += entry.text.slice(range.start, range.end) + "\n";
        }
    }

    console.log(`Total Bytes of CSS: ${css_total_bytes}`);
    console.log(`Used Bytes of CSS: ${css_used_bytes}`);
    fs.writeFile("./exported_css.css", covered_css, function(err) {
        if(err) {
            return console.log(err);
        }
        console.log("The file was saved!");
    });

    await browser.close();
})();
See all postsSee all posts