@@ -26,7 +26,7 @@ npm install -D jest jest-playwright-preset playwright-firefox
2626## Requirements
2727
2828- Node.js 14+
29- - Playwright 1.0 .0+
29+ - Playwright 1.2 .0+
3030- Jest 28+
3131
3232## Usage
@@ -62,6 +62,7 @@ And add the Jest command as in the script section of your `package.json`:
6262Now you can use Playwright in your tests:
6363
6464``` js
65+ // example.test.js
6566beforeAll (async () => {
6667 await page .goto (' https://whatismybrowser.com/' )
6768})
@@ -381,7 +382,6 @@ it.jestPlaywrightSkip(
381382)
382383```
383384
384-
385385## Using [ shadow DOM] ( https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM ) selectors
386386
387387Playwright engine pierces open shadow DOM by [ default] ( https://playwright.dev/docs/selectors?_highlight=shadow#selector-engines ) .
@@ -470,8 +470,8 @@ You can use **jest-playwright** with custom test environment for taking screensh
470470** CustomEnvironment.js**
471471
472472``` js
473- const PlaywrightEnvironment = require ( ' jest-playwright-preset/lib/PlaywrightEnvironment ' )
474- .default
473+ const PlaywrightEnvironment =
474+ require ( ' jest-playwright-preset/lib/PlaywrightEnvironment ' ) .default
475475
476476class CustomEnvironment extends PlaywrightEnvironment {
477477 async setup () {
@@ -485,7 +485,7 @@ class CustomEnvironment extends PlaywrightEnvironment {
485485 }
486486
487487 async handleTestEvent (event ) {
488- await super .handleTestEvent (event );
488+ await super .handleTestEvent (event )
489489 if (event .name === ' test_done' && event .test .errors .length > 0 ) {
490490 const parentName = event .test .parent .name .replace (/ \W / g , ' -' )
491491 const specName = event .test .name .replace (/ \W / g , ' -' )
@@ -513,8 +513,8 @@ module.exports = CustomEnvironment
513513** CustomRunner.js**
514514
515515``` js
516- const PlaywrightRunner = require ( ' jest-playwright-preset/lib/PlaywrightRunner ' )
517- .default
516+ const PlaywrightRunner =
517+ require ( ' jest-playwright-preset/lib/PlaywrightRunner ' ) .default
518518
519519class CustomRunner extends PlaywrightRunner {
520520 constructor (... args ) {
@@ -531,34 +531,35 @@ module.exports = CustomRunner
531531For this use case, ` jest-playwright-preset ` exposes two methods: ` globalSetup ` and ` globalTeardown ` , so that you can wrap them with your own global setup and global teardown methods as the following example:
532532
533533### Getting authentication state once for all test cases [ as per playwright reference] ( https://playwright.dev/docs/auth?_highlight=globals#reuse-authentication-state ) :
534+
534535``` js
535536// global-setup.js
536- import { globalSetup as playwrightGlobalSetup } from ' jest-playwright-preset' ;
537+ import { globalSetup as playwrightGlobalSetup } from ' jest-playwright-preset'
537538
538539module .exports = async function globalSetup (globalConfig ) {
539- await playwrightGlobalSetup (globalConfig);
540+ await playwrightGlobalSetup (globalConfig)
540541
541- const browserServer = await chromium .launchServer ();
542- const wsEndpoint = browserServer .wsEndpoint ();
543- const browser = await chromium .connect ({ wsEndpoint: wsEndpoint });
544- const page = await browser .newPage ();
542+ const browserServer = await chromium .launchServer ()
543+ const wsEndpoint = browserServer .wsEndpoint ()
544+ const browser = await chromium .connect ({ wsEndpoint: wsEndpoint })
545+ const page = await browser .newPage ()
545546
546547 // your login function
547- await doLogin (page);
548+ await doLogin (page)
548549
549550 // store authentication data
550- const storage = await page .context ().storageState ();
551- process .env .STORAGE = JSON .stringify (storage);
552- };
551+ const storage = await page .context ().storageState ()
552+ process .env .STORAGE = JSON .stringify (storage)
553+ }
553554```
554555
555556``` js
556557// global-teardown.js
557- import { globalTeardown as playwrightGlobalTeardown } from ' jest-playwright-preset' ;
558+ import { globalTeardown as playwrightGlobalTeardown } from ' jest-playwright-preset'
558559
559560module .exports = async function globalTeardown (globalConfig ) {
560561 // Your global teardown
561- await playwrightGlobalTeardown (globalConfig);
562+ await playwrightGlobalTeardown (globalConfig)
562563}
563564```
564565
@@ -574,7 +575,6 @@ Then assigning your js file paths to the [`globalSetup`](https://facebook.github
574575
575576Now your custom ` globalSetup ` and ` globalTeardown ` will be triggered once before and after all test suites.
576577
577-
578578## Usage with Typescript
579579
580580Example Jest configuration in combination with [ ts-jest] ( https://github.com/kulshekhar/ts-jest ) :
0 commit comments