class: Coverage

Coverage 收集相关页面使用的 JavaScript 和 CSS 部分的信息。

使用 JavaScript 和 CSS 覆盖率来获取初始百分比的例子
执行代码：

  1. // 启用 JavaScript 和 CSS 覆盖
  2. await Promise.all([
  3.   page.coverage.startJSCoverage(),
  4.   page.coverage.startCSSCoverage()
  5. ]);
  6. // 导航至页面
  7. await page.goto('https://example.com');
  8. // 禁用 JavaScript 和 CSS 覆盖
  9. const [jsCoverage, cssCoverage] = await Promise.all([
  10.   page.coverage.stopJSCoverage(),
  11.   page.coverage.stopCSSCoverage(),
  12. ]);
  13. let totalBytes = 0;
  14. let usedBytes = 0;
  15. const coverage = [...jsCoverage, ...cssCoverage];
  16. for (const entry of coverage) {
  17.   totalBytes += entry.text.length;
  18.   for (const range of entry.ranges)
  19.     usedBytes += range.end - range.start - 1;
  20. }
  21. console.log(`Bytes used: ${usedBytes / totalBytes * 100}%`);

使用 Istanbul 输出一个覆盖率表格，见
puppeteer-to-istanbul.

coverage.startCSSCoverage(options)

  • options <[Object]> 覆盖范围的配置项
    • resetOnNavigation <[boolean]> 是否重置每个导航的覆盖范围。默认是 true。
  • returns: <[Promise]> （意译：当覆盖开始的时候返回一个 Promise）

coverage.startJSCoverage(options)

  • options <[Object]> 覆盖范围的配置项
    • resetOnNavigation <[boolean]> 是否重置每个导航的覆盖范围。默认是 true。
  • returns: <[Promise]> （意译：当覆盖开始的时候返回一个 Promise）

coverage.stopCSSCoverage()

  • returns: <[Promise]<[Array]<[Object]>>> （意译：所有样式表的覆盖率报告）
    • url <[string]> 样式表 URL
    • text <[string]> 样式表内容
    • ranges <[Array]<[Object]>> 所使用的StyleSheet范围。 范围已排序且不重叠。
      • start <[number]> 包含文字的起始偏移量
      • end <[number]> 文本中的结尾偏移，独占

注意 CSS Coverage 不包含没有 sourceURL 的动态注入式样式标签。

coverage.stopJSCoverage()

  • returns: <[Promise]<[Array]<[Object]>>> Promise that resolves to the array of coverage reports for all non-anonymous scripts
    • url <[string]> 脚本 URL
    • text <[string]> 脚本内容
    • ranges <[Array]<[Object]>> 已执行的脚本范围。 范围已排序且不重叠。
      • start <[number]> 包含文字的起始偏移量
      • end <[number]> 文本中的结尾偏移，独占

注意 JavaScript Coverage 不包含匿名脚本。 但是，具有 sourceURL 的脚本将被上报。