Playwright & Jest

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

The jest-playwright-preset package has been deprecated by its maintainers, who recommend migrating to Playwright's own test runner. If you are starting a new project, use Playwright Test instead. This page is kept for existing Jest suites.

To get started, please install the package. jest-playwright-preset requires Jest 29, so pin it rather than taking the latest Jest:

npm init && npm install -D jest@29 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 = {
    connectOptions: {
        wsEndpoint: 'wss://cloud.testingbot.com/playwright?key=api_key&secret=api_secret&browserName=edge&browserVersion=latest'
    }
}

This instructs Jest Playwright to connect to the TestingBot browser grid and use the latest Edge browser. Without a wsEndpoint, the preset launches a browser on your own machine instead.

If your package.json sets "type": "module", name the file jest-playwright.config.cjs instead. The preset picks the extension based on your package type. You can also point at any path with the JEST_PLAYWRIGHT_CONFIG environment variable.

Run your first test

To create a test, 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 you can run your first test with Playwright on the TestingBot cloud:

jest

This will open Google in an Edge browser and verify if the word 'google' is on the page.

You should see something like this in your terminal after running the command:

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.