Fix devices error with playwright-core (#126)

* Fix devices error with playwright-core

* fix: refactored device loading (#127)

* Improve some ts in PlaywrightRunner

Co-authored-by: Max Schmitt <max@schmitt.mx>

Author: mmarkelov

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     'import/no-dynamic-require': 'off',
     'import/no-unresolved': 'off',
     'prettier/prettier': 'error',
+    '@typescript-eslint/ban-ts-ignore': 'off',
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {

src/PlaywrightEnvironment.ts

@@ -3,7 +3,6 @@
 import type { Config as JestConfig } from '@jest/types'
 import type { Event, State } from 'jest-circus'
 import type { Browser } from 'playwright-core'
-import playwright from 'playwright-core'
 import type { Config, GenericBrowser, BrowserType } from './types'
 import { CHROMIUM, IMPORT_KIND_PLAYWRIGHT } from './constants'
 import {
@@ -77,14 +76,14 @@ export const getPlaywrightEnv = (basicEnv = 'node') => {
       }
       //@ts-ignore
       const device = getDeviceType(this._config.device)
-      const playwrightInstance = await getPlaywrightInstance(
+      const { instance: playwrightInstance, devices } = getPlaywrightInstance(
         playwrightPackage,
         browserType,
       )
       let contextOptions = context
 
       if (device) {
-        const { viewport, userAgent } = playwright.devices[device]
+        const { viewport, userAgent } = devices[device]
         contextOptions = { viewport, userAgent, ...contextOptions }
       }
       this.global.browserName = browserType

src/PlaywrightRunner.ts

@@ -1,6 +1,4 @@
-// @ts-nocheck
 import JestRunner from 'jest-runner'
-import playwright from 'playwright-core'
 import type {
   Test,
   TestRunnerContext,
@@ -17,6 +15,8 @@ import {
   checkDeviceEnv,
   getDisplayName,
   readConfig,
+  getPlaywrightInstance,
+  readPackage,
 } from './utils'
 import { DEFAULT_TEST_PLAYWRIGHT_TIMEOUT } from './constants'
 
@@ -33,11 +33,14 @@ const getBrowserTest = (
       ...test.context,
       config: {
         ...test.context.config,
+        // @ts-ignore
         browserName: browser,
         device,
         displayName: {
           name: displayName
-            ? `${playwrightDisplayName} ${displayName.name}`
+            ? `${playwrightDisplayName} ${
+                typeof displayName === 'string' ? displayName : displayName.name
+              }`
             : playwrightDisplayName,
           color: 'yellow',
         },
@@ -46,17 +49,22 @@ const getBrowserTest = (
   }
 }
 
-const getTests = (tests: Test[]): Promise<Test[]> => {
-  return Promise.all(
+const getTests = async (tests: Test[]): Promise<Test[]> => {
+  const playwrightPackage = await readPackage()
+  return await Promise.all(
     tests.map(async (test) => {
       const { rootDir } = test.context.config
       const { browsers, devices } = await readConfig(rootDir)
       return browsers.flatMap((browser) => {
         checkBrowserEnv(browser)
-        return devices.length
+        const { devices: availableDevices } = getPlaywrightInstance(
+          playwrightPackage,
+          browser,
+        )
+        return devices
           ? devices.flatMap((device) => {
-              const availableDevices = Object.keys(playwright.devices)
-              checkDeviceEnv(device, availableDevices)
+              const availableDeviceNames = Object.keys(availableDevices)
+              checkDeviceEnv(device, availableDeviceNames)
               return getBrowserTest(test, browser, device)
             })
           : getBrowserTest(test, browser, null)
@@ -87,14 +95,14 @@ class PlaywrightRunner extends JestRunner {
     const browserTests = await getTests(tests)
 
     return await (options.serial
-      ? this._createInBandTestRun(
+      ? this['_createInBandTestRun'](
           browserTests,
           watcher,
           onStart,
           onResult,
           onFailure,
         )
-      : this._createParallelTestRun(
+      : this['_createParallelTestRun'](
           browserTests,
           watcher,
           onStart,

src/types.ts

@@ -6,6 +6,7 @@ import type {
   FirefoxBrowser,
   BrowserType as PlaywrightBrowserType,
   BrowserTypeConnectOptions,
+  DeviceDescriptor,
 } from 'playwright-core'
 import type { JestDevServerOptions } from 'jest-dev-server'
 import { CHROMIUM, FIREFOX, IMPORT_KIND_PLAYWRIGHT, WEBKIT } from './constants'
@@ -21,13 +22,20 @@ export type SelectorType = {
   name: string
 }
 
+type Devices = { [name: string]: DeviceDescriptor }
+
+export interface Playwright {
+  instance: GenericBrowser
+  devices: Devices
+}
+
 export type PlaywrightRequireType = BrowserType | typeof IMPORT_KIND_PLAYWRIGHT
 
 export interface Config {
   launchBrowserApp?: BrowserTypeLaunchOptions
   context?: BrowserNewContextOptions
   exitOnPageError: boolean
-  browsers?: BrowserType[]
+  browsers: BrowserType[]
   devices?: string[]
   server?: JestDevServerOptions
   selectors?: SelectorType[]

src/utils.test.ts

@@ -232,7 +232,7 @@ describe('getPlaywrightInstance', () => {
       firefox: 'firefox',
     }))
 
-    const instance = await getPlaywrightInstance('playwright', 'firefox')
+    const { instance } = getPlaywrightInstance('playwright', 'firefox')
     expect(instance).toEqual('firefox')
   })
 
@@ -243,7 +243,7 @@ describe('getPlaywrightInstance', () => {
       chromium: 'chromium',
     }))
 
-    const instance = await getPlaywrightInstance('chromium', 'chromium')
+    const { instance } = getPlaywrightInstance('chromium', 'chromium')
     expect(instance).toEqual('chromium')
   })
 })

src/utils.ts

@@ -5,7 +5,7 @@ import type {
   BrowserType,
   Config,
   PlaywrightRequireType,
-  GenericBrowser,
+  Playwright,
 } from './types'
 import {
   CHROMIUM,
@@ -87,14 +87,22 @@ export const readPackage = async (): Promise<PlaywrightRequireType> => {
   return playwright
 }
 
-export const getPlaywrightInstance = async (
+export const getPlaywrightInstance = (
   playwrightPackage: PlaywrightRequireType,
-  browserType: BrowserType,
-): Promise<GenericBrowser> => {
+  browserName: BrowserType,
+): Playwright => {
+  const buildPlaywrightStructure = (importName: string): Playwright => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const pw = require(importName)
+    return {
+      instance: pw[browserName],
+      devices: pw['devices'],
+    }
+  }
   if (playwrightPackage === IMPORT_KIND_PLAYWRIGHT) {
-    return require('playwright')[browserType]
+    return buildPlaywrightStructure('playwright')
   }
-  return require(`playwright-${playwrightPackage}`)[playwrightPackage]
+  return buildPlaywrightStructure(`playwright-${playwrightPackage}`)
 }
 
 export const readConfig = async (