CSS rule coverage example

cssCoverage.js

'use strict';

launchChrome()
  .then(async chrome => {
    const cdp = await CDP({port: chrome.port});
    try {
      const {CSS, DOM, Page, Profiler} = cdp;

      setupDevToolsTarget(cdp);

      await Page.enable();
      await DOM.enable();
      await CSS.enable();

      CSS.startRuleUsageTracking();

      Page.navigate({url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy'});
      await Page.loadEventFired();

      const cssCoverageResults = await CSS.stopRuleUsageTracking();

      cssCoverageResults.ruleUsage.sort((a, b) => a.startOffset - b.startOffset);

      const cssRule = cssCoverageResults.ruleUsage[0];
      // cssRule === { endOffset: 566, startOffset: 17, styleSheetId: "6375.2", used: true }
      
      const cssFile = await CSS.getStyleSheetText({styleSheetId: cssRule.styleSheetId});
      
      const usedCssSelector = cssFile.text.substring(cssRule.startOffset, cssRule.endOffset);
      /* usedCssSelector ===
      `#toc a,
      .external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):focus:after,
      .external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):focus:before,
      .external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):hover:after,
      .external-icon:not([href^='https://mdn.mozillademos.org']):not(.ignore-external):hover:before,
      .waffle-sample .open-in-host:focus,
      .waffle-sample .open-in-host:hover,
      article a,
      article a[name]:active,
      article a[name]:focus,
      article a[name]:hover {
        text-decoration: none
      }
      .waffle-sample .o`
      ^^ this last line of the string is a incomplete css selector
      */
      return coverage;

    } catch (err) {
      console.error(err);
    } finally {
      cdp.close();
      chrome.kill();
    }
  })
  .catch(err => console.error(err));