Skip to main content

Lighthouse Integration

Learn how to integrate Lighthouse in your Playwright tests.

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

Install the package

Run the following command to install the BrowserStack playwright-lighthouse package to your project:

npm i "https://github.com/asambstack/playwright-lighthouse.git#approach-1-bstack"

Export the LH_BROWSERSTACK environment variable to your project environment as shown:

export LH_BROWSERSTACK='true'

Edit your script

After installing the required libraries, you can use the following sample script in your code:

//sample_test.js
'use strict';
const {chromium, firefox, webkit} = require('playwright');
const fs = require('fs')
const {promisify} = require('util');
const sleep = promisify(setTimeout);
const { playAudit } = require('playwright-lighthouse');

const run = async (browser_name, os_name, os_version_name, terminal = null, pw_version = null) => {
  const tag = `Lighthouse Playwright`
  const caps = {
    build: `${tag}`,
    name: `[${os_version_name}] ${browser_name}`,
    browser: browser_name,
    os: os_name,
    os_version: os_version_name,
    'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
    'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
    'browserstack.networkLogs': true,
    'browserstack.console': 'errors',
  };
  const browser = await webkit.connect({
    wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`,
  });
  
  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
  });

  const page = await browser.newPage();
  await page.goto('https://www.google.com/ncr');
  const element = await page.$('[aria-label="Search"]');
  await element.click();
  await element.type('BrowserStack');
  await element.press('Enter');
  const title = await page.title('');
  console.log(title);
  try {
    expect(title).to.equal("BrowserStack - Google Search", 'Expected page title is incorrect!');
    // following line of code is responsible for marking the status of the test on BrowserStack as 'passed'. You can use this code in your after hook after each test
    await page.evaluate(_ => {}, `browserstack_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {status: 'passed',reason: 'Title matched'}})}`);
  } catch {
    await page.evaluate(_ => {}, `browserstack_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {status: 'failed',reason: 'Title did not match'}})}`);
  }

  await playAudit({
    page: page,
    thresholds: {
      performance: 10,
      accessibility: 10,
      'best-practices': 10,
      seo: 10,
      pwa: 10,
    },
    reports: {
      formats: {
        json: true,
        html: true,
        csv: true,
      }
    },
    port: 9223
  });

  await page.close();
  await browser.close();
};


Promise.all([
  run('playwright-chromium', 'osx', 'catalina'),
  run('playwright-chromium', 'osx', 'monterey'),
  run('playwright-chromium', 'windows', '10'),
  ]).then( responses => {
  for (const response of responses) {
    console.log(response);
  }
}).catch( error => {
  console.error(`Failed to fetch: ${error}`)
});

Due to the default behavior of Lighthouse with Playwright, the tests on playwright-chromium browser will run in a new tab. However, tests with chrome browser will run in the same tab as that of Playwright. Therefore, the Playwright code after the “playAudit execution” will fail in chrome browser, as Lighthouse will close the tab once its execution is done. To run your test on chrome browser, modify the following code snippet:

  await playAudit({
    url: page.url(),
    page: await context.newPage(),
});
Note: Minimum supported version for chrome runs is 90.

Run your script

Run your script using the following command:

node sample_test.js

View test results

View your tests on BrowserStack on the BrowserStack Automate dashboard. Check out viewing test results to learn more about the dashboard.

Automate Dashboard

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy