Features
Start a free trial

Playwright Testing

Playwright is an open-source NodeJS library written by Microsoft to automate browsers with the DevTools protocol. Its syntax is very similar to Puppeteer.

The advantages of using Microsoft Playwright is that it offers various useful features:

  • auto wait: automatically wait until a locator appears in the DOM
  • browser compatibility: playwright supports multiple browsers: Chromium (Google Chrome, Microsoft Edge, and other Chromium-based browsers), Firefox and WebKit

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-core');

(async () => {
  const browser = await pw.chromium.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?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();
})();

This example will start a Chrome Browser, navigate to testingbot.com and save a PNG screenshot of the webpage. 

const pw = require('playwright-core');

(async () => {
  const browser = await pw.chromium.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?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();
})();

This example will start a Microsoft Edge Browser, navigate to testingbot.com and save a PNG screenshot of the webpage.

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.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?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.

TestingBot has created a custom Playwright command, which you can use in your tests, to mark a test as passed or failed in the TestingBot dashboard.

See the example below, where we run a Playwright script and depending on whether the test passes or fails, we send back the correct test status to TestingBot. 

const pw = require('playwright-core')
const expect = require('chai').expect

(async () => {
    const browser = await pw.chromium.connect({
        wsEndpoint: 'wss://cloud.testingbot.com/playwright?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.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {passed: true}})}`)

    try {
        expect(title).to.equal("Cross Browser Testing and Mobile App Testing. Test on web browsers, mobile emulators, simulators and physical mobile devices.", 'Expected page title is incorrect!')
        // This is ok, so mark the test as passed
        await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {passed: true, reason: 'Title matched'}})}`)
      } catch {
        // Test failed, mark the test as failed on TestingBot
        await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'setSessionStatus',arguments: {passed: false, reason: 'Title did not match'}})}`)
      }
    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-core');

(async () => {
  const browser = await pw.chromium.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?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-core')

(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.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?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)