Gathering detailed insights and metrics for @hover/jest-playwright-preset
Gathering detailed insights and metrics for @hover/jest-playwright-preset
npm install @hover/jest-playwright-preset
Typescript
Module System
Node Version
NPM Version
33.8
Supply Chain
55.6
Quality
75.1
Maintenance
50
Vulnerability
95.1
License
TypeScript (95.52%)
JavaScript (3.98%)
HTML (0.5%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
15,528
Last Day
1
Last Week
3
Last Month
16
Last Year
256
MIT License
537 Stars
692 Commits
75 Forks
11 Watchers
3 Branches
26 Contributors
Updated on Mar 06, 2025
Minified
Minified + Gzipped
Latest Version
1.3.2
Package Id
@hover/jest-playwright-preset@1.3.2
Unpacked Size
51.84 kB
Size
14.32 kB
File Count
16
NPM Version
6.14.5
Node Version
14.3.0
Cumulative downloads
Total Downloads
1
22
Running your tests using Jest & Playwright
1npm 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
1npm install -D jest jest-playwright-preset playwright-firefox
Update your Jest configuration, either:
with package.json
:
1"jest": { 2 "preset": "jest-playwright-preset" 3}
or with jest.config.js
:
1module.exports = { 2 preset: 'jest-playwright-preset', 3}
And add the Jest command as in the script section of your package.json
:
1{ 2 "scripts": { 3 "test": "jest" 4 } 5}
Now you can use Playwright in your tests:
1beforeAll(async () => { 2 await page.goto('https://whatismybrowser.com/') 3}) 4 5test('should display "google" text on page', async () => { 6 const browser = await page.$eval('.string-major', (el) => el.innerHTML) 7 expect(browser).toContain('Chrome') 8})
It's recommend to use a separate Jest configuration jest.e2e.config.js
for jest-playwright
to gain speed improvments and by that to only use Playwright in the end-to-end tests. For that you have to use the -c
flag when calling Jest and use the testMatch
or testRegex
in your Jest config to split them.
Be sure to remove any existing testEnvironment
option from your Jest configuration. The jest-playwright-preset
preset needs to manage that option itself.
You can specify a jest-playwright.config.js
at the root of the project or define a custom path using the JEST_PLAYWRIGHT_CONFIG
environment variable. It should export a config object.
launchOptions
<[object]>. All Playwright launch options can be specified in config. Since it is JavaScript, you can use all stuff you need, including environment.launchType
<LAUNCH | PERSISTENT | SERVER>. Method to launch browser instance. jest-playwright
attaches Playwright to an existing browser instance by default.connectOptions
<[object]>. All Playwright connect options can be specified in config.contextOptions
<[object]>. All Playwright context options can be specified in config.browsers
<[string[]]>. Define browsers to run tests in.
chromium
Each test runs Chromium (default).firefox
Each test runs Firefox.webkit
Each test runs Webkit.devices
<[(string | object)[] | RegExp]>. Define a devices to run tests in. Actual list of devices can be found here.exitOnPageError
<[boolean]>. Exits process on any page error. Defaults to true
.collectCoverage
<[boolean]>. Enables the coverage collection of the saveCoverage(page)
calls to the .nyc_output/coverage.json
file.serverOptions
<[object]>. All jest-process-manager
options.selectors
<[array]>. Define selectors. Each selector must be an object with name and script properties.There are different ways to define browsers in your tests:
1module.exports = { 2 devices: ["iPhone 6", "Pixel 2"], 3 ... 4}
1module.exports = { 2 devices: /iPhone 8/, 3 ... 4}
1{ 2 // Name of device 3 name: string 4 // Page width and height 5 viewport: { 6 width: number 7 height: number 8 } 9 // user agent 10 userAgent: string 11 // device scale factor 12 deviceScaleFactor: number 13 // is device is mobile 14 isMobile: boolean 15 // support of touch events 16 hasTouch: boolean 17}
jest-playwright.config.js
:1const { 2 selectorEngine, 3} = require('query-selector-shadow-dom/plugins/playwright'); 4 5module.exports = { 6 selectors: [ 7 {name: 'shadow', script: selectorEngine} 8 ], 9 ... 10} 11
You can also specify browser with the BROWSER
environment variable. You should do it only if you are using the whole playwright package.
You can specify device with DEVICE
environment variable.
browserName
<[string]> - name of the current browser (chromium, firefox or webkit)deviceName
<[string]> - name of the current devicebrowser
<[Browser]> - Playwright browser instancecontext
<[Context]> - a new Playwright context instance for each new test filepage
<[Page]> - Playwright page instance (since a new context for every test file also a new page for it)All of them are available globally in each Jest test. If you are using ESLint and JavaScript, its recommend to use it in combination with the eslint-plugin-jest-playwright.
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.
1await jestPlaywright.debug()
1beforeEach(async () => { 2 await jestPlaywright.resetPage() 3})
To create a new page for each test, you can use this snippet to have a new page object for each individual test.
1beforeEach(async () => { 2 await jestPlaywright.resetContext() 3})
To create a new context for each test, you can use this snippet to have a new context object for each individual test.
1beforeEach(async () => { 2 await jestPlaywright.resetBrowser() 3})
You can use this snippet to reset current browser for each individual test. It will reset browser, context and page.
It's possible to track the coverage of the end-to-end tests with the babel-plugin-istanbul Babel plugin configured. It needs to be included in the web application which you are gonna test otherwise it won't work. To use it, you have to set collectCoverage
in the jest-playwright.config.js
to true
. Per default the test coverage will be automatically saved after each navigation change (beforeunload
event). If a certain code path is not covered, you can manually call and add the corresponding saveCoverage(page)
call to your tests like that:
1await jestPlaywright.saveCoverage(page)
By using coverage collection, it will write the coverage data to the .nyc_output/coverage.json
file which can be transformed using nyc
to the lcov format:
npx nyc report --reporter=lcovonly
or to HTML:
npx nyc report --reporter=html
which will create a HTML website in the coverage
directory.
It's possible to skip tests for browsers or combination of browsers and devices
1it.jestPlaywrightSkip( 2 { browsers: ['chromium'] }, 3 'should skip this one', 4 async () => { 5 const title = await page.title() 6 expect(title).toBe('Google') 7 }, 8)
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
.
1// jest-playwright.config.js 2module.exports = { 3 serverOptions: { 4 command: 'node server.js', 5 port: 4444, 6 }, 7}
Other options are documented in jest-process-manager.
The default jest-playwright environment is node, but you can use a browser-like environment through jest-playwright-jsdom
There is a utility package expect-playwright which simplifies the expect statements in combination with Playwright to make e.g. shorter text comparisons.
'page' is not defined
There is an ESLint plugin available eslint-plugin-jest-playwright available which includes the globals for using jest-playwright.
You can run tests for multiple browsers and devices:
jest-playwright.config.js
:1module.exports = { 2 browsers: ["chromium", "webkit"], 3 devices: ["iPhone 6", "Pixel 2"], 4 ... 5}
It will run your tests for:
If there is no defined browsers in config it will run tests for chromium browser.
You can use jest-playwright with the jest-circus runner for taking screenshots during test failures for example:
jest.config.json
1"testRunner": "jest-circus/runner", 2"testEnvironment": "./CustomEnvironment.js"
CustomEnvironment.js
1const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment') 2 .default 3 4class CustomEnvironment extends PlaywrightEnvironment { 5 async setup() { 6 await super.setup() 7 // Your setup 8 } 9 10 async teardown() { 11 // Your teardown 12 await super.teardown() 13 } 14 15 async handleTestEvent(event) { 16 if (event.name === 'test_done' && event.test.errors.length > 0) { 17 const parentName = event.test.parent.name.replace(/\W/g, '-') 18 const specName = event.test.name.replace(/\W/g, '-') 19 20 await this.global.page.screenshot({ 21 path: `screenshots/${parentName}_${specName}.png`, 22 }) 23 } 24 } 25} 26 27module.exports = CustomEnvironment
Example Jest configuration in combination with ts-jest:
1module.exports = { 2 preset: 'jest-playwright-preset', 3 transform: { 4 '^.+\\.ts$': 'ts-jest', 5 }, 6}
Types are also available, which you can either use via directly in your test:
1/// <reference types="jest-playwright-preset" /> 2/// <reference types="expect-playwright" />
or at your central tsconfig.json
either via files
:
1{ 2 "files": [ 3 "./global.d.ts", 4 "node_modules/jest-playwright-preset/types/global.d.ts", 5 "node_modules/expect-playwright/global.d.ts" 6 ] 7}
or via types
:
1{ 2 "compilerOptions": { 3 "types": ["jest-playwright-preset", "expect-playwright"] 4 } 5}
It's important to not change the testEnvironment
to node
. Otherwise it won't work.
If you face into error messages like UnhandledPromiseRejectionWarning: Error: Protocol error (Runtime.callFunctionOn): Target closed.
or
1Timeout - Async callback was not invoked within the 20000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 20000ms timeout specified by jest.setTimeout.Error:
and your Jest error reporting will only show that an entire test (it()
function) has failed, then you need to increase the Jest timeout because the Playwright timeout is greater than the Jest timeout. So Jest in the end will simply stop the execution and no verbose (which exact line) error reporting can be generated.
To fix this behavior simply call
1jest.setTimeout(35 * 1000)
in your tests at the top. (30 seconds is the default Playwright timeout for waiting for an specific element.)
If for your individual tests a new entire browser instance spins up each time and it won't be reused, then you probably run them in parallel. If you run them in a synchronous way with the --runInBand
CLI option for Jest, then the same browser instance will be re-used and this should fix the issue.
Demonstration the usage of jest-playwright
for various test cases can be found in playwright-jest-examples
Thanks to Smooth Code for the great jest-puppeteer.
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 4
Details
Reason
Found 8/28 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
12 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-03-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreLast Day
0%
1
Compared to previous day
Last Week
0%
3
Compared to previous week
Last Month
-44.8%
16
Compared to previous month
Last Year
-15.8%
256
Compared to previous year