feat: upgrade wdio version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wdio-allure-ts",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "UI E2E testing util",
   "license": "MIT",
   "author": "Cloudinary <[email protected]>",
@@ -41,13 +41,13 @@
   "dependencies": {
     "@applitools/eyes-sdk-core": "11.0.2",
     "@applitools/eyes-webdriverio": "5.12.0",
-    "@wdio/allure-reporter": "^6.10.6",
-    "@wdio/cli": "^6.10.11",
-    "@wdio/devtools-service": "^6.10.11",
-    "@wdio/local-runner": "^6.10.11",
-    "@wdio/mocha-framework": "6.10.11",
-    "@wdio/selenium-standalone-service": "6.10.11",
-    "@wdio/sync": "6.10.11",
+    "@wdio/allure-reporter": "^7.7.3",
+    "@wdio/cli": "^7.7.4",
+    "@wdio/devtools-service": "^7.7.4",
+    "@wdio/local-runner": "^7.7.4",
+    "@wdio/mocha-framework": "7.7.4",
+    "@wdio/selenium-standalone-service": "7.7.4",
+    "@wdio/sync": "7.7.4",
     "adm-zip": "0.4.16",
     "allure-commandline": "^2.13.0",
     "axios": "^0.21.1",
@@ -56,11 +56,11 @@
     "dotenv": "^8.2.0",
     "lodash": "^4.17.19",
     "sync-request": "^6.1.0",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.0.0",
     "tsconfig-paths": "^3.9.0",
-    "wdio-docker-service": "^3.1.0",
-    "wdio-image-comparison-service": "^2.0.0",
-    "webdriverio": "6.10.11",
+    "wdio-docker-service": "^3.1.2",
+    "wdio-image-comparison-service": "^2.3.0",
+    "webdriverio": "7.7.4",
     "yargs": "15.4.1"
   },
   "devDependencies": {
@@ -81,7 +81,7 @@
     "local-web-server": "4.2.1",
     "prettier": "2.0.5",
     "standard-version": "^9.3.0",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.4"
   },
   "husky": {
     "hooks": {

src/commons/BrowserUtils.ts

@@ -1,5 +1,3 @@
-import WaitForOptions = WebdriverIO.WaitForOptions;
-import { CSSProperty, Element, LocationReturn, SizeReturn } from '@wdio/sync';
 import admZip, { IZipEntry } from 'adm-zip';
 import axios, { AxiosResponse } from 'axios';
 import { assert } from 'chai';
@@ -9,6 +7,10 @@ import { MouseButton } from '../enums/MouseButton';
 import { SelectorType } from '../enums/SelectorType';
 import { Reporter } from './Reporter';
 import { inspect } from 'util';
+import { DragAndDropCoordinate, ParsedCSSValue, WaitForOptions } from 'webdriverio';
+import { Size } from 'webdriverio/build/commands/element/getSize';
+import { Location } from 'webdriverio/build/commands/element/getLocation';
+import { Cookie } from '@wdio/protocols/build/types';
 
 const DEFAULT_TIME_OUT: number =
   process.env.DEFAULT_TIME_OUT === undefined ? 60000 : Number(process.env.DEFAULT_TIME_OUT);
@@ -358,9 +360,9 @@ export namespace BrowserUtils {
    * so the focus will be back on main page
    */
   export function switchToParentFrame(): void {
-    Reporter.debug(`Switching to parent frame (${browser.capabilities.browserName})`);
+    Reporter.debug(`Switching to parent frame (${browser.capabilities['browserName']})`);
 
-    switch (browser.capabilities.browserName) {
+    switch (browser.capabilities['browserName']) {
       case 'chrome': {
         Reporter.debug('Case chrome');
         tryBlock(() => browser.switchToParentFrame(), 'Chrome: Failed to switch to parent frame');
@@ -420,7 +422,7 @@ export namespace BrowserUtils {
   export function expectText(selector: string, expectedText: string): void {
     Reporter.debug(`Validate element text is '${expectedText}' by selector '${selector}'`);
     waitForDisplayed(selector);
-    const elementWithText: Element = $(selector);
+    const elementWithText: WebdriverIO.Element = $(selector);
     tryBlock(
       () =>
         browser.waitUntil(() => {
@@ -537,7 +539,7 @@ export namespace BrowserUtils {
     isExist(iframeSelector);
 
     const cssDisplayProperty: string = 'display';
-    const iframeDisplayProperty: CSSProperty = tryBlock(
+    const iframeDisplayProperty: ParsedCSSValue = tryBlock(
       () => $(iframeSelector).getCSSProperty(cssDisplayProperty), // iframe css
       `Failed to get '${cssDisplayProperty}' css property from '${iframeSelector}'`
     );
@@ -687,7 +689,7 @@ export namespace BrowserUtils {
    * @param selector element selector
    * @param cssPropertyName  css property name
    */
-  export function getCssProperty(selector: string, cssPropertyName: string): CSSProperty {
+  export function getCssProperty(selector: string, cssPropertyName: string): ParsedCSSValue {
     Reporter.debug(`Get css property '${cssPropertyName}' from element by '${selector}'`);
 
     return tryBlock(
@@ -706,7 +708,7 @@ export namespace BrowserUtils {
    * @param cookie cookie to set
    * @param domain domain to set cookie for
    */
-  export function setCookie(cookie: WebDriver.Cookie, domain: string): void {
+  export function setCookie(cookie: Cookie, domain: string): void {
     Reporter.debug(`Setting cookie: '${JSON.stringify(cookie)}'`);
 
     let currentUrl: string;
@@ -727,9 +729,9 @@ export namespace BrowserUtils {
    * You can query a specific cookie by providing the cookie name or
    * retrieve all.
    */
-  export function getCookies(names?: Array<string> | string): Array<WebDriver.Cookie> {
+  export function getCookies(names?: Array<string> | string): Array<Cookie> {
     Reporter.debug('Get cookies:');
-    const cookie: Array<WebDriver.Cookie> = tryBlock(() => browser.getCookies(names), 'Failed to get cookie');
+    const cookie: Array<Cookie> = tryBlock(() => browser.getCookies(names), 'Failed to get cookie');
     Reporter.debug(JSON.stringify(cookie));
 
     return cookie;
@@ -741,7 +743,7 @@ export namespace BrowserUtils {
    */
   export function deleteCookies(names?: Array<string> | string): void {
     Reporter.debug('Delete cookies:');
-    const cookie: Array<WebDriver.Cookie> = tryBlock(() => browser.deleteCookies(names), 'Failed to get cookie');
+    const cookie: Array<Cookie> = tryBlock(() => browser.deleteCookies(names), 'Failed to get cookie');
     Reporter.debug(JSON.stringify(cookie));
   }
 
@@ -796,7 +798,7 @@ export namespace BrowserUtils {
    *
    * @param selector - element for get size
    */
-  export function getElementSize(selector: string): SizeReturn {
+  export function getElementSize(selector: string): Size {
     Reporter.debug(`Get Element: '${selector}' size`);
     waitForDisplayed(selector);
 
@@ -810,7 +812,7 @@ export namespace BrowserUtils {
    */
   export function setWindowSize(width: number, height: number): void {
     Reporter.debug(`Set window size to '${width}X${height}'`);
-    switch (browser.capabilities.browserName) {
+    switch (browser.capabilities['browserName']) {
       case 'chrome': {
         tryBlock(() => browser.setWindowSize(width, height), 'Chrome: Failed to resize window');
         break;
@@ -829,11 +831,11 @@ export namespace BrowserUtils {
 
   export function getWindowSize(): object {
     Reporter.debug('Get window size');
-    if (browser.capabilities.browserName === 'chrome') {
+    if (browser.capabilities['browserName'] === 'chrome') {
       return tryBlock(() => browser.getWindowSize(), 'Chrome: Failed to get window size');
     }
 
-    if (browser.capabilities.browserName === 'firefox') {
+    if (browser.capabilities['browserName'] === 'firefox') {
       return tryBlock(() => browser.getWindowRect(), 'FireFox: Failed to get window size');
     }
 
@@ -880,7 +882,7 @@ export namespace BrowserUtils {
    * Determine an element’s location on the page. The point (0pix, 0pix) refers to the upper-left corner of the page.
    * @param selector  - element with requested position offset
    */
-  export function getElementLocation(selector: string): LocationReturn {
+  export function getElementLocation(selector: string): Location {
     Reporter.debug(`Get Element location '${selector}'`);
 
     return $(selector).getLocation();
@@ -946,7 +948,7 @@ export namespace BrowserUtils {
    * @param selector element selector
    * @param target destination element selector or object with x and y properties
    */
-  export function dragAndDrop(selector: string, target: string | WebdriverIO.DragAndDropCoordinate): void {
+  export function dragAndDrop(selector: string, target: string | DragAndDropCoordinate): void {
     Reporter.debug(`Drag and drop element '${selector}' to ${inspect(target)}.`);
     const isTargetSelector: boolean = typeof target === 'string';
 
@@ -955,8 +957,7 @@ export namespace BrowserUtils {
       isExist(target as string);
     }
     tryBlock(
-      () =>
-        $(selector).dragAndDrop(isTargetSelector ? $(target as string) : (target as WebdriverIO.DragAndDropCoordinate)),
+      () => $(selector).dragAndDrop(isTargetSelector ? $(target as string) : (target as DragAndDropCoordinate)),
       `Failed to drag and drop ${selector} to '${inspect(target)}'`
     );
   }

src/commons/Reporter.ts

@@ -1,4 +1,4 @@
-import allureReporter from '@wdio/allure-reporter';
+import allureReporter, { Status } from '@wdio/allure-reporter';
 import chalk from 'chalk';
 
 /**
@@ -77,9 +77,7 @@ export namespace Reporter {
    *    already integrated in Reporter.closeStep method in case of test failure
    */
   export function startNetworkAudit(): void {
-    if (browser.capabilities.browserName === 'chrome') {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
+    if (browser.capabilities['browserName'] === 'chrome') {
       browser.cdp('Network', 'enable');
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -122,7 +120,11 @@ export namespace Reporter {
       return logEntry.level == 'SEVERE';
     });
 
-    allureReporter.addAttachment('Browser console logs', `${JSON.stringify(filteredBrowserLogs, undefined, 2)}`);
+    allureReporter.addAttachment(
+      'Browser console logs',
+      `${JSON.stringify(filteredBrowserLogs, undefined, 2)}`,
+      'text/plain'
+    );
   }
 
   /**
@@ -136,7 +138,7 @@ export namespace Reporter {
 
       attachAndCleanNetworkLogs();
 
-      allureReporter.addAttachment('Page HTML source', `${browser.getPageSource()}`);
+      allureReporter.addAttachment('Page HTML source', `${browser.getPageSource()}`, 'text/html');
     }
     if (!isStepClosed) {
       sendCustomCommand(customCommand, isFailed ? 'failed' : 'passed');
@@ -257,8 +259,8 @@ export namespace Reporter {
    * @param command command to add
    * @param stepStatus status of steps
    */
-  function sendCustomCommand(command: CustomCommand, stepStatus?: string): void {
-    let status: string = 'passed';
+  function sendCustomCommand(command: CustomCommand, stepStatus?: Status): void {
+    let status: Status = 'passed';
     if (stepStatus !== undefined) {
       status = stepStatus;
     }

src/test/wdio.conf.js

@@ -1,12 +1,13 @@
 const dotenv = require('dotenv');
 dotenv.config();
+
 const maxChromeInstances = parseInt(process.env.MAX_CHROME_INSTANCES) || 10;
 const waitForTimeouts = parseInt(process.env.DEFAULT_TIME_OUT) || 3000;
 const seleniumStandaloneArgs = {
-    drivers: {
-      chrome: {
-        version: process.env.CHROME_DRIVER_VERSION,
-      },
+  drivers: {
+    chrome: {
+      version: process.env.CHROME_DRIVER_VERSION,
+    },
   },
 };
 /**
@@ -15,18 +16,18 @@ const seleniumStandaloneArgs = {
  *
  */
 exports.config = {
-  specs: ["./src/test/specs/**/*Spec.ts"],
-  suites: { regression: ["./src/test/specs/**/*Spec.ts"] },
+  specs: ['./src/test/specs/**/*Spec.ts'],
+  suites: { regression: ['./src/test/specs/**/*Spec.ts'] },
 
   // Browser capabilities
   capabilities: [
     {
-      browserName: "chrome",
+      browserName: 'chrome',
       maxInstances: maxChromeInstances,
-      "goog:chromeOptions": {
-        args: ["--window-size=1920,1080", "--headless", "--incognito"]
-      }
-    }
+      'goog:chromeOptions': {
+        args: ['--window-size=1920,1080', '--headless', '--incognito'],
+      },
+    },
   ],
   // ===================
   // Test Configurations
@@ -50,8 +51,8 @@ exports.config = {
   // your test setup with almost no effort. Unlike plugins, they don't add new
   // commands. Instead, they hook themselves up into the test process.
   services: [
-      ['devtools'],
-      [
+    ['devtools'],
+    [
       'selenium-standalone',
       {
         installArgs: seleniumStandaloneArgs,
@@ -69,7 +70,5 @@ exports.config = {
   mochaOpts: {
     ui: 'bdd',
     timeout: 300000,
-    // TypeScript setup
-    require: 'ts-node/register',
   },
 };

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["node", "@wdio/sync","mocha", "@wdio/mocha-framework"],
+    "types": ["node", "webdriverio/sync","mocha", "@wdio/mocha-framework", "@wdio/devtools-service"],
     "target": "es6",
     "module": "commonjs",
     "declaration": true,