What is code coverage in puppeteer?
Code coverage is a measurement of how many lines/blocks/arcs of your code are executed while the automated tests are running.
Popular browsers, like Chrome and Firefox, offer a coverage tool as part of their developer tools.
However, you can also use puppeteer to automate code coverage. In this shot, we will see how to perform code coverage for JavaScript and CSS.
Setup
You can install puppeteer using npm or yarn:
npm i puppeteer
# or "yarn add puppeteer"
Getting code coverage data
We will first use puppeteer to spin up a headless Chrome browser instance and ‘record’ the JavaScript and CSS usage for a webpage of interest.
The code below visits a page and retrieves the JS and CSS coverage objects:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Start recording JS and CSS coverage data
await Promise.all([
page.coverage.startJSCoverage(),
page.coverage.startCSSCoverage()
]);
await page.goto('https://example.com/');
// Retrive the coverage objects
const [jsCoverage, cssCoverage] = await Promise.all([
page.coverage.stopJSCoverage(),
page.coverage.stopCSSCoverage(),
]);
await browser.close();
})();
You can also emulate any browser environment with puppeteer. For example, you can use
page.emulate(devices['iPhone X'])to emulate an iPhone X environment.
Examine code coverage data
Now, let’s add code to examine the collected code coverage data.
const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();// Start recording JS and CSS coverage dataawait Promise.all([page.coverage.startCSSCoverage()]);// Visit desired pageawait page.goto('https://example.com');// Retrive the coverage objectsconst [jsCoverage, cssCoverage] = await Promise.all([page.coverage.stopJSCoverage(),page.coverage.stopCSSCoverage(),]);// Examine JS Coverageconst js_coverage = [...jsCoverage];let js_used_bytes = 0;let js_total_bytes = 0;let covered_js = "";for (const entry of js_coverage[0]) {js_total_bytes += entry.text.length;console.log(`Total Bytes for ${entry.url}: ${entry.text.length}`);for (const range of entry.ranges){js_used_bytes += range.end - range.start - 1;covered_js += entry.text.slice(range.start, range.end) + "\n";}}console.log(`Total Bytes of JS: ${js_total_bytes}`);console.log(`Used Bytes of JS: ${js_used_bytes}`);// Examine CSS Coverageconst css_coverage = [...cssCoverage];let css_used_bytes = 0;let css_total_bytes = 0;let covered_css = "";for (const entry of css_coverage[0]) {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}`);await browser.close();})();
Free Resources
