Skip to content

Commit 3e90cd2

Browse files
Ishavyas9Ishavyas9
authored
Merge pull request #1133 from Ishavyas9/main
playwright lighthouse report and lambdaSetBrowser hook
2 parents 2891332 + 1bb3460 commit 3e90cd2

File tree

8 files changed

+137
-300
lines changed

8 files changed

+137
-300
lines changed

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

95.6 KB
Loading

‎docs/biometric-authentication.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ Below given is the list of Biometric Authentication APIs which are supported. Pl
7474
|`canEvaluatePolicy`: The canEvaluatePolicy(_:error:) method of LAContext that checks whether a specific biometric authentication policy can be evaluated on the device.|
7575
</div>
7676

77+
:::warning note
78+
We don’t support apps using IOS Keychain APIs with Biometric access control. For more details [IOS Keychain Documentation](https://developer.apple.com/documentation/localauthentication/accessing-keychain-items-with-face-id-or-touch-id)
79+
:::
80+
7781
</TabItem>
7882

7983
<TabItem value="powershell" label="Android >= version 11" default>
@@ -83,12 +87,14 @@ Below given is the list of Biometric Authentication APIs which are supported. Pl
8387
|----------------|
8488
| `BiometricPrompt` class's `authenticate` method from the **AndroidX Biometric library** is used for Biometric authentication on Android devices. <br /><br />📕For details, please check [AndroidX Biometric Documentation](https://developer.android.com/jetpack/androidx/releases/biometric). |
8589
| **Android's Native** `BiometricPrompt` API is part of the Android platform and is used for Biometric authentication on Android devices.<br /><br />📕 For details, please check [Android Developers Documentation](https://developer.android.com/reference/android/hardware/biometrics/BiometricPrompt).|
90+
| `BiometricManager` API<br /><br /> 📕 For more details [BiometricManager Documentation](https://developer.android.com/reference/android/hardware/biometrics/BiometricManager) |
91+
| `KeyguardManager` API <br /><br />📕 For more details [KeyguardManager Documentation](https://developer.android.com/reference/android/app/KeyguardManager) |
8692
</div>
8793

8894
</TabItem>
8995
</Tabs>
9096

91-
:::warning note
97+
:::tip
9298
The OS versions and APIs mentioned above are subject to change as per the latest OS updates and best practices recommended by Android and iOS.
9399
:::
94100

‎docs/camera-image-injection.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ import TabItem from '@theme/TabItem';
4848
})
4949
}}
5050
></script>
51-
5251
Camera Image Injection feature allows you to test **image capturing, QR code scanning**, and **barcode scanning** functionalities in your app across **3000+ real devices** on the LambdaTest Real Device Cloud platform.
5352

5453
This tool is ideal for testing features such as:
@@ -84,7 +83,8 @@ Below given is the list of Camera APIs which are supported by LambdaTest Image I
8483
| Supported APIs |
8584
|----------------|
8685
| `didFinishPickingMediaWithInfo` API of `UIImagePickerController` iOS SDK class for capturing an image. <br /><br /> 📕 For details, please check [Apple documentation](https://developer.apple.com/documentation/uikit/uiimagepickercontrollerdelegate/1619126-imagepickercontroller)|
87-
| `AVCapturePhoto` iOS SDK class for receiving captured photos from `AVCapturePhotoOutput` API. <br /><br />📕 For details, please check [Apple Documentation](https://developer.apple.com/documentation/avfoundation/avcapturephoto). |
86+
| `AVCapturePhoto` iOS SDK class for receiving captured photos from `AVCapturePhotoOutput` API. <br /><br />📕 For details, please check [Apple Documentation](https://developer.apple.com/documentation/avfoundation/avcapturephoto).|
87+
| `AVMetadataMachineReadableCodeObject` is a subclass of `AVMetadataObject` iOS SDK class for scanning QR/Barcodes. <br /><br />📕 For more details, please check [AVMetadataMachineReadableCodeObject Documentation](https://developer.apple.com/documentation/avfoundation/avmetadatamachinereadablecodeobject) |
8888
</div>
8989

9090
</TabItem>

‎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 /> OS Supported - Windows <br /><br /> Browsers supported : Chrome, Microsoft Edge , pw-chroium, pw-webkit & pw-firefox | `const capability = {action: 'lambdaSetBrowserPosition',}` |

‎docs/playwright-lighthouse library.md‎

Lines changed: 100 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,118 @@ 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({
88+
action: 'lighthouseReport',
89+
arguments: { url: 'https://www.example.com',
90+
args: `--extra-headers
91+
${JSON.stringify({ authtoken: "YOUR_AUTH_TOKEN" })}`
92+
} })}` );
5593
```
94+
</TabItem>
5695

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

59-
```bash
60-
export LIGHTHOUSE_LAMBDATEST='true'
98+
```javascript
99+
await page.evaluate(() => {}, `lambdatest_action: ${JSON.stringify({
100+
action: 'lighthouseReport',
101+
arguments: { url: 'https://www.example.com',
102+
args: '--extra-headers
103+
"{\\"authtoken\\": \\"YOUR_AUTH_TOKEN\\"}"'
104+
} })}`);
61105
```
106+
</TabItem>
107+
</Tabs>
62108

63-
## Run the Test
64-
---
109+
### Sample Test Script
110+
111+
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.
65112

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-
})();
113+
```javascript reference title="playwright-lighthouse-report.js"
114+
https://github.com/LambdaTest/playwright-sample/blob/main/playwright-lighthouse-report.js
137115
```
138116

139-
## View Your Test Results
140-
---
117+
## Trigger your Test on LambdaTest
118+
### Set up your authentication
119+
120+
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.
121+
122+
<Tabs className="docs__val">
123+
124+
<TabItem value="bash" label="Linux / MacOS" default>
125+
<div className="lambdatest__codeblock">
126+
<CodeBlock className="language-bash">
127+
{`export LT_USERNAME=${ YOUR_LAMBDATEST_USERNAME()}
128+
export LT_ACCESS_KEY=${ YOUR_LAMBDATEST_ACCESS_KEY()}`}
129+
</CodeBlock>
130+
</div>
131+
132+
</TabItem>
133+
134+
<TabItem value="powershell" label="Windows" default>
135+
136+
<div className="lambdatest__codeblock">
137+
<CodeBlock className="language-powershell">
138+
{`set LT_USERNAME=${ YOUR_LAMBDATEST_USERNAME()}
139+
set LT_ACCESS_KEY=${ YOUR_LAMBDATEST_ACCESS_KEY()}`}
140+
</CodeBlock>
141+
</div>
142+
143+
</TabItem>
144+
</Tabs>
145+
146+
### Run your test
147+
Pass the below command in the terminal to run the test:
148+
```bash
149+
node RELATIVE_PATH_OF_YOUR_TEST_FILE
150+
```
141151

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

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

146157

147158

0 commit comments

Comments
 (0)