Set up Playwright with Perfecto – iOS (BETA)

To integrate Playwright with Perfecto for iOS testing, follow the prerequisites and setup steps below for your preferred programming language. iOS Playwright support is currently in BETA and available only through the Node.js SDK (JavaScript and TypeScript). For information on known limitations and unsupported features, see Playwright known limitations.

For information on Playwright overview and prerequisites, see Playwright.

Restrictions

The following restrictions apply to iOS Playwright BETA:

• Status: BETA, available on real iOS devices only (iOS 18+) provisioned through Perfecto cloud

• Supported Playwright version: Playwright 1.62 only. Pinning to exact version is required (see Install dependencies). Other Playwright versions are not supported and will not connect.

• Available platforms: Node.js SDK only (JavaScript and TypeScript). Java is not supported for iOS testing.

• Cloud configuration: Must specify cloud name in WebSocket URL.

• Feature gate: Feature must be enabled for your Perfecto cloud/cradle.

Prerequisites

• A real iOS device provisioned on your Perfecto cloud with iOS Playwright feature setting enabled

• A Perfecto securityToken

• The device's deviceName (UDID), for example 00001234-0005ACB12331120E

Mandatory capabilities

Configuration requirement

The cloud name must be specified in the WebSocket URL used to connect:

wss://{cloudName}.perfectomobile.com/websocket?<encoded capabilities>

Setup steps

Click a language to expand the steps.

TypeScript

1. Pin exact versions with --save-exact. The BETA server only accepts 1.62 clients. An unpinned ^1.62.0 range will silently drift to an incompatible version on your next npm install.

   Copy

   npm install --save-exact --save-dev @playwright/test@1.62 @types/node ts-node
   npm install --save-exact playwright@1.62

2. Create a setup-ios.ts file that extends Playwright's base test object to connect to your Perfecto iOS device instead of launching a local browser:

   Copy

   import { test as base } from '@playwright/test';
   import { webkit } from '@playwright/test';
   
   export const test = base.extend({
     browser: [async ({}, use) => {
       const caps = {
         platformName: 'iOS',
         securityToken: '<SECURITY_TOKEN>',
         deviceName: '<DEVICE_UDID>',
       };
       const cloudName = 'demo';
   
       const browser = await webkit.connect(
         `wss://${cloudName}.perfectomobile.com/websocket?` +
           encodeURIComponent(JSON.stringify(caps)),
         { timeout: 90_000 },
       );
   
       await use(browser);
       await browser.close();
     }, { scope: 'worker', timeout: 90_000 }],
   
     page: async ({ browser }, use) => {
       const context = await browser.newContext({ hasTouch: true });
       const page = await context.newPage();
   
       await use(page);
   
       await page.close();
       await context.close();
     },
   });
   
   export { expect } from '@playwright/test';

3. Import test/expect from your setup-ios.ts instead of @playwright/test, and write a normal Playwright test:

   Copy

   import { test, expect } from './setup-ios';
   
   test('loads the home page', async ({ page }) => {
     await page.goto('https://example.com');
     await expect(page).toHaveTitle(/Example Domain/);
   });

4. Run the test:

   Copy

   npx playwright test --config=playwright.ios.config.ts

JavaScript

1. Install Playwright pinned to version 1.62:

   Copy

   npm install --save-exact playwright@1.62

2. Connect with the webkit browser launcher exported from playwright, then run your test:

   Copy

   const { webkit } = require('playwright');
   
   (async () => {
     const caps = {
       platformName: 'iOS',
       securityToken: '<SECURITY_TOKEN>',
       deviceName: '<DEVICE_UDID>',
     };
     const cloudName = 'demo';
   
     const browser = await webkit.connect(
       `wss://${cloudName}.perfectomobile.com/websocket?` +
         encodeURIComponent(JSON.stringify(caps)),
     );
   
     const context = await browser.newContext({ hasTouch: true });
     const page = await context.newPage();
   
     await page.goto('https://example.com');
     console.log(await page.title());
   
     await page.close();
     await context.close();
     await browser.close();
   })();

What's next

Integrate Playwright with Perfecto Smart Reporting