[V8] Add feature to specify os version for the emulated device (#12345)

* Add feature to specify os version for the emulated device * Update docs for new device custom os feature
webdriverio · Feb 26, 2024 · 7dfd422 · 7dfd422
1 parent 1288960
commit 7dfd422
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/packages/wdio-devtools-service/README.md b/packages/wdio-devtools-service/README.md
@@ -188,7 +188,8 @@ The service allows you to emulate a specific device type. If set, the browser vi
 
 ```js
 await browser.emulateDevice('iPhone X')
-// or `browser.emulateDevice('iPhone X', true)` if you want to be in landscape mode
+// or `browser.emulateDevice('iPhone X', { inLandscape: true })` if you want to be in landscape mode
+// or `browser.emulateDevice('iPhone X', { osVersion: "15.0" })` if you want to use emulated device with custom OS version
 ```
 
 Available predefined device profiles are: `Blackberry PlayBook`, `BlackBerry Z30`, `Galaxy Note 3`, `Galaxy Note II`, `Galaxy S III`, `Galaxy S5`, `iPad`, `iPad Mini`, `iPad Pro`, `iPhone 4`, `iPhone 5`, `iPhone 6`, `iPhone 6 Plus`, `iPhone 7`, `iPhone 7 Plus`, `iPhone 8`, `iPhone 8 Plus`, `iPhone SE`, `iPhone X`, `JioPhone 2`,

diff --git a/packages/wdio-devtools-service/src/commands.ts b/packages/wdio-devtools-service/src/commands.ts
@@ -12,6 +12,7 @@ import { CLICK_TRANSITION, DEFAULT_THROTTLE_STATE, DEFAULT_TRACING_CATEGORIES, N
 import { sumByKey } from './utils.js'
 import type {
     Device,
+    DeviceOptions,
     DeviceDescription, DevtoolsConfig,
     EnablePerformanceAuditsOptions,
     FormFactor,
@@ -215,19 +216,24 @@ export default class CommandHandler {
     /**
      * set device emulation
      */
-    async emulateDevice (device: string | DeviceDescription, inLandscape?: boolean) {
+    async emulateDevice (device: string | DeviceDescription, deviceOptions?: DeviceOptions) {
         if (!this._page) {
             throw new Error('No page has been captured yet')
         }
 
         if (typeof device === 'string') {
-            const deviceName = device + (inLandscape ? ' landscape' : '') as keyof typeof KnownDevices
+            const deviceName = device + (deviceOptions?.inLandscape ? ' landscape' : '') as keyof typeof KnownDevices
             const deviceCapabilities = KnownDevices[deviceName]
             if (!deviceCapabilities) {
                 const deviceNames = Object.values(KnownDevices)
                     .map((device: Device) => device.name)
                     .filter((device: string) => !device.endsWith('landscape'))
                 throw new Error(`Unknown device, available options: ${deviceNames.join(', ')}`)
+            } else {
+                const osVersion = deviceOptions?.osVersion?.replaceAll('.', '_')
+                deviceCapabilities.userAgent = deviceCapabilities.userAgent.replace(/(?:Android|iPhone OS)\s?([\d._]+)?/, (match, group1) => {
+                    return osVersion ? match.replace(group1 || '', osVersion) : match
+                })
             }
 
             return this._page.emulate(deviceCapabilities)

diff --git a/packages/wdio-devtools-service/src/index.ts b/packages/wdio-devtools-service/src/index.ts
@@ -7,7 +7,7 @@ import { setUnsupportedCommand, getLighthouseDriver } from './utils.js'
 import { DEFAULT_THROTTLE_STATE, NETWORK_STATES } from './constants.js'
 import type {
     DevtoolsConfig, EnablePerformanceAuditsOptions,
-    DeviceDescription, PWAAudits
+    DeviceDescription, PWAAudits, DeviceOptions
 } from './types.js'
 
 export default class DevToolsService implements Services.ServiceInstance {
@@ -89,12 +89,12 @@ export default class DevToolsService implements Services.ServiceInstance {
     /**
      * set device emulation
      */
-    async _emulateDevice (device: string | DeviceDescription, inLandscape?: boolean) {
+    async _emulateDevice (device: string | DeviceDescription, deviceOptions?: DeviceOptions) {
         if (this._command.length === 1) {
-            return await this._command[0].emulateDevice(device, inLandscape)
+            return await this._command[0].emulateDevice(device, deviceOptions)
         }
 
-        return Promise.all(this._command.map(async c => await c.emulateDevice(device, inLandscape)))
+        return Promise.all(this._command.map(async c => await c.emulateDevice(device, deviceOptions)))
     }
 
     async _setThrottlingProfile(

diff --git a/packages/wdio-devtools-service/src/types.ts b/packages/wdio-devtools-service/src/types.ts
@@ -61,6 +61,11 @@ export interface Device {
     };
 }
 
+export interface DeviceOptions {
+    osVersion: string,
+    inLandscape: boolean
+}
+
 export interface Audit {
     audit: (opts: any, context: any) => Promise<any>,
     defaultOptions: Record<string, any>