Ability to use custom devices (#155)

* Small Readme fix

* Remove unnecessary await in return

* Pass all device properties to context

* Add ability to support custom devices

* Update snyk

* Remove unnecessary type

* Fix types

* Add eslint disable

* Add some readme about custom devices

* Fix types

* Approve custom device type

Author: mmarkelov

README.md

@@ -38,7 +38,7 @@ or with `jest.config.js`:
 
 ```javascript
 module.exports = {
-    preset: "jest-playwright-preset",
+  preset: 'jest-playwright-preset',
 }
 ```
 
@@ -82,7 +82,28 @@ You can specify a `jest-playwright.config.js` at the root of the project or defi
   - `chromium` Each test runs Chromium (default).
   - `firefox` Each test runs Firefox.
   - `webkit` Each test runs Webkit.
-- `devices` <[string[]]>. Define a [devices](https://github.com/microsoft/playwright/blob/master/docs/api.md#browsertypedevices) to run tests in. Actual list of devices can be found [here](https://github.com/Microsoft/playwright/blob/master/src/deviceDescriptors.ts).
+- `devices` <[string[]]>. Define a [devices](https://github.com/microsoft/playwright/blob/master/docs/api.md#browsertypedevices) to run tests in. Actual list of devices can be found [here](https://github.com/Microsoft/playwright/blob/master/src/deviceDescriptors.ts). Also you can define custom device:
+
+```js
+{
+  // Name of device
+  name: string
+  // Page width and height
+  viewport: {
+    width: number
+    height: number
+  }
+  // user agent
+  userAgent: string
+  // device scale factor
+  deviceScaleFactor: number
+  // is device is mobile
+  isMobile: boolean
+  // support of touch events
+  hasTouch: boolean
+}
+```
+
 - `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-dev-server` options](https://github.com/smooth-code/jest-puppeteer/tree/master/packages/jest-dev-server#options).
@@ -104,10 +125,10 @@ module.exports = {
 
 ```
 
-**Note**:
+### Notes
 
-- 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.
+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.
 
 ## Globals
 

src/PlaywrightEnvironment.ts

@@ -40,9 +40,9 @@ const getBrowserPerProcess = async (
   }
 
   if (connectOptions) {
-    return await playwrightInstance.connect(connectOptions)
+    return playwrightInstance.connect(connectOptions)
   } else {
-    return await playwrightInstance.launch(launchOptions)
+    return playwrightInstance.launch(launchOptions)
   }
 }
 
@@ -86,9 +86,14 @@ export const getPlaywrightEnv = (basicEnv = 'node') => {
         }
       }
 
-      if (device) {
-        const { viewport, userAgent } = devices[device]
-        contextOptions = { viewport, userAgent, ...contextOptions }
+      if (device !== null) {
+        if (typeof device === 'string') {
+          contextOptions = { ...devices[device], ...contextOptions }
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { name, ...deviceProps } = device
+          contextOptions = { ...deviceProps, ...contextOptions }
+        }
       }
       this.global.browserName = browserType
       this.global.deviceName = device

src/PlaywrightRunner.ts

@@ -86,9 +86,11 @@ class PlaywrightRunner extends JestRunner {
         const wsEndpoint = this.browser2Server[browser]!.wsEndpoint()
 
         if (devices && devices.length) {
-          devices.forEach((device) => {
-            const availableDeviceNames = Object.keys(availableDevices)
-            checkDeviceEnv(device, availableDeviceNames)
+          devices.forEach((device: DeviceType) => {
+            if (typeof device === 'string') {
+              const availableDeviceNames = Object.keys(availableDevices)
+              checkDeviceEnv(device, availableDeviceNames)
+            }
             pwTests.push(
               getBrowserTest(
                 test as JestPlaywrightTest,

src/types.d.ts

@@ -5,6 +5,7 @@ import type {
   ChromiumBrowser,
   FirefoxBrowser,
   BrowserType as PlaywrightBrowserType,
+  ViewportSize,
   devices,
 } from 'playwright-core'
 import type { Config as JestConfig } from '@jest/types'
@@ -15,7 +16,11 @@ import { CHROMIUM, FIREFOX, IMPORT_KIND_PLAYWRIGHT, WEBKIT } from './constants'
 
 export type BrowserType = typeof CHROMIUM | typeof FIREFOX | typeof WEBKIT
 
-export type DeviceType = string | null
+export type CustomDeviceType = BrowserContextOptions & {
+  name: string
+}
+
+export type DeviceType = CustomDeviceType | string | null
 
 export type Packages = Partial<Record<BrowserType, BrowserType>>
 
@@ -42,7 +47,7 @@ export interface JestPlaywrightConfig {
   contextOptions?: BrowserContextOptions
   exitOnPageError: boolean
   browsers: BrowserType[]
-  devices?: string[]
+  devices?: (string | CustomDeviceType)[]
   serverOptions?: JestProcessManagerOptions
   selectors?: SelectorType[]
   collectCoverage: boolean

src/utils.test.ts

@@ -107,6 +107,19 @@ describe('getDisplayName', () => {
       'browser: chromium device: iPhone 6',
     )
   })
+
+  it('should return right display name for passed browser and custom device', () => {
+    const customDevice = {
+      name: 'Custom device',
+      viewport: { width: 1920, height: 1080 },
+      deviceScaleFactor: 1,
+      isMobile: false,
+      hasTouch: false,
+    }
+    expect(getDisplayName('chromium', customDevice)).toBe(
+      'browser: chromium device: Custom device',
+    )
+  })
 })
 
 describe('getBrowserType', () => {

src/utils.ts

@@ -46,7 +46,15 @@ export const getDisplayName = (
   browser: BrowserType,
   device: DeviceType,
 ): string => {
-  return `browser: ${browser}${device ? ` device: ${device}` : ''}`
+  if (device !== null) {
+    if (typeof device === 'string') {
+      return `browser: ${browser} device: ${device}`
+    }
+    if (device.name) {
+      return `browser: ${browser} device: ${device.name}`
+    }
+  }
+  return `browser: ${browser}`
 }
 
 export const getDeviceType = (device: DeviceType): DeviceType => {