Skip to content

Commit 4e41309

Browse files
amanchopra1905amanchopra1905
authored
Merge pull request #2259 from amanchopra1905/stage
updated PW iOS
2 parents d7159c0 + 6b339e7 commit 4e41309

File tree

1 file changed

+47
-167
lines changed

1 file changed

+47
-167
lines changed

‎docs/playwright-ios-guide.md‎

Lines changed: 47 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: playwright-ios-guide
33
title: How To Run Playwright Tests On LambdaTest iOS Devices
4-
hide_title: true
4+
hide_title: false
55
sidebar_label: Test on iOS Device
66
description: Here you can learn how to run Playwright tests on the LambdaTest iOS real devices.
77
keywords:
@@ -16,6 +16,12 @@ url: https://www.lambdatest.com/support/docs/playwright-ios-device/
1616
site_name: LambdaTest
1717
slug: playwright-ios-device/
1818
---
19+
20+
import Tabs from '@theme/Tabs';
21+
import TabItem from '@theme/TabItem';
22+
import CodeBlock from '@theme/CodeBlock';
23+
import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys";
24+
1925
<script type="application/ld+json"
2026
dangerouslySetInnerHTML={{ __html: JSON.stringify({
2127
"@context": "https://schema.org",
@@ -39,216 +45,90 @@ slug: playwright-ios-device/
3945
})
4046
}}
4147
></script>
48+
:::info BETA
49+
Playwright support for iOS Real Devices is in **Beta**.
50+
:::
4251

43-
# Getting Started With Playwright Testing on iOS Real Devices
44-
* * *
4552
Playwright test automation on real iOS devices is now supported on LambdaTest. Test on latest iPhone and iPad safari combinations to catch device-specific issues that mobile emulation may miss. Integrate with your existing CI pipeline, and access logs and debugging artifacts for each test run.
4653

4754
This guide will cover the basics of getting started with Playwright testing on iOS devices on the LambdaTest platform.
4855

49-
> **Beta release**: Playwright support for real iOS devices is currently under beta.
56+
> Playwright testing on real iOS and Android devices is supported on Playwright **v1.53.2**
5057
5158
## Prerequisites
52-
***
59+
**Step 1:** Clone the LambdaTest-Playwright repository on your system using the following command.
5360

54-
>Note: All the code samples in this documentation can be found in the LambdaTest's Repository on GitHub. You can either download or clone the repository to quickly run your tests.
55-
<a href="https://github.com/LambdaTest/playwright-sample/" className="github__anchor"><img loading="lazy" src={require('../assets/images/icons/github.png').default} alt="Image" className="doc_img"/> View on GitHub</a>
56-
57-
1. Clone the LambdaTest-Playwright repository on your system using the following command.
5861
```
5962
git clone https://github.com/LambdaTest/playwright-sample/
6063
```
6164

62-
2. Install the npm dependencies.
65+
:::tip Sample Repo
66+
All the code samples in this documentation can be found in the LambdaTest's Repository on GitHub. You can either download or clone the repository to quickly run your tests.
67+
<a href="https://github.com/LambdaTest/playwright-sample/" className="github__anchor"><img loading="lazy" src={require('../assets/images/icons/github.png').default} alt="Image" className="doc_img"/> View on GitHub</a>
68+
:::
6369

64-
```
70+
**Step 2:** Install the npm dependencies.
71+
72+
```bash
6573
npm install
6674
```
6775

68-
3. Add browserWSEndpoint (browser end point URL) in your test script.
76+
**Step 3:** Add browserWSEndpoint (browser end point URL) in your test script.
6977

70-
```js
78+
```javascript
7179
wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
7280
```
7381

74-
4. In order to run your Playwright tests on iOS devices , you will need to set your LambdaTest username and access key in the environment variables. Click the **Access Key** button at the top-right of the Automation Dashboard to access it.
82+
**Step 4:** In order to run your Playwright tests on iOS devices , you will need to set your LambdaTest username and access key in the environment variables. Click the **Access Key** button at the top-right of the Automation Dashboard to access it.
7583

76-
**Windows**
84+
<Tabs className="docs__val">
7785

78-
```js
79-
set LT_USERNAME="YOUR_LAMBDATEST_USERNAME"
80-
set LT_ACCESS_KEY="YOUR_LAMBDATEST_ACCESS_KEY"
81-
```
86+
<TabItem value="bash" label="Linux / MacOS" default>
8287

83-
**macOS/Linux**
88+
<div className="lambdatest__codeblock">
89+
<CodeBlock className="language-bash">
90+
{`export LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}"
91+
export LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`}
92+
</CodeBlock>
93+
</div>
8494

85-
```js
86-
export LT_USERNAME="YOUR_LAMBDATEST_USERNAME"
87-
export LT_ACCESS_KEY="YOUR_LAMBDATEST_ACCESS_KEY"
88-
```
95+
</TabItem>
96+
97+
<TabItem value="powershell" label="Windows" default>
98+
99+
<div className="lambdatest__codeblock">
100+
<CodeBlock className="language-powershell">
101+
{`set LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}"
102+
set LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`}
103+
</CodeBlock>
104+
</div>
105+
106+
</TabItem>
107+
</Tabs>
89108

90109
## Run Your First Test
91-
---
92110

