Set up Playwright with Perfecto

To integrate Playwright with Perfecto, choose the section that matches your testing scenarios (desktop web or Android) and then follow the steps for your preferred programming language. For desktop web testing, you can use Java, JavaScript, and TypeScript. For Android mobile web testing, use JavaScript or TypeScript only.

For information on supported operating systems and browsers as well as prerequisites, see Playwright.

This document includes references to a third-party product, Playwright. The user interface and usage of third-party products are subject to change without notice. For the latest published information about Playwright, see the Playwright documentation.

On this page:

Setup steps for desktop web

Perfecto supports Playwright for desktop web testing on Windows using Chrome and Microsoft Edge. You can implement Playwright tests in Java, JavaScript, or TypeScript. Follow the steps for your chosen language.

Click a language to expand the steps.

Java

To add Playwright to your Java project, add the following dependency to your Maven pom.xml file.
Copy
```
<dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.50.0</version>
</dependency>
```
This dependency ensures the automatic download and inclusion of the latest Playwright version in your project, allowing you to write Java code that uses Playwright to automate browsers.

For the latest version, see the Maven Repository for Playwright.

For testing on web devices in your Perfecto cloud using Java, connect to a remote browser using Playwright and WebSocket by adding the following code to your existing Playwright scripts.

The following capabilities are mandatory:

platformName
securityToken

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

Optionally, you can pass the job name, number, and branch.

Copy

import com.google.gson.JsonObject;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import java.net.URLEncoder;

import static java.lang.Thread.sleep;

public class pw {

    public static void main(String[] args) {

        try (Playwright playwright = Playwright.create()) {
            JsonObject capabilities = new JsonObject();
            capabilities.addProperty("browserName", "Chrome");
            capabilities.addProperty("browserVersion", "130");
            capabilities.addProperty("platformName", "Windows");
            capabilities.addProperty("platformVersion", "11");
            capabilities.addProperty("securityToken", "*****");
            capabilities.addProperty("report.jobName", "job");
            capabilities.addProperty("report.jobNumber", 1);
            capabilities.addProperty("report.jobBranch", "1.1");

            String caps = URLEncoder.encode(capabilities.toString(), "utf-8");
            String cdpUrl = "wss://{cloud}.perfectomobile.com/websocket?" + caps;
            Browser browser = playwright.chromium().connect(cdpUrl);
            Page page = browser.newPage();
            
            page.navigate("https://www.google.com/");
            browser.close();
        } catch (Exception exception) {
            exception.printStackTrace();
        }
    }
}

TypeScript

Before running Playwright tests with Perfecto, 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.
Copy
```
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.ts.

The following capabilities are mandatory:

platformName
securityToken

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

Optionally, you can pass the job name, number, and branch.

Copy

Example for desktop web

import * as base from "@playwright/test";
import { chromium } from "playwright";

const capabilities = {
  browserName: "Chrome", 
  browserVersion: "latest",
  platformName: "Windows",
  platformVersion: "10",
  securityToken: "*****"
  report.jobName: "job",
  report.jobNumber: "1",
  report.jobBranch: "1.1"
};

const test = base.test.extend({
  page: async ({ page, playwright }, use, testInfo) => {
      const browser = await chromium.connect({
        wsEndpoint: `wss://{cloud}.perfectomobile.com/websocket?${encodeURIComponent(
          JSON.stringify(capabilities)
        )}`,
      });

      const testPage = await browser.newPage(testInfo.project.use);
      await use(testPage);
      await testPage.close();
      await browser.close();
  },
});

export default test;

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

Copy

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

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

JavaScript

Before running Playwright tests with Perfecto, 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.
Copy
```
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
securityToken

In addition, you need to provide the name of your cloud (for example, demo) as part of the WebSocket URL. Optionally, you can pass the job name, number, and branch.

Copy

const { chromium } = require('playwright');
const { bootstrap } = require('global-agent');

const remotePerfecto = async () => {
  try {
    const capabilities = {
      browserName: 'Chrome',
      browserVersion: '132',
      platformName: 'Windows',
      platformVersion: '11',
      location: 'US East',
      securityToken: '*****',
      scriptName: 'PlaywrightDemoTest'
    };

    const cdpUrl = encodeURI(
      `wss://{{cloud}}.perfectomobile.com/websocket?${encodeURIComponent(JSON.stringify(capabilities))}`
    );

    const browser = await chromium.connect(cdpUrl);
    const page = await browser.newPage();

    await page.goto('https://perfecto.io/');
    const title = await page.title();
    console.log(`Page Title: ${title}`);

    const linkText = await page.getByText(' Request Demo ').getAttribute('href');
    if (!linkText.includes('ai-testing')) {
      throw new Error('Demo link Missing');
    }

    await browser.close();
  } catch (exception) {
    console.error('Test failed:', exception.message);
  }
};

remotePerfecto();

Setup steps for Android

Perfecto supports Playwright for Android mobile web testing using Chrome for Android and Android WebView. This feature is experimental and available only through the Node.js Playwright SDK. Use JavaScript or TypeScript for Android testing.

Click a language to expand the steps.

TypeScript

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.
Copy
```
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).

Copy

Example for Android

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.

Copy

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");
  });
});

JavaScript

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.
Copy
```
npm install playwright global-agent
```

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).

Copy

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();
})();

What's next

Integrate Playwright with PerfectoSmart Reporting