Playwright & Lighthouse Integration | Playwright Tutorial - Part 88

• 01:01 Installing Lighthouse and playwright-lighthouse packages
• 01:46 Launching Chromium instance and creating new page
• 03:01 Performing Lighthouse Audit
• 06:12 Saving Lighthouse Audit reports
• 09:37 Running tests for multiple URLs
• 12:07 Using custom Lighthouse config
• 13:27 Auditing authenticated pages

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,
  // ...
});

9. 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.