Add ability to configure playwright in test file

extends.js

@@ -0,0 +1,47 @@
+/* global jestPlaywright, browserName */
+const DEBUG_OPTIONS = {
+  launchType: 'LAUNCH',
+  launchOptions: {
+    headless: false,
+    devtools: true,
+  },
+}
+
+it.jestPlaywrightDebug = (...args) => {
+  // TODO:
+  //  1. Add input validation
+  //  2. Unite jestPlaywrightDebug and jestPlaywrightConfig in one function
+  //  3. Check out passing config to jestPlaywright._configSeparateEnv
+  it(args[0], async () => {
+    const { browser, context, page } = await jestPlaywright._configSeparateEnv(
+      DEBUG_OPTIONS,
+    )
+    try {
+      await args[1]({ browser, context, page })
+    } finally {
+      await browser.close()
+    }
+  })
+}
+
+it.jestPlaywrightConfig = (playwrightOptions, ...args) => {
+  if (playwrightOptions.browser && playwrightOptions.browser !== browserName) {
+    it.skip(...args)
+  } else {
+    it(args[0], async () => {
+      const {
+        browser,
+        context,
+        page,
+      } = await jestPlaywright._configSeparateEnv({
+        ...DEBUG_OPTIONS,
+        playwrightOptions,
+      })
+      try {
+        await args[1]({ browser, context, page })
+      } finally {
+        await browser.close()
+      }
+    })
+  }
+}

jest-preset.json

@@ -5,6 +5,7 @@
   "runner": "jest-playwright-preset/runner.js",
   "testRunner": "jest-circus/runner",
   "setupFilesAfterEnv": [
-    "expect-playwright"
+    "expect-playwright",
+    "jest-playwright-preset/extends.js"
   ]
 }

src/PlaywrightEnvironment.ts

@@ -25,6 +25,12 @@ import {
 } from './utils'
 import { saveCoverageOnPage, saveCoverageToFile } from './coverage'
 
+type ConfigParams = {
+  browser: Browser | BrowserContext | null
+  context: BrowserContext
+  page: Page
+}
+
 const handleError = (error: Error): void => {
   process.emit('uncaughtException', error)
 }
@@ -134,21 +140,15 @@ export const getPlaywrightEnv = (basicEnv = 'node'): unknown => {
       }
       this.global.browserName = browserType
       this.global.deviceName = deviceName
-      this.global.browser =
-        launchType === PERSISTENT
-          ? null
-          : await getBrowserPerProcess(
-              playwrightInstance,
-              browserType,
-              this._jestPlaywrightConfig,
-            )
+      const browserOrContext = await getBrowserPerProcess(
+        playwrightInstance,
+        browserType,
+        this._jestPlaywrightConfig,
+      )
+      this.global.browser = launchType === PERSISTENT ? null : browserOrContext
       this.global.context =
         launchType === PERSISTENT
-          ? await getBrowserPerProcess(
-              playwrightInstance,
-              browserType,
-              this._jestPlaywrightConfig,
-            )
+          ? browserOrContext
           : await this.global.browser.newContext(contextOptions)
       if (collectCoverage) {
         ;(this.global.context as BrowserContext).exposeFunction(
@@ -180,6 +180,30 @@ export const getPlaywrightEnv = (basicEnv = 'node'): unknown => {
           this.global.it = it
           this.global.test = test
         },
+        _configSeparateEnv: async (
+          config: JestPlaywrightConfig,
+        ): Promise<ConfigParams> => {
+          const { contextOptions, launchType } = config
+          const browserOrContext = await getBrowserPerProcess(
+            playwrightInstance,
+            browserType,
+            {
+              ...this._jestPlaywrightConfig,
+              ...config,
+            },
+          )
+          const browser = launchType === PERSISTENT ? null : browserOrContext
+          const newContextOptions = getBrowserOptions(
+            browserName,
+            contextOptions,
+          )
+          const context =
+            launchType === PERSISTENT
+              ? (browserOrContext as BrowserContext)
+              : await (browser as Browser)!.newContext(newContextOptions)
+          const page = await context!.newPage()
+          return { browser, context, page }
+        },
         resetPage: async (): Promise<void> => {
           const { context, page } = this.global
           if (page) {

src/types.d.ts

@@ -36,8 +36,6 @@ export type DeviceType = CustomDeviceType | string | null
 
 export type WsEndpointType = string | null
 
-export type Packages = Partial<Record<BrowserType, BrowserType>>
-
 export type GenericBrowser = PlaywrightBrowserType<
   WebKitBrowser | ChromiumBrowser | FirefoxBrowser
 >