< Back to Blog Overview

Headless Testing with Playwright and Jest

2020-05-11
Headless Testing with Playwright and Jest

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.

HeadlessTesting Logo

Sign up for a Free Trial

Start Headless Testing instantly.

No credit card required!