Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

puppeteer

What is code coverage in puppeteer?

Nouman Abbasi

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();
})();

RELATED TAGS

puppeteer

CONTRIBUTOR

Nouman Abbasi
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring