Playwright Testing
Playwright is a NodeJS library written by Microsoft to automate browsers with the DevTools protocol. Its syntax is very similar to Puppeteer.
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');
(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();
})();
This example will start a Chrome Browser, navigate to testingbot.com and save a PNG screenshot of the webpage.
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();
})();
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.
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.
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)