chore: use correct types from puppeteer-core

packages/devtools/src/commands/elementSendKeys.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 import { UNICODE_CHARACTERS } from '@wdio/utils'
-import type { KeyInput } from 'puppeteer-core'
+import type { ElementHandle, KeyInput } from 'puppeteer-core'
 
 import { getStaleElementError } from '../utils'
 import type DevToolsDriver from '../devtoolsdriver'
@@ -20,7 +20,7 @@ export default async function elementSendKeys (
     this: DevToolsDriver,
     { elementId, text }: { elementId: string, text: string }
 ) {
-    const elementHandle = await this.elementStore.get(elementId)
+    const elementHandle = await this.elementStore.get(elementId) as any as ElementHandle<HTMLInputElement>
 
     if (!elementHandle) {
         throw getStaleElementError(elementId)

packages/devtools/src/commands/performActions.ts

@@ -1,4 +1,4 @@
-import { keyDefinitions, KeyInput } from 'puppeteer-core/lib/cjs/puppeteer/common/USKeyboardLayout'
+import { _keyDefinitions, KeyInput } from 'puppeteer-core/lib/cjs/puppeteer/common/USKeyboardLayout.js'
 import type { Keyboard, Mouse } from 'puppeteer-core/lib/cjs/puppeteer/common/Input'
 
 import getElementRect from './getElementRect'
@@ -81,7 +81,7 @@ export default async function performActions(
                  * for special characters like emojis 😉 we need to
                  * send in the value as text because it is not unicode
                  */
-                if (!keyDefinitions[singleAction.value as unknown as KeyInput]) {
+                if (!_keyDefinitions[singleAction.value as unknown as KeyInput]) {
                     await page.keyboard.sendCharacter(singleAction.value as unknown as KeyInput)
                     skipChars.push(singleAction.value)
                     continue

packages/devtools/src/commands/status.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 
 const puppeteerPath = require.resolve('puppeteer-core')
-const puppeteerPkg = require(`${path.dirname(puppeteerPath)}/package.json`)
+const puppeteerPkg = require(path.join(path.dirname(puppeteerPath), '..', '..', '..', 'package.json'))
 
 /**
  * The Status command returns information about whether a remote end is in a state

packages/devtools/src/commands/switchToFrame.ts

@@ -1,5 +1,5 @@
-import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/common/Page'
-import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/FrameManager'
+import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/api/Page'
+import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/Frame'
 import type { ElementReference } from '@wdio/protocols'
 
 import { ELEMENT_KEY } from '../constants'

packages/devtools/src/commands/switchToParentFrame.ts

@@ -1,5 +1,5 @@
-import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/common/Page'
-import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/FrameManager'
+import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/api/Page'
+import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/Frame'
 import type DevToolsDriver from '../devtoolsdriver'
 
 /**

packages/devtools/src/devtoolsdriver.ts

@@ -3,12 +3,12 @@ import path from 'path'
 import { v4 as uuidv4 } from 'uuid'
 
 import logger from '@wdio/logger'
-import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/common/Browser'
+import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/api/Browser'
 import type { Dialog } from 'puppeteer-core/lib/cjs/puppeteer/common/Dialog'
-import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/common/Page'
+import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/api/Page'
 import type { Target } from 'puppeteer-core/lib/cjs/puppeteer/common/Target'
 import type { CommandEndpoint } from '@wdio/protocols'
-import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/FrameManager'
+import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/Frame'
 
 import ElementStore from './elementstore'
 import { validate, sanitizeError } from './utils'

packages/devtools/src/elementstore.ts

@@ -1,5 +1,5 @@
-import type { ElementHandle } from 'puppeteer-core/lib/cjs/puppeteer/common/JSHandle'
-import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/FrameManager'
+import type { ElementHandle } from 'puppeteer-core/lib/cjs/puppeteer/common/ElementHandle'
+import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/Frame'
 
 export default class ElementStore {
     private _index = 0
@@ -9,7 +9,7 @@ export default class ElementStore {
     set (elementHandle: ElementHandle) {
         const index = `ELEMENT-${++this._index}`
         this._elementMap.set(index, elementHandle)
-        const frame = elementHandle.executionContext().frame()
+        const frame = elementHandle.executionContext()['_world']?.frame()
         if (frame) {
             let elementIndexes = this._frameMap.get(frame)
             if (!elementIndexes) {

packages/devtools/src/index.ts

@@ -8,7 +8,7 @@ import { webdriverMonad, devtoolsEnvironmentDetector } from '@wdio/utils'
 import { validateConfig } from '@wdio/config'
 import type { CommandEndpoint } from '@wdio/protocols'
 import type { Options, Capabilities } from '@wdio/types'
-import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/common/Browser'
+import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/api/Browser'
 
 import DevToolsDriver from './devtoolsdriver'
 import launch from './launcher'
@@ -82,7 +82,7 @@ export default class DevTools {
         if (vendorCapPrefix) {
             Object.assign(params.capabilities, {
                 [vendorCapPrefix]: Object.assign(
-                    { debuggerAddress: (browser as any)._connection.url().split('/')[2] },
+                    { debuggerAddress: browser.wsEndpoint().split('/')[2] },
                     params.capabilities[vendorCapPrefix]
                 )
             })

packages/devtools/src/launcher.ts

@@ -1,7 +1,7 @@
 import { launch as launchChromeBrowser } from 'chrome-launcher'
-import puppeteer, { PuppeteerNodeLaunchOptions } from 'puppeteer-core'
+import puppeteer, { PuppeteerNodeLaunchOptions, KnownDevices, Puppeteer, ConnectOptions } from 'puppeteer-core'
 import logger from '@wdio/logger'
-import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/common/Browser'
+import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/api/Browser'
 import type { Capabilities } from '@wdio/types'
 import { QueryHandler } from 'query-selector-shadow-dom/plugins/puppeteer'
 
@@ -26,7 +26,7 @@ import type { ExtendedCapabilities, DevToolsOptions } from './types'
 
 const log = logger('devtools')
 
-const DEVICE_NAMES = Object.values(puppeteer.devices).map((device) => device.name)
+const DEVICE_NAMES = Object.keys(KnownDevices)
 
 /**
  * launches Chrome and returns a Puppeteer browser instance
@@ -51,7 +51,7 @@ async function launchChrome (capabilities: ExtendedCapabilities) {
     let headless = (chromeOptions as any).headless || devtoolsOptions.headless
 
     if (typeof mobileEmulation.deviceName === 'string') {
-        const deviceProperties = Object.values(puppeteer.devices).find(device => device.name === mobileEmulation.deviceName)
+        const deviceProperties = KnownDevices[mobileEmulation.deviceName as keyof typeof KnownDevices]
 
         if (!deviceProperties) {
             throw new Error(`Unknown device name "${mobileEmulation.deviceName}", available: ${DEVICE_NAMES.join(', ')}`)
@@ -199,16 +199,16 @@ function launchBrowser (capabilities: ExtendedCapabilities, browserType: 'edge'
 function connectBrowser (connectionUrl: string, capabilities: ExtendedCapabilities) {
     const connectionProp = connectionUrl.startsWith('http') ? 'browserURL' : 'browserWSEndpoint'
     const devtoolsOptions = capabilities['wdio:devtoolsOptions']
-    const options: puppeteer.ConnectOptions = {
+    const options: ConnectOptions = {
         [connectionProp]: connectionUrl,
         ...devtoolsOptions
     }
     return puppeteer.connect(options) as unknown as Promise<Browser>
 }
 
 export default async function launch (capabilities: ExtendedCapabilities) {
-    puppeteer.unregisterCustomQueryHandler('shadow')
-    puppeteer.registerCustomQueryHandler('shadow', QueryHandler)
+    Puppeteer.unregisterCustomQueryHandler('shadow')
+    Puppeteer.registerCustomQueryHandler('shadow', QueryHandler as any)
     const browserName = capabilities.browserName?.toLowerCase()
 
     /**

packages/devtools/src/utils.ts

@@ -3,10 +3,10 @@ import logger from '@wdio/logger'
 import { commandCallStructure, isValidParameter, getArgumentType, canAccess } from '@wdio/utils'
 import { WebDriverProtocol, CommandParameters, CommandPathVariables, ElementReference } from '@wdio/protocols'
 import type { Logger } from '@wdio/logger'
-import type { ElementHandle } from 'puppeteer-core/lib/cjs/puppeteer/common/JSHandle'
-import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/common/Browser'
-import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/FrameManager'
-import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/common/Page'
+import type { ElementHandle } from 'puppeteer-core/lib/cjs/puppeteer/common/ElementHandle'
+import type { Browser } from 'puppeteer-core/lib/cjs/puppeteer/api/Browser'
+import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/Frame'
+import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/api/Page'
 
 import cleanUp from './scripts/cleanUpSerializationSelector'
 import { ELEMENT_KEY, SERIALIZE_PROPERTY, SERIALIZE_FLAG, ERROR_MESSAGES, PPTR_LOG_PREFIX } from './constants'
@@ -110,10 +110,10 @@ export async function findElement (
         await waitForFn.call(context, value, { timeout: implicitTimeout })
     }
 
-    let element
+    let element: ElementHandle<Element> | null = null
     try {
         element = using === 'xpath'
-            ? (await context.$x(value))[0]
+            ? (await context.$x(value))[0] as ElementHandle<Element>
             : await context.$(value)
     } catch (err: any) {
         /**
@@ -151,7 +151,7 @@ export async function findElements (
     }
 
     const elements = using === 'xpath'
-        ? await context.$x(value)
+        ? await context.$x(value) as ElementHandle<Element>[]
         : await context.$$(value)
 
     if (elements.length === 0) {

packages/devtools/tests/__mocks__/puppeteer-core.ts

@@ -1,32 +1,32 @@
 const sendMock = jest.fn()
 const listenerMock = jest.fn()
 
-const devices = [{
-    name: 'Nexus 6P',
-    userAgent: 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 6P Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
-    viewport: {
-        width: 412,
-        height: 732,
-        deviceScaleFactor: 3.5,
-        isMobile: true,
-        hasTouch: true,
-        isLandscape: false
-    }
-}, {
-    name: 'Nexus 6P landscape',
-    userAgent: 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 6P Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
-    viewport: {
-        width: 732,
-        height: 412,
-        deviceScaleFactor: 3.5,
-        isMobile: true,
-        hasTouch: true,
-        isLandscape: true
+export const KnownDevices = {
+    'Nexus 6P': {
+        name: 'Nexus 6P',
+        userAgent: 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 6P Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
+        viewport: {
+            width: 412,
+            height: 732,
+            deviceScaleFactor: 3.5,
+            isMobile: true,
+            hasTouch: true,
+            isLandscape: false
+        }
+    },
+    'Nexus 6P landscape' : {
+        name: 'Nexus 6P landscape',
+        userAgent: 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 6P Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
+        viewport: {
+            width: 732,
+            height: 412,
+            deviceScaleFactor: 3.5,
+            isMobile: true,
+            hasTouch: true,
+            isLandscape: true
+        }
     }
-}]
-devices['Nexus 6P'] = devices[0]
-devices['Nexus 6P landscape'] = devices[0]
-
+}
 class CDPSessionMock {
     send = sendMock
     on = listenerMock
@@ -68,7 +68,12 @@ class PuppeteerMock {
     getActivePage = jest.fn().mockImplementation(() => page)
     pages = jest.fn().mockReturnValue(Promise.resolve([page, page2]))
     userAgent = jest.fn().mockImplementation(() => 'MOCK USER AGENT')
-    _connection = { _transport: { _ws: { addEventListener: jest.fn() } } }
+    wsEndpoint = jest.fn().mockReturnValue('ws://some/path/to/cdp')
+}
+
+export class Puppeteer {
+    static registerCustomQueryHandler = jest.fn()
+    static unregisterCustomQueryHandler = jest.fn()
 }
 
 export default {
@@ -78,9 +83,6 @@ export default {
     PuppeteerMock,
     sendMock,
     listenerMock,
-    devices,
-    registerCustomQueryHandler: jest.fn(),
-    unregisterCustomQueryHandler: jest.fn(),
     launch: jest.fn().mockImplementation(
         () => Promise.resolve(new PuppeteerMock())),
     connect: jest.fn().mockImplementation(

packages/devtools/tests/devtools.test.ts

@@ -11,9 +11,7 @@ jest.mock('../src/launcher', () => jest.fn().mockImplementation((capabilities) =
             off: jest.fn(),
             setDefaultTimeout: jest.fn()
         }])),
-        _connection: {
-            url: () => 'ws://localhost:49375/devtools/browser/c4b017ea-f476-4026-a699-bc5d4858cfe1'
-        },
+        wsEndpoint: jest.fn().mockReturnValue('ws://localhost:49375/devtools/browser/c4b017ea-f476-4026-a699-bc5d4858cfe1'),
         userAgent: jest.fn().mockReturnValue(Promise.resolve('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36'))
     }
 }))

packages/devtools/tests/elementStore.test.ts

@@ -1,6 +1,6 @@
 import ElementStore from '../src/elementstore'
-import type { ElementHandle } from 'puppeteer-core/lib/cjs/puppeteer/common/JSHandle'
-import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/FrameManager'
+import type { ElementHandle } from 'puppeteer-core/lib/cjs/puppeteer/common/ElementHandle'
+import type { Frame } from 'puppeteer-core/lib/cjs/puppeteer/common/Frame'
 
 const elementHandleFactory = (
     { isConnected = true, frame = Symbol() }: { isConnected?: boolean, frame?: symbol } = {}
@@ -10,7 +10,7 @@ const elementHandleFactory = (
         return cb({ isConnected })
     },
     executionContext() {
-        return { frame: () => frame }
+        return { _world: { frame: () => frame } }
     }
 })
 
@@ -44,6 +44,8 @@ test('should clear elements of a specific frame', async () => {
     store.set(elementHandle1)
     const elementHandle2 = elementHandleFactory({ frame: frame2 }) as any as ElementHandle
     store.set(elementHandle2)
+    console.log("store['_frameMap'].size:", store['_frameMap'].size)
+
     expect(store['_frameMap'].size).toBe(2)
 
     store.clear(frame1 as any as Frame)

packages/devtools/tests/launcher.test.ts

@@ -1,4 +1,4 @@
-import puppeteer from 'puppeteer-core'
+import puppeteer, { Puppeteer } from 'puppeteer-core'
 import { launch as launchChromeBrowserImport } from 'chrome-launcher'
 
 import launch from '../src/launcher'
@@ -30,7 +30,7 @@ test('launch chrome with default values', async () => {
     })
     expect(launchChromeBrowser.mock.calls).toMatchSnapshot()
     expect((puppeteer.connect as jest.Mock).mock.calls).toMatchSnapshot()
-    expect(puppeteer.registerCustomQueryHandler).toBeCalledWith(
+    expect(Puppeteer.registerCustomQueryHandler).toBeCalledWith(
         'shadow',
         {
             queryAll: expect.any(Function),

packages/wdio-browserstack-service/src/service.ts

@@ -194,7 +194,7 @@ export default class BrowserstackService implements Services.ServiceInstance {
             log.info(`Update (reloaded) job with sessionId ${oldSessionId}, ${status}`)
         } else {
             const browserName = (this._browser as MultiRemoteBrowser<'async'>).instances.filter(
-                (browserName) => this._browser && (this._browser as MultiRemoteBrowser<'async'>)[browserName].sessionId === newSessionId)[0]
+                (browserName: string) => this._browser && (this._browser as MultiRemoteBrowser<'async'>)[browserName].sessionId === newSessionId)[0]
             log.info(`Update (reloaded) multiremote job for browser "${browserName}" and sessionId ${oldSessionId}, ${status}`)
         }
 
@@ -241,7 +241,7 @@ export default class BrowserstackService implements Services.ServiceInstance {
         }
 
         return Promise.all(_browser.instances
-            .filter(browserName => {
+            .filter((browserName: string) => {
                 const cap = getBrowserCapabilities(_browser, (this._caps as Capabilities.MultiRemoteCapabilities), browserName)
                 return isBrowserstackCapability(cap)
             })

packages/wdio-devtools-service/package.json

@@ -29,6 +29,7 @@
     "@babel/core": "^7.12.10",
     "@tracerbench/trace-event": "^7.0.0",
     "@types/node": "^18.0.0",
+    "@types/ws": "^8.5.3",
     "@wdio/logger": "7.26.0",
     "@wdio/types": "7.26.0",
     "babel-plugin-istanbul": "^6.0.0",
@@ -41,7 +42,8 @@
     "puppeteer-core": "^19.4.0",
     "speedline": "^1.4.1",
     "stable": "^0.1.8",
-    "webdriverio": "7.27.0"
+    "webdriverio": "7.27.0",
+    "ws": "^8.8.1"
   },
   "peerDependencies": {
     "@wdio/cli": "^7.0.0"

packages/wdio-devtools-service/src/commands.ts

@@ -4,7 +4,7 @@ import type { Browser, MultiRemoteBrowser } from 'webdriverio'
 
 import type { TraceEvent } from '@tracerbench/trace-event'
 import type { CDPSession } from 'puppeteer-core/lib/cjs/puppeteer/common/Connection'
-import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/common/Page'
+import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/api/Page'
 import type { TracingOptions } from 'puppeteer-core/lib/cjs/puppeteer/common/Tracing'
 
 import NetworkHandler, { RequestPayload } from './handler/network'
@@ -102,6 +102,9 @@ export default class CommandHandler {
 
         try {
             const traceBuffer = await this._page.tracing.stop()
+            if (!traceBuffer) {
+                throw new Error('No tracebuffer captured')
+            }
             this._traceEvents = JSON.parse(traceBuffer.toString('utf8'))
             this._isTracing = false
         } catch (err: any) {

packages/wdio-devtools-service/src/gatherer/coverage.ts

@@ -9,7 +9,7 @@ import reports from 'istanbul-reports'
 
 import logger from '@wdio/logger'
 
-import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/common/Page'
+import type { Page } from 'puppeteer-core/lib/cjs/puppeteer/api/Page'
 import type { CDPSession } from 'puppeteer-core/lib/cjs/puppeteer/common/Connection'
 
 import type { CoverageReporterOptions, Coverage } from '../types'