Jest Playwright

Running your tests using Jest & Playwright

npm install jest-playwright-preset playwright

Also you can use jest-playwright-preset with specific playwright packages: playwright-webkit, playwright-chromium and playwright-firefox

npm install jest-playwright-preset playwright-firefox

Usage

Update your Jest configuration:

• with package.json:

"jest": {
  "preset": "jest-playwright-preset"
}

• with jest.config.js:

module.exports = {
    preset: "jest-playwright-preset",
    ...
}

NOTE: Be sure to remove any existing testEnvironment option from your Jest configuration. The jest-playwright-preset preset needs to manage that option itself.

Configuration

You can specify a jest-playwright.config.js at the root of the project or define a custom path using JEST_PLAYWRIGHT_CONFIG environment variable. It should export a config object.

• launchBrowserApp <[object]> All Playwright launch options can be specified in config. Since it is JavaScript, you can use all stuff you need, including environment.
• context <[object]> All Playwright context options can be specified in config.
• browser <[string]>. Define a browser to run tests into.
  • chromium Each test runs Chromium.
  • firefox Each test runs Firefox.
  • webkit Each test runs Webkit.
• device <[string]>. Define a device to run tests into. Actual list of devices can be found here
• exitOnPageError <[boolean]> Exits page on any global error message thrown. Defaults to true.

Browser type

You can specify browser in multiple ways:

Note: You should do it only if you are using whole playwright package

• With BROWSER environment variable
• With your jest-playwright.config.js

If you don't pass any value it will be use chromium as default

Use Playwright in your tests:

"test": "jest"

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

  it('should display "google" text on page', async () => {
    const browser = await page.$eval('.string-major a', el => el.text)
    expect(browser).toContain('Chrome')
  })
})

Put in debug mode

Debugging tests can be hard sometimes and it is very useful to be able to pause tests in order to inspect the browser. Jest Playwright exposes a method jestPlaywright.debug() that suspends test execution and gives you opportunity to see what's going on in the browser.

await jestPlaywright.debug()

Inspiration

Thanks to Smooth Code for great jest-puppeteer.

License

MIT