Playwright Testing

Installing Playwright

To install Playwright, simply use yarn or npm:

npm i --save playwright

By default, installing Playwright will also install one or more browsers.
If you only want to use the TestingBot cloud, you might consider installing Playwright without the bundled browsers, called playwright-core:

npm i playwright-core

Running your first Playwright test

To run your first test, please use this example:

const pw = require('playwright');

(async () => {
  const browser = await pw.chromium.connectOverCDP({
    wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest',
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://testingbot.com/');
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

const pw = require('playwright');

(async () => {
  const browser = await pw.chromium.connectOverCDP({
    wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=edge&browserVersion=latest',
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://testingbot.com/');
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

Updating your existing Playwright scripts

With a Playwright test, you'll usually start a browser with await pw.chromium.launch()

To start using our service, simply replace this line with our browser endpoint:

Before

const browser = await pw.chromium.launch();

After

await pw.chromium.connectOverCDP({
    wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=edge&browserVersion=latest',
});

Updating Test Details

Every Playwright test will appear in the TestingBot dashboard, by default as an unnamed test.
You can specify various parameters in the wsEndpoint to customize this.
Specify a name, extra (metadata) information or group tests together as a build.

You can also fetch the unique identifier for each Playwright test (we call it the sessionId), which you can use with our REST API to do various things:

• Update Test status (set Passed or Failed)
• Fetch Test Details which includes logs, artifacts and other meta-data
• and various other operations

To fetch the sessionId in your Playwright script, you can parse the sessionId from the browser.userAgent() method.
See the example below, where we run a Playwright script, fetch the sessionId at the end of the test and pass it to a NodeJS library which will update the tests' status via our REST API.

const TestingBot = require('testingbot-api')
const pw = require('playwright')

const tb = new TestingBot({
    api_key: 'api_key',
    api_secret: 'api_secret'
})

(async () => {
    const browser = await pw.chromium.connectOverCDP({
        wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest',
    })
    const context = await browser.newContext()
    const page = await context.newPage()

    await page.goto('https://testingbot.com/')
    const version = await browser.version()
    const sessionId = /SessionId: (.*)/g.exec(version)[1]
    var testData = { "test[success]" : "1", "test[status_message]" : "test" };
    await new Promise((resolve) => tb.updateTest(testData, sessionId, function(error, testDetails) { resolve(testDetails) }))

  await browser.close();
})()

Playwright and TestingBot Tunnel

Using Playwright in combination with TestingBot Tunnel allows you to test websites behind a firewall or on your local machine with Playwright on TestingBot.

Setup Tunnel

To use TestingBot Tunnel in combination with Playwright, you first need to start the TestingBot Tunnel and pass it a tunnelIdentifier name of your liking.

java -jar testingbot-tunnel.jar key secret -i myPlaywrightTunnel

In this example, we'll start a TestingBot Tunnel with identifier myPlaywrightTunnel.
Next, we'll need to configure our Playwright script to use the tunnel, using the same identifier.

Setup Playwright

To let Playwright know which tunnel we want to use, we need to specify the identifier from before as a parameter.
Please see the example below where we pass the tunnelIdentifier with myPlaywrightTunnel.

const pw = require('playwright');

(async () => {
  const browser = await pw.chromium.connectOverCDP({
    wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest&tunnelIdentifier=myPlaywrightTunnel',
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('http://localhost:3000/');
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

This Playwright script will open the latest Chrome browser on the TestingBot browser grid, use the tunnel to access your localhost website and take a screenshot from that page.

Playwright and TestingBot Tunnel Launcher

testingbot-tunnel-launcher is a NodeJS library which allows you to manage the tunnel from within your NodeJS script.

To use it, you can install with npm install testingbot-tunnel-launcher and use it with Playwright:

const testingbotTunnel = require('testingbot-tunnel-launcher')
const pw = require('playwright')

(async () => {
  const tunnel = await new Promise((resolve, reject) => {
    testingbotTunnel({
      apiKey: 'api_key',
      apiSecret: 'api_secret',
      verbose: true,
      tunnelIdentifier: 'playwrightTunnel'
    }, function (err, tunnel) {
      if (err) {
        reject(err)
        return
      }
      resolve(tunnel)
    })
  })

  const browser = await pw.chromium.connectOverCDP({
    wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest&tunnelIdentifier=playwrightTunnel',
  })
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('http://localhost:8080/')
  await page.screenshot({ path: 'screenshot.png' })

  await browser.close()
  await tunnel.close()
})()

This example will start a new Tunnel, start a Playwright script on the latest Chrome version in TestingBot, and take a screenshot of the website running on your local computer (http://localhost:8080)