fix(browser): support webdriverio 9 (#7553)

Author: sheremet-va

packages/browser/package.json

@@ -60,6 +60,7 @@
     "*.d.ts",
     "context.js",
     "dist",
+    "dummy.js",
     "providers"
   ],
   "scripts": {
@@ -73,7 +74,7 @@
   "peerDependencies": {
     "playwright": "*",
     "vitest": "workspace:*",
-    "webdriverio": "*"
+    "webdriverio": "^7.0.0 || ^8.0.0 || ^9.0.0"
   },
   "peerDependenciesMeta": {
     "playwright": {
@@ -103,7 +104,8 @@
     "@vitest/runner": "workspace:*",
     "@vitest/ui": "workspace:*",
     "@vitest/ws-client": "workspace:*",
-    "@wdio/protocols": "^8.40.3",
+    "@wdio/protocols": "^9.7.0",
+    "@wdio/types": "^9.9.0",
     "birpc": "0.2.19",
     "flatted": "^3.3.3",
     "ivya": "^1.1.1",
@@ -114,6 +116,6 @@
     "playwright-core": "^1.50.1",
     "safaridriver": "^1.0.0",
     "vitest": "workspace:*",
-    "webdriverio": "^8.42.0"
+    "webdriverio": "^9.10.0"
   }
 }

packages/browser/providers/webdriverio.d.ts

@@ -1,9 +1,11 @@
-import type { RemoteOptions, ClickOptions, DragAndDropOptions } from 'webdriverio'
+import type { remote, ClickOptions, DragAndDropOptions } from 'webdriverio'
 import '../matchers.js'
 import type {} from "vitest/node"
 
 declare module 'vitest/node' {
-  export interface BrowserProviderOptions extends Partial<RemoteOptions> {}
+  export interface BrowserProviderOptions extends Partial<
+    Parameters<typeof remote>[0]
+  > {}
 
   export interface UserEventClickOptions extends ClickOptions {}
 

packages/browser/src/client/tester/logger.ts

@@ -95,6 +95,13 @@ export function setupConsoleLogSpy(): void {
 function stdout(base: (...args: unknown[]) => void) {
   return (...args: unknown[]) => {
     base(...args)
+    // ignore shadow root logs from wdio
+    // https://github.com/webdriverio/webdriverio/discussions/14221
+    if (args[0] === '[WDIO]') {
+      if (args[1] === 'newShadowRoot' || args[1] === 'removeShadowRoot') {
+        return
+      }
+    }
     sendLog('stdout', processLog(args))
   }
 }

packages/browser/src/node/providers/webdriver.ts

@@ -1,9 +1,9 @@
+import type { Capabilities } from '@wdio/types'
 import type {
   BrowserProvider,
   BrowserProviderInitializationOptions,
   TestProject,
 } from 'vitest/node'
-import type { RemoteOptions } from 'webdriverio'
 
 const webdriverBrowsers = ['firefox', 'chrome', 'edge', 'safari'] as const
 type WebdriverBrowser = (typeof webdriverBrowsers)[number]
@@ -22,7 +22,7 @@ export class WebdriverBrowserProvider implements BrowserProvider {
   private browserName!: WebdriverBrowser
   private project!: TestProject
 
-  private options?: RemoteOptions
+  private options?: Capabilities.WebdriverIOConfig
 
   getSupportedBrowsers(): readonly string[] {
     return webdriverBrowsers
@@ -34,20 +34,32 @@ export class WebdriverBrowserProvider implements BrowserProvider {
   ): Promise<void> {
     this.project = ctx
     this.browserName = browser
-    this.options = options as RemoteOptions
+    this.options = options as Capabilities.WebdriverIOConfig
   }
 
   async switchToTestFrame(): Promise<void> {
     const page = this.browser!
-    const iframe = await page.findElement(
-      'css selector',
-      'iframe[data-vitest]',
-    )
-    await page.switchToFrame(iframe)
+    // support wdio@9
+    if (page.switchFrame) {
+      await page.switchFrame(page.$('iframe[data-vitest]'))
+    }
+    else {
+      const iframe = await page.findElement(
+        'css selector',
+        'iframe[data-vitest]',
+      )
+      await page.switchToFrame(iframe)
+    }
   }
 
   async switchToMainFrame(): Promise<void> {
-    await this.browser!.switchToParentFrame()
+    const page = this.browser!
+    if (page.switchFrame) {
+      await page.switchFrame(null)
+    }
+    else {
+      await page.switchToParentFrame()
+    }
   }
 
   getCommandsContext(): {
@@ -86,7 +98,7 @@ export class WebdriverBrowserProvider implements BrowserProvider {
   }
 
   private buildCapabilities() {
-    const capabilities: RemoteOptions['capabilities'] = {
+    const capabilities: Capabilities.WebdriverIOConfig['capabilities'] = {
       ...this.options?.capabilities,
       browserName: this.browserName,
     }