Playwright is a NodeJS library, used to automate Chrome, Firefox, Edge and Safari in a headless manner. It is developed by the same team that created Puppeteer at Google and is now actively developed at Microsoft.
The combination of Jest, a Node test runner framework maintained by Facebook and Playwright makes for a very powerful and robust Headless Testing Framework.
Installing jest-playwright
There's a jest-playwright
NPM library available that makes it easy to get started with Jest and Playwright.
The package comes in combination with a jest-playwright-preset
which you can use as a Jest preset in jest.config.js
.
npm install -D jest jest-playwright-preset playwright
Once you've included this preset, you can easily connect to the HeadlessTesting browser grid and run multiple headless tests in parallel.
module.exports = {
rootDir: '.',
testTimeout: 20000,
testMatch: [
'/*.spec.js'
],
preset: 'jest-playwright-preset'
}
Configuring jest-playwright
To connect your tests to our Headless grid, please specify the connectBrowserApp setting in a file called jest-playwright.config.js
.
module.exports = {
connectBrowserApp: {
wsEndpoint: 'wss://chrome.headlesstesting.com/?token=[YOUR-API-TOKEN]&browserVersion=dev'
}
}
This will instruct Jest Playwright to start and use a headless Chrome browser in our grid.
Since Playwright supports multiple browsers, you can replace the wsEndpoint
with the other endpoints we provide:
- wss://firefox.headlesstesting.com
- wss://edge.headlesstesting.com
- wss://chrome.headlesstesting.com
Running your first test with jest-playwright
Now you are ready to run your first test with Jest and Playwright.
To get started, please create a new test file sample.spec.js
:
describe('Google', () => {
beforeAll(async () => {
await page.goto('https://google.com')
})
it('should display google text on page', async () => {
await expect(page).toMatch('google')
})
})
You can now run this sample test:
$ jest
This will start a headless browser on our grid, navigate to Google and verify if the word google appears on the page.
The test will appear in our member dashboard together with a log file and other meta data.
expect-playwright
There's also a NPM package available called expect-playwright
, which is a Jest utility matcher for Playwright. It exposes various matchers on the expect
object.
To get started, you can install this library:
npm install -D expect-playwright
Now you're ready to use these various matchers:
await expect(page).toHaveText("h1", "HeadlessTesting.com")
The various matchers include:
- toHaveSelector
- toHaveText
- toEqualText
- toEqualValue
Conclusion
Jest and Playwright is a great combination to do Headless testing. Both frameworks are under active development and keep getting better.
Combined with a Cloud grid of Headless browsers, you can quickly run concurrent headless tests.