Configuring Lighthouse reports in NeetoPlaydash

Playwright can audit the Lighthouse scores of a page with the help of the playwright-lighthouse, which lets you analyze the performance and get insights on the best practices used on your web applications. To know more details about setting up and using this package, refer to this link.

NeetoPlaydash allows you to save the Lighthouse HTML reports for the runs. To do this, the following pre-requisites are needed.

1. @bigbinary/neeto-playwright-reporter package version >= 1.7.1

2. The playwright-lighthouse package setup and working properly

We have added a few additional Playwright fixtures in the neeto-playwright reporter package to help make the setup easier. To do this, use the test module from neeto-playwright-reporter

- import test from "@playwright/test"
+ import { test } from "@bigbinary/neeto-playwright-reporter"

Once this is done all the additional fixtures in the neeto-playwright-reporter will be available for use. To add the Lighthouse HTML reports in NeetoPlaydash do the following setup.

// Sample test to verify Lighthouse reports

import { chromium } from "@playwright/test";
import { test } from "@bigbinary/neeto-playwright-reporter";

test("test title", async ({
    generateLighthouseMetaData,
    attachLighthouseReport,
  }) => {
    const { playAudit } = await import("playwright-lighthouse"); // Import the playwright-lighthouse package.
    // const { playAudit } = require("playwright-lighthouse"); // If cjs scripts are used
    const context = await chromium.launchPersistentContext(`${__dirname}/persistentContext`, {
        args: ["--remote-debugging-port=9222"],
      })

    const lighthouseMetadata = generateLighthouseMetaData(); // Used to get the metadata for generating the Lighthouse report

    const page = await context.newPage();
    await page.goto("/");

    await playAudit({
      page,
      port: 9222, // Use the port number open in the context for remote debugging
      thresholds: { // Set threshold values acceptable for your application
        performance: 0, 
        accessibility: 0,
        "best-practices": 0,
        seo: 0,
        pwa: 0,
      },
      reports: lighthouseMetadata,
    });

    await attachLighthouseReport(lighthouseMetadata.pathToLightHouseHTMLReport);
})

The generateLighthouseMetadata and attachLighthouseReport methods ensure that the lighthouse reports generated by playwright-lighthouse is accessible by the neeto-playwright-reporter while reporting the test results to NeetoPlaydash.

Viewing results in NeetoPlaydash

Once playwright-lighthouse is configured and the test is reported to NeetoPlaydash, you will be able to see a new section in the test results action pane called Lighthouse reports as seen below:

From here you will be able to see all the lighthouse reports you reported in a test attempt and view the HTML report

Demo