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

Inspiration

Thanks to Smooth Code for great jest-puppeteer.

License

MIT