Headless Testing with Playwright and Jest
Tags: headless, playwright, jest
Published: 2020-05-11 09:53:38

Playwright is a NodeJS package which can be used to automate Chrome, Firefox, Edge and Safari browsers in a headless manner.

It is developed by the same team that created Puppeteer at Google and is now actively developed at Microsoft.

The advantage of using Headless Testing is that it uses a real browser, but is much faster to run your tests than for example Selenium.

The combination of Jest, which is a NodeJS test runner framework maintained by Facebook and Playwright makes for a very robust Headless Testing toolkit.

**Installing jest-playwright**
There's a `jest-playwright` NPM library which makes it easy to get started with Jest and Playwright.

The package comes in combination with a `jest-playwright-preset` which you can then use as a preset for Jest in `jest.config.js`.

To install these packages, please enter this command in your terminal:
`npm install -D jest jest-playwright-preset playwright`

Once you've included the Playwright preset, you can either run the tests on a browser on your computer, or connect it to an online browser grid.

<pre><code lang="bash">module.exports = {
  rootDir: '.',
  testTimeout: 20000,
  testMatch: [
    '<rootDir>/*.spec.js'
  ],
  preset: 'jest-playwright-preset'
}</code></pre>

**Configuring jest-playwright**
To connect your tests to a Headless Browser grid, please specify the [connectBrowserApp](https://github.com/microsoft/playwright/blob/master/docs/api.md#browsertypeconnectoptions) setting in a file called `jest-playwright.config.js`.

<br />
<pre><code lang="bash">module.exports = {
    connectBrowserApp: {
        wsEndpoint: 'wss://chrome.headlesstesting.com/?token=[YOUR-API-TOKEN]&browserVersion=dev'
    }
}</code></pre>

This will instruct Jest Playwright to start and use a headless Chrome browser on the HeadlessTesting.com grid.

**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`:

<pre><code lang="bash">describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com')
  })

  it('should display google text on page', async () => {
    await expect(page).toMatch('google')
  })
})</code></pre>

You can now run this sample test:
`$ jest`
Depending on whether you want to run this test locally or on a cloud platform, the test will start a headless browser and navigate to Google, finally verifying if the word google appears on the page.

**expect-playwright**
There's also a NPM package available called `expect-playwright`. This is a Jest utility matcher for Playwright. It exposes various matchers, making it easier and cleaner to write certain assertions in your test scripts.

To get started, you can install the library:
`npm install -D expect-playwright`

Now you can use various matchers:

<pre><code lang="bash">await expect(page).toHaveText("h1", "HeadlessTesting.com")</code></pre>

The various matchers include:

<ul class="list">
<li>toHaveSelector</li>
<li>toHaveText</li>
<li>toEqualText</li>
<li>toEqualValue</li>
</ul>

**Great Combo**
Jest and Playwright is a great combination to do Headless testing. Both frameworks are under active development and keep getting better.