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