Set up Playwright with Perfecto

To add Playwright to your Java project, add the following dependency to your Maven pom.xml file.

<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 add pass the job name, number, and branch.

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

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.

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 Perfectocloud (for example, demo) as part of the WebSocket URL.

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

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.

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

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.

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.

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: '{{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();