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 data
    await Promise.all([
        page.coverage.startCSSCoverage()
    ]);
    // Visit desired page
    await page.goto('https://example.com');
  
    // Retrive the coverage objects
    const [jsCoverage, cssCoverage] = await Promise.all([
        page.coverage.stopJSCoverage(),
        page.coverage.stopCSSCoverage(),
    ]);
    // Examine JS Coverage
    const 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 Coverage
    const 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();
})();

Unlock your potential: Puppeteer fundamentals series, all in one place!

To deepen your understanding of Puppeteer, explore our series of Answers below:

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved