chore: Upgrades WebdriverIO to v9

package.json

@@ -30,13 +30,15 @@
   "dependencies": {
     "@aws-sdk/client-device-farm": "^3.623.0",
     "@types/pngjs": "^6.0.4",
+    "@wdio/globals": "^9.1.4",
+    "@wdio/types": "^9.1.3",
     "get-stream": "^6.0.1",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.2",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",
     "wait-on": "^7.2.0",
-    "webdriverio": "^7.25.2"
+    "webdriverio": "^9.1.4"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.186",

src/browsers/browser-creator.ts

@@ -1,10 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { remote, RemoteOptions } from 'webdriverio';
+
+import { remote } from 'webdriverio';
+import { Options } from '@wdio/types';
 import merge from 'lodash/merge';
 
 import { BrowserError } from '../exceptions';
-import { Capabilities } from './capabilities';
 
 export interface WebDriverOptions {
   width: number;
@@ -13,7 +14,7 @@ export interface WebDriverOptions {
   implicitTimeout: number;
   scriptTimeout: number;
   baseUrl?: string;
-  logLevel: RemoteOptions['logLevel'];
+  logLevel: Options.WebDriverLogTypes;
   capabilities?: Record<string, any>;
 }
 
@@ -52,7 +53,8 @@ export default abstract class BrowserCreator {
     await browser.setTimeout({ implicit: options.implicitTimeout, script: options.scriptTimeout });
 
     if (!browser.isMobile) {
-      await browser.$('body').then(body => body.moveTo({ xOffset: 0, yOffset: 0 }));
+      const body = await browser.$('body');
+      await body.moveTo({ xOffset: 0, yOffset: 0 });
       await browser.setWindowSize(options.width, options.height);
     }
 
@@ -75,5 +77,5 @@ export default abstract class BrowserCreator {
   }
 
   protected abstract __getBrowserUrl(): Promise<URL>;
-  protected abstract __getCapabilities(): Capabilities;
+  protected abstract __getCapabilities(): WebdriverIO.Capabilities;
 }

src/browsers/browserstack.ts

@@ -4,19 +4,19 @@ import { URL } from 'url';
 import pRetry, { AbortError } from 'p-retry';
 import BrowserCreator, { WebDriverOptions } from './browser-creator';
 import { BrowserStackFullQueueErrorText } from '../exceptions';
-import { Capabilities, getCapability } from './capabilities';
+import { getCapability } from './capabilities';
 
 const N_SEC_SLEEP_BEFORE_RETRY = 30;
 
 const browserStackHub = 'https://hub.browserstack.com/wd/hub';
 
-const browsers: Record<string, Capabilities> = {
+const browsers: Record<string, WebdriverIO.Capabilities> = {
   Firefox: {
     browserName: 'firefox',
     // Leave blank so we get the latest version. 'beta' is also a valid option
     // browserVersion: '69.0',
     'bstack:options': {
-      seleniumVersion: '3.14.0',
+      seleniumVersion: '4.25.0',
       os: 'Windows',
       osVersion: '10',
     },
@@ -111,7 +111,7 @@ export default class BrowserStackBrowserCreator extends BrowserCreator {
     return new URL(browserStackHub);
   }
 
-  protected __getCapabilities(): Capabilities {
+  protected __getCapabilities(): WebdriverIO.Capabilities {
     const capabilities = getCapability(this.browserName, browsers);
     const browserstackOptions = this.options as BrowserstackOptions;
     return {

src/browsers/capabilities.ts

@@ -1,12 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import lodash from 'lodash';
-import { RemoteOptions } from 'webdriverio';
 import { FatalError } from '../exceptions';
 
-export type Capabilities = RemoteOptions['capabilities'];
-
-const defaultCapabilities: Record<string, Capabilities> = {
+const defaultCapabilities: Record<string, WebdriverIO.Capabilities> = {
   Chrome: {
     browserName: 'chrome',
   },
@@ -63,6 +61,7 @@ const defaultCapabilities: Record<string, Capabilities> = {
   Firefox: {
     browserName: 'firefox',
     'moz:firefoxOptions': {
+      args: ['-headless'],
       prefs: {
         'fission.webContentIsolationStrategy': 0,
         'fission.bfcacheInParent': false,
@@ -77,7 +76,10 @@ const defaultCapabilities: Record<string, Capabilities> = {
   },
 };
 
-export function getCapability(browserName: string, capabilities: Record<string, Capabilities>): Capabilities {
+export function getCapability(
+  browserName: string,
+  capabilities: Record<string, WebdriverIO.Capabilities>
+): WebdriverIO.Capabilities {
   if (!(browserName in capabilities)) {
     throw new FatalError(`Browser ${browserName} is not supported in this provider`);
   }

src/browsers/devicefarm-mobile.ts

@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import { URL } from 'url';
 import BrowserCreator from './browser-creator';
-import { Capabilities, getCapability } from './capabilities';
+import { getCapability } from './capabilities';
 
 // The remaining options like browserName, deviceName, etc. will be covered
 // by default capabilities in DeviceFarm and/or the Appium server.
-const mobileBrowsers: Record<string, Capabilities> = {
+const mobileBrowsers: Record<string, WebdriverIO.Capabilities> = {
   iOS: {
     'appium:automationName': 'XCUITest',
     'appium:platformName': 'iOS',
@@ -24,7 +24,7 @@ export default class MobileBrowserCreator extends BrowserCreator {
     return new URL(this.options.seleniumUrl);
   }
 
-  __getCapabilities(): Capabilities {
+  __getCapabilities(): WebdriverIO.Capabilities {
     return getCapability(this.browserName, mobileBrowsers);
   }
 }

src/browsers/devicefarm.ts

@@ -3,7 +3,7 @@
 import { URL } from 'url';
 import { DeviceFarm } from '@aws-sdk/client-device-farm';
 import BrowserCreator from './browser-creator';
-import defaultCapabilities, { Capabilities, getCapability } from './capabilities';
+import defaultCapabilities, { getCapability } from './capabilities';
 import { FatalError } from '../exceptions';
 
 export interface DevicefarmOptions {
@@ -28,7 +28,7 @@ export default class DevicefarmBrowserCreator extends BrowserCreator {
     return new URL(response.url);
   }
 
-  protected __getCapabilities(): Capabilities {
+  protected __getCapabilities(): WebdriverIO.Capabilities {
     return getCapability(this.browserName, defaultCapabilities);
   }
 }

src/browsers/local.ts

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import { URL } from 'url';
 import BrowserCreator from './browser-creator';
-import defaultCapabilities, { Capabilities, getCapability, mergeCapabilities } from './capabilities';
+import defaultCapabilities, { getCapability, mergeCapabilities } from './capabilities';
 
-const localBrowsers: Record<string, Capabilities> = {
+const localBrowsers: Record<string, WebdriverIO.Capabilities> = {
   ...defaultCapabilities,
   ChromeHeadless: mergeCapabilities(defaultCapabilities.ChromeHeadless, {
     'goog:chromeOptions': {
@@ -15,14 +15,17 @@ const localBrowsers: Record<string, Capabilities> = {
         },
       },
     },
+    // Workaround for https://github.com/webdriverio/webdriverio/issues/13440
+    'wdio:enforceWebDriverClassic': true,
   }),
   ChromeHeadlessIntegration: mergeCapabilities(defaultCapabilities.ChromeHeadless, {
     'goog:chromeOptions': {
       args: ['--force-prefers-reduced-motion'],
     },
+    // Workaround for https://github.com/webdriverio/webdriverio/issues/13440
+    'wdio:enforceWebDriverClassic': true,
   }),
   Firefox: mergeCapabilities(defaultCapabilities.Firefox, {
-    // https://firefox-source-docs.mozilla.org/testing/geckodriver/Capabilities.html
     'moz:debuggerAddress': true,
   }),
 };
@@ -32,7 +35,7 @@ export default class LocalBrowserCreator extends BrowserCreator {
     return new URL(this.options.seleniumUrl);
   }
 
-  __getCapabilities(): Capabilities {
+  __getCapabilities(): WebdriverIO.Capabilities {
     return getCapability(this.browserName, localBrowsers);
   }
 }

src/page-objects/base.ts

@@ -17,9 +17,10 @@ import { getElementCenter } from './utils';
 
 import { ElementRect } from './types';
 import { waitForTimerAndAnimationFrame } from './browser-scripts';
+import { Browser } from 'webdriverio';
 
 export default class BasePageObject {
-  constructor(protected browser: WebdriverIO.Browser) {}
+  constructor(protected browser: Browser) {}
 
   async pause(milliseconds: number) {
     await this.browser.pause(milliseconds);
@@ -50,56 +51,45 @@ export default class BasePageObject {
   }
 
   async buttonDownOnElement(selector: string) {
-    // buttonDown exists only in JSON Wire protocol
-    if (this.browser.buttonDown) {
-      await this.hoverElement(selector);
-      await this.browser.buttonDown();
-    } else {
-      // Clean up all previous actions before stating a new batch. Without this line Safari emits extra "mouseup" events
-      await this.browser.releaseActions();
-      const box = await this.getBoundingBox(selector);
-      const center = getElementCenter(box);
-      // W3C alternative is `performActions`. All consecutive actions have to be a part of a single call
-      await this.browser.performActions([
-        {
-          type: 'pointer',
-          id: 'mouse',
-          parameters: { pointerType: 'mouse' },
-          actions: [
-            { type: 'pointerMove', duration: 0, x: center.x, y: center.y },
-            { type: 'pointerDown', button: 0 },
-            // extra delay to let event listeners to be fired
-            { type: 'pause', duration: 10 },
-          ],
-        },
-      ]);
-    }
+    // Clean up all previous actions before stating a new batch. Without this line Safari emits extra "mouseup" events
+    await this.browser.releaseActions();
+    const box = await this.getBoundingBox(selector);
+    const center = getElementCenter(box);
+    // W3C alternative is `performActions`. All consecutive actions have to be a part of a single call
+    await this.browser.performActions([
+      {
+        type: 'pointer',
+        id: 'mouse',
+        parameters: { pointerType: 'mouse' },
+        actions: [
+          { type: 'pointerMove', duration: 0, x: center.x, y: center.y },
+          { type: 'pointerDown', button: 0 },
+          // extra delay to let event listeners to be fired
+          { type: 'pause', duration: 10 },
+        ],
+      },
+    ]);
   }
 
   async buttonUp() {
-    // buttonUp exists only in JSON Wire protocol
-    if (this.browser.buttonUp) {
-      await this.browser.buttonUp();
-    } else {
-      // W3C alternative is `performActions`
-      await this.browser.performActions([
-        {
-          type: 'pointer',
-          id: 'mouse',
-          parameters: { pointerType: 'mouse' },
-          actions: [
-            { type: 'pointerUp', button: 0 },
-
-            // extra delay for Safari to process the event before moving the cursor away
-            { type: 'pause', duration: 10 },
-            // return cursor back to the corner to avoid hover effects on screenshots
-            { type: 'pointerMove', duration: 0, x: 0, y: 0 },
-          ],
-        },
-      ]);
-      // make sure all controls are properly released to avoid conflicts with further actions
-      await this.browser.releaseActions();
-    }
+    // W3C alternative is `performActions`
+    await this.browser.performActions([
+      {
+        type: 'pointer',
+        id: 'mouse',
+        parameters: { pointerType: 'mouse' },
+        actions: [
+          { type: 'pointerUp', button: 0 },
+
+          // extra delay for Safari to process the event before moving the cursor away
+          { type: 'pause', duration: 10 },
+          // return cursor back to the corner to avoid hover effects on screenshots
+          { type: 'pointerMove', duration: 0, x: 0, y: 0 },
+        ],
+      },
+    ]);
+    // make sure all controls are properly released to avoid conflicts with further actions
+    await this.browser.releaseActions();
   }
 
   async dragAndDrop(sourceSelector: string, xOffset = 0, yOffset = 0) {
@@ -112,7 +102,7 @@ export default class BasePageObject {
     return element.getValue();
   }
 
-  async setValue(selector: string, value: number | string | string[]) {
+  async setValue(selector: string, value: number | string) {
     const element = await this.browser.$(selector);
     await element.setValue(value);
   }
@@ -174,7 +164,7 @@ export default class BasePageObject {
   }
 
   async isExisting(selector: string) {
-    const elements = await this.browser.$$(selector);
+    const elements = await this.browser.$$(selector).map(element => element);
     return elements.length > 0;
   }
 
@@ -185,7 +175,7 @@ export default class BasePageObject {
 
   async isDisplayedInViewport(selector: string) {
     const element = await this.browser.$(selector);
-    return element.isDisplayedInViewport();
+    return element.isDisplayed({ withinViewport: true });
   }
 
   async isClickable(selector: string) {
@@ -224,7 +214,7 @@ export default class BasePageObject {
   }
 
   async getElementsText(selector: string) {
-    const elements = await this.browser.$$(selector);
+    const elements = await this.browser.$$(selector).map(element => element);
     return Promise.all(elements.map(async element => element.getText()));
   }
 

src/use-browser.ts

@@ -3,6 +3,7 @@
 import { WebDriverOptions } from './browsers/browser-creator';
 import getBrowserCreator from './browser';
 import merge from 'lodash/merge';
+import { Browser } from 'webdriverio';
 
 type BrowserOptions = {
   browserName: string;
@@ -29,7 +30,7 @@ function isFaviconError(error: Record<string, unknown>) {
 }
 
 interface TestFunction {
-  (browser: WebdriverIO.Browser): Promise<void> | void;
+  (browser: Browser): Promise<void> | void;
 }
 
 function useBrowser(optionsOverride: Partial<WebDriverOptions>, testFn: TestFunction): () => Promise<void>;

tsconfig.json

@@ -4,7 +4,7 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "lib": ["es2017", "dom"],
-    "types": ["node", "webdriverio/async"],
+    "types": ["node", "@wdio/globals/types"],
     "declaration": true,
     "strict": true,
     "skipLibCheck": true,