Lighthouse integration with playwright

1. Want to test the performance on the webpage with your playwright test?
2. Want to check the status of your SEO?
3. Want to get the performance benchmarks with best practices that will happen automagically?
4. looking for an open-source tool that will do the job for you & easy to integrate with your current playwright test?

if the answer to all the above questions is Yes! then,

Today, We will understand how we can make use of Google lighthouse to test the performance benchmark of the webpage and steps on how we can integrate with the current playwright tests.

Google Lighthouse is an open-source, automated tool for measuring the quality of web pages. Lighthouse audits performance, accessibility, and search engine optimisation of web pages.

Pre - requisites:

1. Node installation
2. IDE (VsCode, atom, sublime etc).

Setup:

1. Create a playwright project.

npm init playwright

2. Add playwright-lighthouse dependency

npm i playwright-lighthouse

That's it.. We are done with the setup part. Now, Let's get into the action of integrating the lighthouse with playwright.

Steps:

1. Create a test/Spec file under the test folder.
2. Initialize the browser that the playwright will be launching to run on a specific port. So the code will look like this:

test("Ligthouse performance test", async () => {
    const browser = await chromium.launch({
        args: ['--remote-debugging-port=9222'],
        headless: true
      });
});

In the above code snippet, We actually have created a test block under which we have initialized the chromium browser to run on PORT 9222

3. Create a JSON file that will hold all your URLs.

4. Create a js or ts file to keep all your threshold data at one single location this will be used to audit the webpage & results will be marked based on these data.

You can add more audits like “PWA” n others in this file refer to https://www.npmjs.com/package/playwright-lighthouse

5. Now, we just need to add all the configs in play audit function

await playAudit({
            page: page,
            config: lighthouseDesktopConfig,
            thresholds: thresholds,
            port: 9222,
            opts: options,
            reports: {
                formats: {
                    html: true, //defaults to false
                },
                name: `ligthouse-${new Date().toISOString()}`, //defaults to `lighthouse-${new Date().getTime()}`
                directory: `${process.cwd()}/lighthouse`, //defaults to `${process.cwd()}/lighthouse`
            },
});

Breaking down playAudit():

1. page: page context.
2. config: Lighthouse by default works on Mobile layout, But if you want to run the test on Desktop layout we need to pass the inbuilt configuration file as lighthouseDesktopConfig.
3. threshold: Here we will import the threshold file to set the threshold values.
4. opts: These are nothing but if you want to set some option in lighthouse eg: loglevel: true; this will print all the logs while running the tests. (optional)
5. port: We need to specify the same port on which we are running the browser so that Lighthouse gets connected and runs the audits.
6. report: We can get reports in multiple formats eg: HTML, JSON & XML. Also, setting the directory name under which we need the reports.

Once we are done with all the above settings. The final code will look like this:

6. Now the last & final step is to run this test.

npx playwright test

7. All the tests will be performed in a headless mode by default (Can be changed in browser context) & after a successful run, we will be able to see the final report.

Lighthouse Detailed report

Future Scope:

1. We can add this with multiple URLs and run it as a separate pipeline & get the results. So that we can improve with SEO standards.
2. Parallel support to run with multiple workers & get the results faster.

References:

playwright-lighthouse

Fast and reliable end-to-end testing for modern web apps | Playwright

We are all set & now we can get the results of our webpage within seconds.

I hope this was informative, If you have any queries, Please feel free to drop them in here.

Thank you.