Crafting Effective Web Audits: Leveraging Playwright and Lighthouse Integration

Photo by Dominik Scythe on Unsplash

This article discusses the experience of integrating Lighthouse with Playwright and addresses several key points. It starts by highlighting a bug in the recent version of the integration and recommends temporarily installing a specific version. The article also covers changes in configurations, introduces the “playwright-core” module designed for use with Playwright Lighthouse, and provides a code example for configuring Lighthouse audits for performance and accessibility testing.

While exploring the integration of Lighthouse with Playwright, I encountered major roadblocks due to numerous changes. Therefore, I decided to consolidate them. The most important aspect is that there is a bug in the recent version. As a result, you will need to install a specific version until the bug is resolved.

https://github.com/abhinaba-ghosh/playwright-lighthouse/issues/51

npm install --save-dev playwright-lighthouse@2.2.2

• The lighthouse:default configuration has been removed. This means that you need to specify the audits that you want to run explicitly.
• • The thresholds option now supports the performance and accessibility properties.
• The formFactor setting now accepts the values desktop, tablet, and mobile.
• he screenEmulation option now supports the width, height, and deviceScaleFactor properties.
• The playwright-core module has been released.

The playwright-core module is a lightweight version of the playwright module that is specifically designed for use with Playwright Lighthouse. The lighthouseConfiguration function launches a Chromium browser, creates a new page, configures Lighthouse with a desktop form factor, sets the screen emulation and device scale factor, navigates to the website specified by the url constant, and runs Lighthouse to generate a report.

The test.describe block defines a test case that calls the lighthouseConfiguration function. The test case uses the viewport: null option to ensure that the Lighthouse report is generated for the default viewport.

import * as playwright from 'playwright-core';
import { test } from '@playwright/test'
import * as lighthouseConfig from 'playwright-lighthouse';
const url = "<https://playwright.dev/>";
const lighthouseConfiguration = async () => {
  const browser = await playwright['chromium'].launch({
    args: ['--remote-debugging-port=9222', '--start-maximized'],
  });
  const page = await browser.newPage();
  const config = {
    extends: 'lighthouse:default',
    settings: {
      formFactor: 'desktop',
      screenEmulation: {
        mobile: false,
        width: 1350,
        height: 940,
        deviceScaleFactor: 1,
        disabled: false,
      },
    },
  };
  await page.goto(url);
  await lighthouseConfig.playAudit({
    page: page,
    config: config,
    thresholds: {
      performance: 50,
      accessibility: 50,
    },
    reports: {
      "formats": { html: true },
      name: "lighthouse-report",
      directory: "lighthouse-report" + Date.now().toString()
    },
    port: 9222
  });
  await browser.close();
};
test.describe('Perform lighthouse audit', () => {
  test.use({ viewport: null });
  test("Configure lighthouse for performance and accessibility audit", lighthouseConfiguration);
});

The viewport option is set to null, which will cause the lighthouse audit to be run in a full-screen window. This is not ideal, as it can skew the results of the audit. Instead, you should set the viewport option to a specific size, such as 600px or 1024px.The performance score is calculated based on the following metrics:

• First Contentful Paint (FCP): measures the time it takes for the first piece of content to appear on a user’s screen after they request a website.
• Total Blocking Time: refers to the amount of time that a web page is unresponsive to user input.
• Largest Contentful Paint (LCP): measures the time it takes for the largest content element on a web page to load and become visible to the user.
• Cumulative Layout Shift (CLS): measures the visual stability of a web page. To ensure that your page loads quickly and smoothly for all users, test it on different devices and network conditions.
• Speed Index: measures a website’s loading speed, taking into consideration factors such as when the first content appears, when the largest content appears, and when the website becomes fully interactive.

Automated tools catch many accessibility issues, but manual testing is crucial for a fully accessible experience, especially for users with disabilities. Manual testing uncovers issues missed by automated tools and provides a more comprehensive understanding of user experience. Lighthouse recommends combining automated and manual testing for accessibility.

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

https://www.amazon.com.au/Playwrights-Cookbook-Typescript-Cerosh-Jacob-ebook/dp/B0D9KCZDQ4/