Jest Playwright

Running your tests using Jest & Playwright

npm install -D jest jest-playwright-preset playwright

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

npm install -D jest jest-playwright-preset playwright-firefox

Usage

Update your Jest configuration, either:

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.

Use Playwright in your tests:

with package.json

{
  "scripts": {
    "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', el => el.innerHTML)
    expect(browser).toContain('Chrome')
  })
})

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 (default).
- 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.
server <[object]> All jest-dev-server options
selectors <[array]>. Define selector. Each selector must be an object with name and script properties.

Usage with query-selector-shadow-dom:

jest-playwright.config.js:

const {
	selectorEngine,
} = require('query-selector-shadow-dom/plugins/playwright');

module.exports = {
	selectors: [
		{name: 'shadow', script: selectorEngine}
	],
	...
}

Note:

You can also specify browser with BROWSER environment variable. You should do it only if you are using the whole playwright package.
You can specify device with DEVICE environment variable.

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()

Start a server

Jest Playwright integrates a functionality to start a server when running your test suite, like jest-puppeteer. It automatically closes the server when tests are done.

To use it, specify a server section in your jest-playwright.config.js.

// jest-playwright.config.js
module.exports = {
  server: {
    command: 'node server.js',
    port: 4444,
  },
}

Other options are documented in jest-dev-server.

Unstable and experimental API

From version 0.0.7 you can run you tests for multiple browsers.

You must have installed playwright package
You must define browser to test with your jest-playwright.config.js:

module.exports = {
    browsers: ["chromium", "webkit"],
    ...
}

From version 0.0.13 you can run you tests for multiple devices.

module.exports = {
    devices: ["iPhone 6", "Pixel 2"],
    ...
}

It will run your tests depending on you playwright package.

If you are using specific playwright package, it will run test for this specific browser
With installed playwright package you can define browsers with config:

module.exports = {
   browsers: ["chromium", "firefox"],
   devices: ["iPhone 6", "Pixel 2"],
   ...
}

If there is no defined browsers in config it will run tests for chromium browser.

More details

You must run your tests with jest-playwright

"test:parallel": "jest-playwright --parallel"

Inspiration

Thanks to Smooth Code for great jest-puppeteer.

License

MIT

pavelfeldman/jest-playwright