Skip to content

Instantly share code, notes, and snippets.

@krisselden
Created April 3, 2017 22:02
Show Gist options
  • Save krisselden/2487706bcbf37da26d4a89d0f74df768 to your computer and use it in GitHub Desktop.
Save krisselden/2487706bcbf37da26d4a89d0f74df768 to your computer and use it in GitHub Desktop.
Chrome Code Coverage Automation
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);
});
@svg7
Copy link

svg7 commented May 29, 2017

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 !

@krisselden
Copy link
Author

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

@olegdovger
Copy link

Hi krisselden.

I got "coverage.json"

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

@sk003cs
Copy link

sk003cs commented Jul 31, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment