Skip to content

Commit 5d3d96e

Browse files
Aman1905Aman1905
committed
playwright lighthouse report and lambdaSetBrowser hook
1 parent 2b0286e commit 5d3d96e

File tree

4 files changed

+92
-255
lines changed

4 files changed

+92
-255
lines changed

‎assets/images/playwright-testing/lighthouse-report.png‎

95.6 KB
Loading

‎docs/playwright-desired-capabilities.md‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -65,25 +65,5 @@ tests.
6565
| geoLocation | AR (Argentina) | Specify country code | `const capability = { "LT:Options": {"geoLocation": "AR",}}`|
6666
| idleTimeout | number| Specifies the timeout of the commands in seconds. <br /><br /> <b>Default value:</b> 300 <br /><br /> <b>Max value:</b> 1800<br /><br /> If a value greater than 1800 is added, idleTimeout will be set to 1800.| `const capability = { "LT:Options": {"idleTimeout": "<number>",}}`|
6767
| lambdaMaskCommands | array | <b> `sendType` or `sendFill` </b> Masks the type method of the ElementHandle and Locator class. <br /><br /> <b>`sendPress`</b> Masks the press method of the ElementHandle and Locator class. <br /><br /> <b>`setHTTPCredentials`</b> Masks the HTTP credentials parameter in the newContext and newPage method of the browser class. <br/><br /> <b>`setStorageState`</b> Masks the storage state parameter in the newContext and newPage method of the browser class <br /><br /> <b>`setGeolocation`</b> Masks the Geolocation parameter in the newContext and newPage method of the browser class.|`const capability = { "LT:Options": {'lambdaMaskCommands': ["sendType", "sendFill", "sendPress", "setHTTPCredentials", "setStorageState", "setGeolocation"]}}` <br /><br /> |
68-
| useSpecificBundleVersion | Boolean | If set **`true`:** LambdaTest will select the playwright server version as per the browser version you have passed in the capabilities. Check the [supported browser version list](/support/docs/playwright-test-execution-setup/#playwright-supported-browsers). <br /><br /> If the value set in the `browser version` capability is supported by multiple Playwright versions, LambdaTest checks your Playwright client version and sets the Playwright version accordingly. <br /><br /><br /> If set **`false` :** LambdaTest will run your playwright tests with the same version as setup in your local system and the browser version will also be used the compatible one as per the [supported browser version list](/support/docs/playwright-test-execution-setup/#playwright-supported-browsers) and not your defined one. | `const capabilities = { "LT:Options": {"useSpecificBundleVersion": true,}}` |
69-
70-
71-
<nav aria-label="breadcrumbs">
72-
<ul className="breadcrumbs">
73-
<li className="breadcrumbs__item">
74-
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com">
75-
Home
76-
</a>
77-
</li>
78-
<li className="breadcrumbs__item">
79-
<a className="breadcrumbs__link" target="_self" href="https://www.lambdatest.com/support/docs/">
80-
Support
81-
</a>
82-
</li>
83-
<li className="breadcrumbs__item breadcrumbs__item--active">
84-
<span className="breadcrumbs__link">
85-
Capabilities for Playwright
86-
</span>
87-
</li>
88-
</ul>
89-
</nav>
68+
| useSpecificBundleVersion | Boolean | If set **`true`:** LambdaTest will select the playwright server version as per the browser version you have passed in the capabilities. Check the [supported browser version list](/support/docs/playwright-test-execution-setup/#playwright-supported-browsers). <br /><br /> If the value set in the `browser version` capability is supported by multiple Playwright versions, LambdaTest checks your Playwright client version and sets the Playwright version accordingly. <br /><br /><br /> If set **`false` :** LambdaTest will run your playwright tests with the same version as setup in your local system and the browser version will also be used the compatible one as per the [supported browser version list](/support/docs/playwright-test-execution-setup/#playwright-supported-browsers) and not your defined one. | `const capability = { "LT:Options": {"useSpecificBundleVersion": true,}}` |
69+
| lambdaSetBrowserPosition | | The `lambdaSetBrowserPosition` function is designed to arrange two browser windows on the screen, ensuring each occupies exactly half of the available screen space. This layout facilitates side-by-side browser comparisons or multitasking workflows. <br /> <br /> Browsers supported : Chrome, Microsoft Edge , pw-chroium, pw-webkit & pw-firefox | `const capability = {action: 'lambdaSetBrowserPosition',}` |

‎docs/playwright-lighthouse library.md‎

Lines changed: 90 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: playwright-lighthouse-library
3-
title: How to Generate Lighthouse Reports With Playwright Lighthouse Library
4-
hide_title: true
3+
title: Generate Lighthouse Reports With Playwright Lighthouse Library
4+
hide_title: false
55
sidebar_label: Playwright Lighthouse Library
66
description: Learn how to generate multiple Lighthouse reports using Playwright Lighthouse Library.
77
keywords:
@@ -13,6 +13,11 @@ site_name: LambdaTest
1313
slug: playwright-lighthouse-library/
1414
---
1515

16+
import CodeBlock from '@theme/CodeBlock';
17+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
18+
import Tabs from '@theme/Tabs';
19+
import TabItem from '@theme/TabItem';
20+
1621
<script type="application/ld+json"
1722
dangerouslySetInnerHTML={{ __html: JSON.stringify({
1823
"@context": "https://schema.org",
@@ -36,112 +41,108 @@ slug: playwright-lighthouse-library/
3641
})
3742
}}
3843
></script>
44+
A Lighthouse Report is a performance, accessibility, SEO, and best practices evaluation report generated using [Google Lighthouse](https://developers.google.com/web/tools/lighthouse), an open-source, automated tool developed by Google. It is commonly used to assess and optimize the quality of web pages.
3945

46+
LambdaTest lets you perform Playwright automation while allowing you to generate Lighthouse reports with Playwright Lighthouse Library in a single test.
4047

41-
# Generating Lighthouse Reports With Playwright Lighthouse Library
42-
---
48+
> Lighthouse Report is supported on **Chrome**, **MicrosoftEdge** and **Chromium** browsers.
4349
44-
LambdaTest lets you perform Playwright automation while allowing you to generate Lighthouse reports with Playwright Lighthouse Library in a single test.
50+
:::tip Sample repository
51+
The code sample for generating the Lighthouse Performance Metrics in the Playwright test can be found on **LambdaTest's GitHub Repository**. You can either download or clone the repository to quickly run your tests. <a href="https://github.com/LambdaTest/playwright-sample/blob/main/playwright-lighthouse-report.js" className="github__anchor"><img loading="lazy" src={require('../assets/images/icons/github.png').default} alt="Image" className="doc_img"/> View on GitHub</a>
52+
:::
4553

4654
## Prerequisites
47-
---
55+
- Ensure that you have the Playwright Lighthouse Library installed in your web project.
56+
```bash
57+
npm install playwright-lighthouse
58+
```
59+
60+
- Export the *LIGHTHOUSE_LAMBDATEST* environment variable to your project environment.
61+
```bash
62+
export LIGHTHOUSE_LAMBDATEST='true'
63+
```
64+
65+
## Write your Test Script
66+
:::info
67+
Generating lighthouse report within the test might increase the test duration. It is advisable to generate the lighthouse reports only in the required tests.
68+
:::
69+
70+
You can easily add the Lighthouse Performance Metrics of the website you want to test by using the `lighthouseReport` action via the test. Following is the code snippet for generating Lighthouse report from the Playwright if you are using JavaScript:
71+
```js title="playwright-lighthouse-report.js"
72+
await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({
73+
action: 'lighthouseReport',
74+
arguments: { url: 'https://www.example.com' }
75+
})}`)
76+
```
4877

49-
You can generate Lighthouse reports on LambdaTest platform while executing Playwright tests with the following steps.
78+
### For Authenticated Pages
79+
> This feature is only supported on **Windows** and **macOS** platforms.
5080
51-
1. Ensure that you have the Playwright Lighthouse Library installed in your web project.
81+
The feature allows you to generate Lighthouse reports for authenticated web pages using Playwright. This is particularly useful for testing performance, accessibility, SEO, and other quality metrics for pages that require authentication. By leveraging authentication tokens, you can analyze restricted pages in your Playwright tests on both **Windows** and **macOS** environments.
5282

53-
```bash
54-
npm install playwright-lighthouse
83+
<Tabs className="docs__val">
84+
<TabItem value="win" label="Windows" default>
85+
86+
```javascript
87+
await page.evaluate(() => {}, `lambdatest_action: ${JSON.stringify({ action: 'lighthouseReport', arguments: { url: 'https://www.example.com', args: `--extra-headers ${JSON.stringify({ authtoken: "YOUR_AUTH_TOKEN" })}` } })}` );
5588
```
89+
</TabItem>
5690

57-
2. Export the *LIGHTHOUSE_LAMBDATEST* environment variable to your project environment.
91+
<TabItem value="mac" label="macOS" default>
5892

59-
```bash
60-
export LIGHTHOUSE_LAMBDATEST='true'
93+
```javascript
94+
await page.evaluate(() => {}, `lambdatest_action: ${JSON.stringify({ action: 'lighthouseReport', arguments: { url: 'https://www.example.com', args: '--extra-headers "{\\"authtoken\\": \\"YOUR_AUTH_TOKEN\\"}"' } })}`);
6195
```
96+
</TabItem>
97+
</Tabs>
6298

63-
## Run the Test
64-
---
99+
### Sample Test Script
100+
101+
This following script performs web automation testing using the Playwright and Lighthouse libraries on the LambdaTest platform. The script navigates to the DuckDuckGo search engine and searches for the term "Playwright". After that, the script runs a Lighthouse audit on the specified URL (https://duckduckgo.com) with defined performance thresholds and report formats.
65102

66-
This following script performs web automation testing using the Playwright and Lighthouse libraries on the LambdaTest platform.The script navigates to the DuckDuckGo search engine and searches for the term "Playwright". After that, the script runs a Lighthouse audit on the specified URL (https://duckduckgo.com) with defined performance thresholds and report formats.
67-
68-
```js
69-
import { chromium } from "playwright";
70-
import { playAudit } from "playwright-lighthouse";
71-
72-
(async () => {
73-
let browser, page;
74-
try {
75-
const capabilities = {
76-
browserName: "Chrome", // Browsers allowed: `Chrome`, `MicrosoftEdge` and `pw-chromium`
77-
browserVersion: "latest",
78-
"LT:Options": {
79-
platform: "Windows 11",
80-
build: "Web Performance testing",
81-
name: "Lighthouse test",
82-
user: process.env.LT_USERNAME,
83-
accessKey: process.env.LT_ACCESS_KEY,
84-
network: true,
85-
video: true,
86-
console: true,
87-
},
88-
};
89-
90-
browser = await chromium.connect({
91-
wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
92-
});
93-
94-
page = await browser.newPage();
95-
96-
await page.goto("https://duckduckgo.com");
97-
let element = await page.locator('[name="q"]');
98-
await element.click();
99-
await element.type("Playwright");
100-
await element.press("Enter");
101-
102-
try {
103-
await playAudit({
104-
url: "https://duckduckgo.com",
105-
page: page,
106-
thresholds: {
107-
performance: 50,
108-
accessibility: 50,
109-
"best-practices": 50,
110-
seo: 50,
111-
pwa: 10,
112-
},
113-
reports: {
114-
formats: {
115-
json: true,
116-
html: true,
117-
csv: true,
118-
},
119-
},
120-
});
121-
122-
await page.evaluate((_) => {},
123-
`lambdatest_action: ${JSON.stringify({ action: "setTestStatus", arguments: { status: "passed", remark: "Web performance metrics are are above the thresholds." } })}`);
124-
} catch (e) {
125-
await page.evaluate((_) => {},
126-
`lambdatest_action: ${JSON.stringify({ action: "setTestStatus", arguments: { status: "failed", remark: e.stack } })}`);
127-
console.error(e);
128-
}
129-
} catch (e) {
130-
await page.evaluate((_) => {},
131-
`lambdatest_action: ${JSON.stringify({ action: "setTestStatus", arguments: { status: "failed", remark: e.stack } })}`);
132-
} finally {
133-
await page.close();
134-
await browser.close();
135-
}
136-
})();
103+
```javascript reference title="playwright-lighthouse-report.js"
104+
https://github.com/LambdaTest/playwright-sample/blob/main/playwright-lighthouse-report.js
137105
```
138106

139-
## View Your Test Results
140-
---
107+
## Trigger your Test on LambdaTest
108+
### Set up your authentication
109+
110+
Make sure you have your LambdaTest credentials with you to run test automation scripts on LambdaTest. To obtain your access credentials, [purchase a plan](https://billing.lambdatest.com/billing/plans) or access the [Automation Dashboard](https://appautomation.lambdatest.com/). Then, set LambdaTest `Username` and `Access Key` in environment variables with following commands.
111+
112+
<Tabs className="docs__val">
113+
114+
<TabItem value="bash" label="Linux / MacOS" default>
115+
<div className="lambdatest__codeblock">
116+
<CodeBlock className="language-bash">
117+
{`export LT_USERNAME=${ YOUR_LAMBDATEST_USERNAME()}
118+
export LT_ACCESS_KEY=${ YOUR_LAMBDATEST_ACCESS_KEY()}`}
119+
</CodeBlock>
120+
</div>
121+
122+
</TabItem>
123+
124+
<TabItem value="powershell" label="Windows" default>
125+
126+
<div className="lambdatest__codeblock">
127+
<CodeBlock className="language-powershell">
128+
{`set LT_USERNAME=${ YOUR_LAMBDATEST_USERNAME()}
129+
set LT_ACCESS_KEY=${ YOUR_LAMBDATEST_ACCESS_KEY()}`}
130+
</CodeBlock>
131+
</div>
132+
133+
</TabItem>
134+
</Tabs>
135+
136+
### Run your test
137+
Pass the below command in the terminal to run the test:
138+
```bash
139+
node RELATIVE_PATH_OF_YOUR_TEST_FILE
140+
```
141141

142+
### View Your Test Results
142143
To view your test runs that uses Playwright Lighthouse Library, go to the LambdaTest [Web Automation Dashboard](https://automation.lambdatest.com/).
143144

144-
<img loading="lazy" src={require('../assets/images/uploads/playwright_lighthouse_lib.png').default} alt="Image" width="1347" height="565" className="doc_img"/>
145+
<img loading="lazy" src={require('../assets/images/playwright-testing/lighthouse-report.png').default} alt="Image" className="doc_img"/>
145146

146147

147148

0 commit comments

Comments
 (0)