Rayrun
← Back to videos

Playwright & Lighthouse Integration | Playwright Tutorial - Part 88

Lighthouse is a tool developed by Google that analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

In this video, we learn how to use Lighthouse Audit with Playwright and perform performance, accessibility, SEO, and PWA audits on a web page. Let's go through the process step by step.

  1. Install Lighthouse and playwright-lighthouse packages:

    npm install lighthouse playwright-lighthouse
  2. Use the playwright.chromium.launch() method to start a new Chromium instance.

  3. Pass the required port number for remote debugging in chromium.launch() and playwrightAudit() functions.

  4. Create a new browser context and a new page using the browser.newContext() and context.newPage() methods.

  5. Perform the audit for specific categories and thresholds using playwrightAudit().

    Example:

    await playwrightAudit({
        result: {
          categories: {
            performance: 50,
            accessibility: 100,
            bestpractices: 100,
            seo: 100,
            pwa: 100,
          },
        },
        ignore: { performance: true },
        port: 9222,
        page: page,
      });
  6. Save the audit report in different formats and directories using the mkdir and fs.writeFile functions.

  7. You can also run the tests for multiple URLs using the test.use() and test.each() methods provided by the Playwright.

  8. If you're interested in auditing only specific categories (e.g., performance), you can use a custom Lighthouse config and pass it to the playwrightAudit() function.

Example:

import { config as lhDesktopConfig } from "lighthouse/lighthouse-core/config/lr-desktop-config.js";

await playwrightAudit({
  config: lhDesktopConfig,
  // ...
});
  1. Lastly, you can run the Lighthouse Audit for authenticated pages by following the same procedure but making sure to log in before performing the audit.

That's it! You can now run Lighthouse Audits for your web applications using the Playwright framework! If you have any questions or need further assistance, feel free to ask in the comments.

Related Videos

Playwright Live: Español: Comunidad de Playwright, última versión y más
Playwright Live: Español: Comunidad de Playwright, última versión y más
#16 - ARIA and how Playwright is making use of it to identify UI controls?
#16 - ARIA and how Playwright is making use of it to identify UI controls?
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Introduction to Playwright | What is Playwright test?
Introduction to Playwright | What is Playwright test?
TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.