Set up Playwright with Perfecto – Android

Before running Playwright tests with Perfecto on Android, make sure your project includes the necessary packages. These are typically managed in a package.json file, which is automatically created when you run npm init.

To install the required dependencies, run the following commands. These commands will update your package.json file and download the packages into the node_modules directory.

npm install --save-dev @playwright/test @types/node ts-node
npm install playwright global-agent

To connect to a remote browser hosted in your Perfecto cloud using TypeScript, set up a custom Playwright test extension using Playwright's WebSocket API.

Following is a sample extension. This extension is also available for download as setup-android.ts.

The following capabilities are mandatory:

• platformName or deviceName (to target a specific Android device)

• securityToken

Optionally, you can specify reporting properties such as report.jobName, report.jobNumber, and report.jobBranch.

In addition, as part of the WebSocket URL, you need to provide the name of your Perfecto cloud (for example, demo).

import { test as base, _android, expect, AndroidDevice } from '@playwright/test';

export const test = base.extend<{}, { device: AndroidDevice }>({
  device: [async ({}, use) => {
    const caps = {
      platformName: 'Android',
      securityToken: '******',
      deviceName: 'your_device'
    };
    const cloudName = 'your_cloud'
    const device = await _android.connect(
      `wss://${cloudName}.perfectomobile.com/websocket?` +
      encodeURIComponent(JSON.stringify(caps))
    );
    await use(device);
  }, { scope: 'worker' }],

  page: async ({ device }, use) => {
    const context = await device.launchBrowser();
    const page = await context.newPage();
    await use(page);
    await page.close();
    await context.close();
  }
});

export { expect } from '@playwright/test';

To use this extension in a Playwright test, import the test object from setup-android.ts and write your test as usual. The following code snippet is a sample test.

import test from "../setup-android";
import { expect } from "@playwright/test";

test.describe("Android Browse", () => {
  test("Search Google", async ({ page }) => {
    await page.goto("https://www.google.com/");
    const title = await page.title();
    console.log("Page title:", title);
    expect(title).toContain("Google");
  });
});

Before running Playwright tests with Perfecto and Android, make sure your project includes the necessary packages. These are typically managed in a package.json file, which is automatically created when you run npm init.

To install the required dependencies, run the following command. This command will update your package.json file and download the packages into the node_modules directory.

npm install playwright global-agent

To connect to a remote browser hosted in your Perfecto cloud using JavaScript, use Playwright's WebSocket API. The following example demonstrates how to do this using Node.js and includes Smart Reporting integration.

The following capabilities are mandatory:

• platformName or deviceName

• securityToken

Optionally, you can specify reporting properties such as report.jobName, report.jobNumber, and report.jobBranch.

In addition, as part of the WebSocket URL, you need to provide the name of your cloud (for example, demo).

const { _android } = require('playwright');

const caps = {
  platformName: 'Android',
  securityToken: '*****',
  deviceName: 'your_device'
};

const cloudName = CLOUD_NAME;

(async () => {
  const device = await _android.connect(
    `wss://${cloudName}.perfectomobile.com/websocket?` +
    encodeURIComponent(JSON.stringify(caps))
  );

  const context = await device.launchBrowser();
  const page = await context.newPage();
  await page.goto('https://www.google.com/');
  await page.close();
  await context.close();
})();