Lighthouse Performance Integration

Performance testing just got smarter! Lighthouse performance audits are a game-changer for developers looking to optimize web application performance, but integrating them seamlessly into Playwright test suites can be challenging. This comprehensive guide will walk you through leveraging Lighthouse within your Playwright tests, transforming how you measure and improve web performance.

Prerequisites#

• Node.js (v16.x or later)
• Playwright (v1.35+)
• TypeScript (v4.7+)
• Chrome or Chromium browser
• NPM or Yarn package manager
• Basic understanding of performance testing
• Familiarity with TypeScript and test automation

Estimated Setup Time: 30-45 minutes

Understanding Lighthouse Performance Integration#

Why Lighthouse Matters in Performance Testing#

Performance isn't just a metric—it's a critical user experience factor. Lighthouse provides comprehensive audits that go beyond traditional performance testing, offering insights into:

• Page load speed
• Accessibility
• Best practices
• SEO optimization
• Progressive web app capabilities

Setting Up Lighthouse with Playwright#

To integrate Lighthouse into your Playwright test suite, you'll need to install a few key dependencies:

npm install @playwright/test lighthouse puppeteer
npm install -D @types/lighthouse

npm install @playwright/test lighthouse puppeteer
npm install -D @types/lighthouse

Implementing Lighthouse Performance Audits#

Basic Lighthouse Test Configuration#

Here's a comprehensive example of integrating Lighthouse performance audits with Playwright:

import { test, expect } from "@playwright/test";
import lighthouse from "lighthouse";
import * as chromeLauncher from "chrome-launcher";

test("Performance Audit for Landing Page", async ({ page }) => {
  // Navigate to target page
  await page.goto("https://example.com");

  // Launch Chrome for Lighthouse
  const chrome = await chromeLauncher.launch({ chromeFlags: ["--headless"] });

  // Run Lighthouse audit
  const runnerResult = await lighthouse(page.url(), {
    logLevel: "info",
    output: "json",
    onlyCategories: ["performance"],
    port: chrome.port,
  });

  // Extract performance score
  const performanceScore = runnerResult.lhr.categories.performance.score * 100;

  // Assert performance threshold
  expect(performanceScore).toBeGreaterThan(80);

  // Close Chrome instance
  await chrome.kill();
});

import { test, expect } from "@playwright/test";
import lighthouse from "lighthouse";
import * as chromeLauncher from "chrome-launcher";

test("Performance Audit for Landing Page", async ({ page }) => {
  // Navigate to target page
  await page.goto("https://example.com");

  // Launch Chrome for Lighthouse
  const chrome = await chromeLauncher.launch({ chromeFlags: ["--headless"] });

  // Run Lighthouse audit
  const runnerResult = await lighthouse(page.url(), {
    logLevel: "info",
    output: "json",
    onlyCategories: ["performance"],
    port: chrome.port,
  });

  // Extract performance score
  const performanceScore = runnerResult.lhr.categories.performance.score * 100;

  // Assert performance threshold
  expect(performanceScore).toBeGreaterThan(80);

  // Close Chrome instance
  await chrome.kill();
});

Advanced Lighthouse Configuration#

For more granular control, you can customize Lighthouse audit parameters:

const lighthouseConfig = {
  extends: "lighthouse:default",
  settings: {
    skipAudits: ["uses-http2"],
    throttling: {
      rttMs: 40,
      throughputKbps: 10240,
      cpuSlowdownMultiplier: 1,
    },
  },
};

const lighthouseConfig = {
  extends: "lighthouse:default",
  settings: {
    skipAudits: ["uses-http2"],
    throttling: {
      rttMs: 40,
      throughputKbps: 10240,
      cpuSlowdownMultiplier: 1,
    },
  },
};

Troubleshooting Performance Integration#

Best Practices#

• 🚀 Always run performance tests in a consistent environment
• 💡 Use realistic network throttling settings
• 🔒 Implement performance budgets
• 📊 Track performance metrics over time
• 🧪 Combine Lighthouse with synthetic monitoring
• 🔍 Focus on Core Web Vitals
• ⚡ Optimize assets before comprehensive testing

Next Steps#

• Explore advanced Lighthouse configuration options
• Integrate performance budgets in CI/CD pipelines
• Learn about Web Vitals and performance optimization techniques
• Investigate browser-specific performance variations
• Build custom Lighthouse plugins for specific testing needs