Generating Lighthouse Reports With Playwright Lighthouse Library

LambdaTest lets you perform Playwright automation while allowing you to generate Lighthouse reports with Playwright Lighthouse Library in a single test.

Prerequisites

You can generate Lighthouse reports on LambdaTest platform while executing Playwright tests with the following steps.

Ensure that you have the Playwright Lighthouse Library installed in your web project.

npm install playwright-lighthouse

Export the LIGHTHOUSE_LAMBDATEST environment variable to your project environment.

export LIGHTHOUSE_LAMBDATEST='true'

Run the Test

This following script performs web automation testing using the Playwright and Lighthouse libraries on the LambdaTest platform.The script navigates to the DuckDuckGo search engine and searches for the term "Playwright". After that, the script runs a Lighthouse audit on the specified URL (https://duckduckgo.com) with defined performance thresholds and report formats.

import { chromium } from "playwright";
import { playAudit } from "playwright-lighthouse";

(async () => {
  let browser, page;
  try {
    const capabilities = {
      browserName: "Chrome", // Browsers allowed: `Chrome`, `MicrosoftEdge` and `pw-chromium`
      browserVersion: "latest",
      "LT:Options": {
        platform: "Windows 11",
        build: "Web Performance testing",
        name: "Lighthouse test",
        user: process.env.LT_USERNAME,
        accessKey: process.env.LT_ACCESS_KEY,
        network: true,
        video: true,
        console: true,
      },
    };

    browser = await chromium.connect({
      wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
    });

    page = await browser.newPage();

    await page.goto("https://duckduckgo.com");
    let element = await page.locator('[name="q"]');
    await element.click();
    await element.type("Playwright");
    await element.press("Enter");

    try {
      await playAudit({
        url: "https://duckduckgo.com",
        page: page,
        thresholds: {
          performance: 50,
          accessibility: 50,
          "best-practices": 50,
          seo: 50,
          pwa: 10,
        },
        reports: {
          formats: {
            json: true,
            html: true,
            csv: true,
          },
        },
      });

      await page.evaluate((_) => {},
      `lambdatest_action: ${JSON.stringify({ action: "setTestStatus", arguments: { status: "passed", remark: "Web performance metrics are are above the thresholds." } })}`);
    } catch (e) {
      await page.evaluate((_) => {},
      `lambdatest_action: ${JSON.stringify({ action: "setTestStatus", arguments: { status: "failed", remark: e.stack } })}`);
      console.error(e);
    }
  } catch (e) {
    await page.evaluate((_) => {},
    `lambdatest_action: ${JSON.stringify({ action: "setTestStatus", arguments: { status: "failed", remark: e.stack } })}`);
  } finally {
    await page.close();
    await browser.close();
  }
})();