Chrome Code Coverage Automation

index.js

import * as fs from "fs";
import { createSession } from "chrome-debugging-client";

createSession(async (session) => {
  let browser = await session.spawnBrowser("canary");
  let api = await session.createAPIClient("localhost", browser.remoteDebuggingPort);
  let tabs = await api.listTabs();
  let tab = tabs[0];
  let client = await session.openDebuggingProtocol(tab.webSocketDebuggerUrl);
  await client.send("Profiler.enable");
  await client.send("Page.enable");
  // cookies.json [{ name: string, value: string }, ...]
  let cookies = JSON.parse(fs.readFileSync("cookies.json", "utf8"));
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i];
    await client.send("Network.setCookie", {
      "url": "https://linkedin.com",
      "name": cookie.name,
      "value": cookie.value,
      "domain": ".linkedin.com"
    });
  }
  await client.send("Profiler.startPreciseCoverage", {
    callCount: true
  });
  await client.send("Page.navigate", {
    url: "https://linkedin.com/feed/"
  });
  await new Promise((resolve) => client.on("Page.loadEventFired", resolve));
  await new Promise((resolve) => setTimeout(resolve, 1000));
  let result = await client.send("Profiler.takePreciseCoverage");
  fs.writeFileSync("coverage.json", JSON.stringify(result, null, 2));
}).catch(err => {
  console.error(err);
});

Hi krisselden,

Came across this piece of code for the JS code coverage and could not get it working, do you have a sample test code on how to use this above as this would be of great help !

Thanks !

@svg7 didn't see your message earlier I would need more details about what didn't work.

Hi krisselden.

I got "coverage.json"

Could you tell how can I analyze this report file? It would be nice to create HTML report

Chrome Extension to generate a code coverage report of unused CSS and JS -- https://chrome.google.com/webstore/detail/css-and-js-code-coverage/gfdcbeanlpkgbkagoejiiojahaehhbno

Find unused CSS and JS code
When you load or run a page, the app tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need

How to use??

Step 1 : Install 'npm i code-coverage-client'
Step 2 : Start node app 'node index.js'
Step 3 : Start chrome browser in remote debug mode
3.1: Ubuntu: google-chrome --remote-debugging-port=9222
3.1: Windows: chrome.exe --remote-debugging-port=9222
Step 4 : Enter website address and Click on 'START' button
Step 5: Start testing
Step 6: Click on 'GET REPORT' button to receive a report