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