Features
Start a free trial

Playwright Testing

Playwright is an open-source NodeJS library developed by Microsoft for automating browsers using 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: Playwright automatically waits for elements (locators) to appear in the DOM, reducing the need for manual waiting logic.
  • browser compatibility: playwright supports multiple browsers: Chromium (Google Chrome, Microsoft Edge, and other Chromium-based browsers), Firefox and WebKit
  • fast test execution: tests (browser automation) will run much faster than Selenium, due to improved communication standards (WebSocket).

Installing Playwright

To install Playwright, simply use yarn or npm:

Copy code
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:

Copy code
npm i playwright-core

Running your first Playwright test

To run your first test, please use this example:

Copy code
const playwright = require('playwright-core');

(async () => {
  const browser = await playwright.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.

Copy code
const playwright = require('playwright-core');

(async () => {
  const browser = await playwright.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.

Copy code
const playwright = require('playwright-core');

(async () => {
  const browser = await playwright.firefox.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?key=api_key&secret=api_secret&browserName=firefox&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 Mozilla Firefox Browser, navigate to testingbot.com and save a PNG screenshot of the webpage.

Copy code
const playwright = require('playwright-core');

(async () => {
  const browser = await playwright.webkit.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?key=api_key&secret=api_secret&browserName=safari&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 WebKit 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

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

After

Copy code
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.

Copy code
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()
})()

Integration with Playwright Test

Playwright comes with its own test library: Playwright Test. It is developed by Microsoft and offers a robust set of features to quickly write and run automated browser tests.

Playwright test comes with a developer-friendly API that greatly simplifies creating tests. You can even record Playwright tests with its built-in Test Generator if you don't want to spend time writing the tests yourself.

The framework comes with a lot of extra features which promote best practices:

  • Page Object Models: Group common test logic in Page Object Models to avoid code duplication and enhance the structure of your tests. This in turn simplifies test management.
  • interact with Dialogs: Playwright can interact with dialogs such as alert, confirm, prompt and even beforeunload confirmations.
  • accessibility testing: You can use Playwright to test for various accessibility issues on your website. See the Accessibility Testing documentation for more information.

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.

Copy code
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.

Copy code
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:

Copy code
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)