93-
1. Add the below code snippet in your test scripts to initiate your first Playwright test on LambdaTest.
94-
95-
```javascript title="lambdatest-sample.js"
96-
require('dotenv').config();
97-
const { webkit } = require("playwright");
98-
const { expect } = require("expect");
99-
100-
(async () => {
101-
console.log('Starting Playwright iOS Real Device test...');
102-
console.log('Device: iPhone 16 (iOS 18)');
103-
104-
const capabilities = {
105-
"LT:Options": {
106-
"platformName": "ios",
107-
"deviceName": "iPhone 16",
108-
"platformVersion": "18",
109-
"isRealMobile": true,
110-
"build": "Playwright iOS Build",
111-
"name": "Playwright iOS test",
112-
"user": process.env.LT_USERNAME,
113-
"accessKey": process.env.LT_ACCESS_KEY,
114-
"network": true,
115-
"video": true,
116-
"console": true,
117-
"projectName": "New UI",
118-
},
119-
};
120-
121-
console.log('Connecting to LambdaTest iOS cloud...');
122-
console.log('Username:', process.env.LT_USERNAME);
123-
console.log('Platform: iOS 18, Device: iPhone 16');
124-
125-
let browser = await webkit.connect(
126-
`wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(
127-
JSON.stringify(capabilities))}`,
128-
);
129-
130-
console.log('Connected to iOS device successfully!');
131-
console.log(`Device: iPhone 16, iOS 18`);
132-
133-
console.log('Creating browser context...');
134-
let context = await browser.newContext({
135-
hasTouch: true, // Enable touch support for iOS
136-
isMobile: true // Enable mobile mode for iOS
137-
});
138-
let page = await context.newPage();
139-
140-
console.log('Navigating to Wikipedia...');
141-
await page.goto('https://www.wikipedia.org/', { timeout: 30000 });
142-
143-
console.log('Finding search input...');
144-
let element = await page.locator('input[name="search"]');
145-
146-
console.log('Clicking search input...');
147-
await element.click();
148-
149-
console.log('Typing "playwright"...');
150-
await element.fill('playwright');
151-
152-
console.log('Clicking search input again...');
153-
await element.click();
154-
155-
console.log('Current URL:', await page.url());
156-
157-
console.log('Finding and clicking search button...');
158-
await page.locator('#search-form > fieldset > button').click();
159-
160-
console.log('Waiting for search results...');
161-
await page.waitForTimeout(3000);
162-
163-
console.log('Counting occurrences of "19th century"...');
164-
const count = await page.getByText('19th century').count();
165-
console.log('Found', count, 'occurrences of "19th century"');
166-
167-
try {
168-
console.log('Verifying count equals 3...');
169-
expect(count).toEqual(3);
170-
console.log('iOS Test PASSED! Found exactly 3 occurrences');
171-
172-
// Mark the test as completed or failed
173-
await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({ action: "setTestStatus", arguments: {status: "passed", remark: "Wikipedia test passed - found 3 occurrences of '19th century'" },})}`);
174-
console.log('Marked test as PASSED in LambdaTest dashboard');
175-
176-
await teardown(page, context, browser)
177-
} catch (e) {
178-
console.log('iOS Test FAILED!');
179-
console.log('Error:', e.message);
180-
console.log('Expected: 3 occurrences of "19th century"');
181-
console.log('Actual count:', count);
182-
183-
await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({action: "setTestStatus", arguments: { status: "failed", remark: e.message }})}`);
184-
console.log('Marked test as FAILED in LambdaTest dashboard');
185-
186-
await teardown(page, context, browser)
187-
throw e.stack
188-
}
189-
190-
})().catch(err => {
191-
console.error('Unexpected error occurred in iOS test:');
192-
console.error(err);
193-
process.exit(1);
194-
});
195-
196-
async function teardown(page, context, browser) {
197-
console.log('Cleaning up iOS test resources...');
198-
try {
199-
console.log(' Closing page...');
200-
await Promise.race([
201-
page.close(),
202-
new Promise(resolve => setTimeout(resolve, 10000)) // 10 second timeout
203-
]);
204-
console.log('Page closed');
205-
206-
console.log('Closing context...');
207-
await Promise.race([
208-
context.close(),
209-
new Promise(resolve => setTimeout(resolve, 10000)) // 10 second timeout
210-
]);
211-
console.log('Context closed');
212-
213-
console.log(' Closing browser connection...');
214-
await Promise.race([
215-
browser.close(),
216-
new Promise(resolve => setTimeout(resolve, 15000)) // 15 second timeout for browser
217-
]);
218-
console.log('Browser closed');
219-
220-
console.log('iOS test completed and resources cleaned up!');
221-
} catch (error) {
222-
console.log('Cleanup completed with warnings:', error.message);
223-
}
224-
process.exit(0);
225-
}
111+
**Step 1:** Add the below code snippet in your test scripts to initiate your first Playwright test on LambdaTest.
226112

113+
```javascript title="lambdatest-sample.js" reference
114+
https://github.com/LambdaTest/playwright-sample/blob/58263f6d136f268c224726b492764537adae217e/playwright-ios-real-device.js
227115
```
228-
----
229116

230-
2. Pass the below command to run the test.
117+
**Step 2:** Pass the below command to run the test.
231118

232119
```
233120
node playwright-ios-real-device.js
234121
```
235122

236123
## View your Playwright test results
237-
***
238-
239124
The LambdaTest Automation Dashboard is where you can see the results of your Playwright iOS tests after running them on the LambdaTest platform.
240125

241126
The below screenshot of LambdaTest Automation Dashboard shows the Playwright build on the left and the build sessions associated with the selected build on the right.
242127

243128
<img loading="lazy" src={require('../assets/images/playwright-testing/playwright-ios-real-device.webp').default} alt="Image" width="1444" height="703" className="doc_img"/>
244129

245130
:::note
246-
247131
- Only Safari and Node.js integrations are currently supported; we plan to extend compatibility to additional browsers and languages soon.
248132

249133
- Playwright testing on real iOS devices is currently supported on latest iOS versions—iOS 17, iOS 18, and iOS 26—across both iPhones and iPads. Extension of device coverage is currently in progress.
250-
251134
:::
252-
253-
254-

0 commit comments

Comments
 (0)