jest-playwright-preset

What is jest-playwright-preset?

The jest-playwright-preset package allows you to use Playwright with Jest for end-to-end testing. It provides a Jest preset configuration that simplifies the setup and usage of Playwright within Jest, enabling you to write tests that can interact with web pages in a headless browser environment.

What are jest-playwright-preset's main functionalities?

Setup and Configuration

This feature allows you to easily set up Jest to use Playwright by adding the jest-playwright-preset to your Jest configuration file. This simplifies the initial setup process.

module.exports = { preset: 'jest-playwright-preset' };

Writing Tests

This feature allows you to write tests that interact with web pages. In this example, the test navigates to a URL and checks if the page title is as expected.

test('should display the correct title', async () => { await page.goto('https://example.com'); const title = await page.title(); expect(title).toBe('Example Domain'); });

Custom Browser Contexts

This feature allows you to customize the browser context for your tests. In this example, the viewport size is set before all tests run.

beforeAll(async () => { await jestPlaywright.resetContext({ viewport: { width: 1280, height: 720 } }); });

Other packages similar to jest-playwright-preset

jest-puppeteer

The jest-puppeteer package provides similar functionality but uses Puppeteer instead of Playwright. It allows you to run end-to-end tests with Jest and Puppeteer, offering a similar API and setup process. However, Playwright supports multiple browsers (Chromium, Firefox, and WebKit), whereas Puppeteer is primarily focused on Chromium.

playwright-test

The playwright-test package is a test runner built specifically for Playwright. It offers a more integrated experience with Playwright's features and capabilities, including parallel test execution and advanced test isolation. While jest-playwright-preset integrates Playwright with Jest, playwright-test is a standalone solution designed to leverage Playwright's full potential.

README

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

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"],
    ...
}

• You must run your tests with jest-playwright

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

Inspiration

Thanks to Smooth Code for great jest-puppeteer.

License

MIT