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('TestingBot', () => {
  beforeAll(async () => {
    await page.goto('https://testingbot.com')
  })

  it('should have TestingBot in the title', async () => {
    expect(await page.title()).toContain('TestingBot')
  })
})

Now you can run your first test with Playwright on the TestingBot cloud:

jest

This will open testingbot.com in an Edge browser and verify that the page title contains 'TestingBot'.

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

PASS  ./sample.spec.js (6.503s)
  TestingBot
    ✓ should have TestingBot in the title (81ms)

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

This test will also appear in your Member Dashboard.