Lighthouse performance testing with Playwright

what is Lighthouse ?

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

There are different ways to run lighthouse tests against web pages, let us look at here, how to run it from playwright automation.

if you already have a playwright automation project setup then install the following npm module

npm install unlighthouse dotenv

Create a config file at the root level, unlighthouse-config.ts

import dotenv from 'dotenv';
dotenv.config();
const sitemapURL: string = process.env.BASE_URL!;
const device : string = process.env.DEVICE!;

export default {
    site: sitemapURL,
    scanner: {
        sitemap: ['/sitemap.xml' ],
        robotsTxt: false,
        // use mobile to scan
        device: device,
    },
    ci: {
        budget: {
            throttle: 90
        },
        buildStatic:true
    },
    cache: false,
    debug: true,
    extraHeaders: {
        // add any username, password or any security token 
    },
}

Get your project baseUrl and Device type { Mobile or Desktop } throguh environment variables.

Run the following command from root directory to run lighthouse and generate report

npx unlighthouse

You would see a report once the test is completed