Jest-Playwright

Jest-Playwright allows you to run tests with Jest on browsers controlled with Playwright.

To get started, please install the package:

npm init && npm install -D jest jest-playwright-preset playwright

Next, specify these settings in your Jest configuration file (jest.config.js):

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

Configure Jest-Playwright

To configure Jest Playwright, please create a new file called jest-playwright.config.js and add this to the file:

module.exports = {
    connectBrowserApp: {
        wsEndpoint: 'wss://chrome.headlesstesting.com/?token=[YOUR-TOKEN]&browserVersion=dev'
    }
}

This instructs Jest Playwright to connect to our Headless grid and use the latest (headless) Chrome browser.

You can replace chrome.headlesstesting.com with the other browsers we provide.

If you are using the latest version of Playwright then we suggest you specify browserVersion=dev.

This will add some delay to the start of your test, since we first need to download and install the latest browser version before your test can start.

See our compatibility overview to know which browserVersion is compatible with which Playwright version.

Run your first test

To create a test, please create a new file called sample.spec.js and add this to the file:

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com')
  })

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

Now we can run our first test:

$ jest

This will open Google in a Headless Chrome browser and verify if the word google is on the page.

You should see something like this in your terminal:

PASS  ./sample.spec.js (6.503s)
  Google
    ✓ should display google text on page (81ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

This test will also appear in your Member Dashboard.