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.