codeceptjs 3.4.1 → 3.5.1-2.beta.7

package/lib/helper/WebDriver.js

@@ -5,6 +5,7 @@ const path = require('path');
 const fs = require('fs');
 
 const Helper = require('@codeceptjs/helper');
+const crypto = require('crypto');
 const stringIncludes = require('../assert/include').includes;
 const { urlEquals, equals } = require('../assert/equal');
 const { debug } = require('../output');
@@ -27,6 +28,10 @@ const {
 const ElementNotFound = require('./errors/ElementNotFound');
 const ConnectionRefused = require('./errors/ConnectionRefused');
 const Locator = require('../locator');
+const { highlightElement } = require('./scripts/highlightElement');
+const store = require('../store');
+const { focusElement } = require('./scripts/focusElement');
+const { blurElement } = require('./scripts/blurElement');
 
 const SHADOW = 'shadow';
 const webRoot = 'body';
@@ -39,7 +44,7 @@ const webRoot = 'body';
  * @typedef WebDriverConfig
  * @type {object}
  * @prop {string} url - base url of website to be tested.
- * @prop {string} browser browser in which to perform testing.
+ * @prop {string} browser - Browser in which to perform testing.
  * @prop {string} [basicAuth] - (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
  * @prop {string} [host=localhost] - WebDriver host to connect.
  * @prop {number} [port=4444] - WebDriver port to connect.
@@ -57,6 +62,9 @@ const webRoot = 'body';
  * @prop {object} [desiredCapabilities] Selenium's [desired capabilities](https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities).
  * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
  * @prop {object} [timeouts] [WebDriver timeouts](http://webdriver.io/docs/timeouts.html) defined as hash.
+ * @prop {boolean} [highlightElement] - highlight the interacting elements. Default: false. Note: only activate under verbose mode (--verbose).
+ * @prop {string} [logLevel=silent] - level of logging verbosity. Default: silent. Options: trace | debug | info | warn | error | silent. More info: https://webdriver.io/docs/configuration/#loglevel
+ * @prop {boolean} [devtoolsProtocol=false] - enable devtools protocol. Default: false. More info: https://webdriver.io/docs/automationProtocols/#devtools-protocol.
  */
 const config = {};
 
@@ -66,6 +74,13 @@ const config = {};
  *
  * WebDriver requires Selenium Server and ChromeDriver/GeckoDriver to be installed. Those tools can be easily installed via NPM. Please check [Testing with WebDriver](https://codecept.io/webdriver/#testing-with-webdriver) for more details.
  *
+ * With the release of WebdriverIO version v8.14.0, and onwards, all driver management hassles are now a thing of the past 🙌. Read more [here](https://webdriver.io/blog/2023/07/31/driver-management/).
+ * One of the significant advantages of this update is that you can now get rid of any driver services you previously had to manage, such as
+ * `wdio-chromedriver-service`, `wdio-geckodriver-service`, `wdio-edgedriver-service`, `wdio-safaridriver-service`, and even `@wdio/selenium-standalone-service`.
+ *
+ * For those who require custom driver options, fear not; WebDriver Helper allows you to pass in driver options through custom WebDriver configuration.
+ * If you have a custom grid, use a cloud service, or prefer to run your own driver, there's no need to worry since WebDriver Helper will only start a driver when there are no other connection information settings like hostname or port specified.
+ *
  * <!-- configuration -->
  *
  * Example:
@@ -87,6 +102,28 @@ const config = {};
  * }
  * ```
  *
+ * Testing Chrome locally is now more convenient than ever. You can define a browser channel, and WebDriver Helper will take care of downloading the specified browser version for you.
+ * For example:
+ *
+ * ```js
+ * {
+ *    helpers: {
+ *      WebDriver : {
+ *        smartWait: 5000,
+ *        browser: "chrome",
+ *        browserVersion: '116.0.5793.0', // or 'stable', 'beta', 'dev' or 'canary'
+ *        restart: false,
+ *        windowSize: "maximize",
+ *        timeouts: {
+ *          "script": 60000,
+ *          "page load": 10000
+ *        }
+ *      }
+ *    }
+ * }
+ * ```
+ *
+ *
  * Example with basic authentication
  * ```js
  * {
@@ -127,6 +164,25 @@ const config = {};
  * }
  * ```
  *
+ * ### Running with devtools protocol
+ *
+ * ```js
+ * {
+ *    helpers: {
+ *      WebDriver : {
+ *        url: "http://localhost",
+ *        browser: "chrome",
+ *        devtoolsProtocol: true,
+ *        desiredCapabilities: {
+ *          chromeOptions: {
+ *            args: [ "--headless", "--disable-gpu", "--no-sandbox" ]
+ *          }
+ *        }
+ *      }
+ *    }
+ * }
+ * ```
+ *
  * ### Internet Explorer
  *
  * Additional configuration params can be used from [IE options](https://seleniumhq.github.io/selenium/docs/api/rb/Selenium/WebDriver/IE/Options.html)
@@ -409,7 +465,6 @@ class WebDriver extends Helper {
   _validateConfig(config) {
     const defaults = {
       logLevel: 'silent',
-      path: '/wd/hub',
       // codeceptjs
       remoteFileUpload: true,
       smartWait: 0,
@@ -423,17 +478,23 @@ class WebDriver extends Helper {
       keepCookies: false,
       keepBrowserState: false,
       deprecationWarnings: false,
+      highlightElement: false,
     };
 
     // override defaults with config
     config = Object.assign(defaults, config);
 
-    if (typeof config.host !== 'undefined') config.hostname = config.host; // webdriverio spec
+    if (config.host) {
+      // webdriverio spec
+      config.hostname = config.host;
+      config.path = '/wd/hub';
+    }
     config.baseUrl = config.url || config.baseUrl;
     if (config.desiredCapabilities && Object.keys(config.desiredCapabilities).length) {
       config.capabilities = config.desiredCapabilities;
     }
     config.capabilities.browserName = config.browser || config.capabilities.browserName;
+    config.capabilities.browserVersion = config.browserVersion || config.capabilities.browserVersion;
     if (config.capabilities.chromeOptions) {
       config.capabilities['goog:chromeOptions'] = config.capabilities.chromeOptions;
       delete config.capabilities.chromeOptions;
@@ -535,6 +596,10 @@ class WebDriver extends Helper {
         delete this.options.capabilities.hostname;
         delete this.options.capabilities.port;
         delete this.options.capabilities.path;
+        if (this.options.devtoolsProtocol) {
+          if (!['chrome', 'chromium'].includes(this.options.browser.toLowerCase())) throw Error('The devtools protocol is only working with Chrome or Chromium');
+          this.options.automationProtocol = 'devtools';
+        }
         this.browser = await webdriverio.remote(this.options);
       }
     } catch (err) {
@@ -822,7 +887,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find a checkbox by providing human readable text:
+   * Find a checkbox by providing human-readable text:
    *
    * ```js
    * this.helpers['WebDriver']._locateCheckable('I agree with terms and conditions').then // ...
@@ -835,7 +900,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find a clickable element by providing human readable text:
+   * Find a clickable element by providing human-readable text:
    *
    * ```js
    * const els = await this.helpers.WebDriver._locateClickable('Next page');
@@ -850,7 +915,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find field elements by providing human readable text:
+   * Find field elements by providing human-readable text:
    *
    * ```js
    * this.helpers['WebDriver']._locateFields('Your email').then // ...
@@ -862,6 +927,14 @@ class WebDriver extends Helper {
     return findFields.call(this, locator).then(res => res);
   }
 
+  /**
+   * {{> grabWebElements }}
+   *
+   */
+  async grabWebElements(locator) {
+    return this._locate(locator);
+  }
+
   /**
    * Set [WebDriver timeouts](https://webdriver.io/docs/timeouts.html) in realtime.
    *
@@ -914,6 +987,7 @@ class WebDriver extends Helper {
       assertElementExists(res, locator, 'Clickable element');
     }
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
     return this.browser[clickMethod](getElementId(elem));
   }
 
@@ -932,6 +1006,7 @@ class WebDriver extends Helper {
       assertElementExists(res, locator, 'Clickable element');
     }
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
 
     return this.executeScript((el) => {
       if (document.activeElement instanceof HTMLElement) {
@@ -959,6 +1034,7 @@ class WebDriver extends Helper {
     }
 
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
     return elem.doubleClick();
   }
 
@@ -1024,7 +1100,9 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
-    return elem.setValue(value.toString());
+    highlightActiveElement.call(this, elem);
+    await elem.clearValue();
+    await elem.setValue(value.toString());
   }
 
   /**
@@ -1035,7 +1113,12 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
-    return elem.addValue(value);
+    highlightActiveElement.call(this, elem);
+    if (this.options.automationProtocol) {
+      const curentValue = await elem.getValue();
+      return elem.setValue(curentValue + value.toString());
+    }
+    return elem.addValue(value.toString());
   }
 
   /**
@@ -1046,6 +1129,10 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
+    if (this.options.automationProtocol) {
+      return elem.setValue('');
+    }
     return elem.clearValue(getElementId(elem));
   }
 
@@ -1056,6 +1143,7 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, select);
     assertElementExists(res, select, 'Selectable field');
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
 
     if (!Array.isArray(option)) {
       option = [option];
@@ -1082,8 +1170,9 @@ class WebDriver extends Helper {
   }
 
   /**
-   * {{> attachFile }}
    * Appium: not tested
+   *
+   * {{> attachFile }}
    */
   async attachFile(locator, pathToFile) {
     let file = path.join(global.codecept_dir, pathToFile);
@@ -1097,7 +1186,7 @@ class WebDriver extends Helper {
     const el = usingFirstElement(res);
 
     // Remote Upload (when running Selenium Server)
-    if (this.options.remoteFileUpload) {
+    if (this.options.remoteFileUpload && !this.options.automationProtocol) {
       try {
         this.debugSection('File', 'Uploading file to remote server');
         file = await this.browser.uploadFile(file);
@@ -1110,8 +1199,8 @@ class WebDriver extends Helper {
   }
 
   /**
-   * {{> checkOption }}
    * Appium: not tested
+   * {{> checkOption }}
    */
   async checkOption(field, context = null) {
     const clickMethod = this.browser.isMobile && !this.browser.isW3C ? 'touchClick' : 'elementClick';
@@ -1122,6 +1211,7 @@ class WebDriver extends Helper {
     assertElementExists(res, field, 'Checkable');
     const elem = usingFirstElement(res);
     const elementId = getElementId(elem);
+    highlightActiveElement.call(this, elem);
 
     const isSelected = await this.browser.isElementSelected(elementId);
     if (isSelected) return Promise.resolve(true);
@@ -1129,8 +1219,8 @@ class WebDriver extends Helper {
   }
 
   /**
-   * {{> uncheckOption }}
    * Appium: not tested
+   * {{> uncheckOption }}
    */
   async uncheckOption(field, context = null) {
     const clickMethod = this.browser.isMobile && !this.browser.isW3C ? 'touchClick' : 'elementClick';
@@ -1141,6 +1231,7 @@ class WebDriver extends Helper {
     assertElementExists(res, field, 'Checkable');
     const elem = usingFirstElement(res);
     const elementId = getElementId(elem);
+    highlightActiveElement.call(this, elem);
 
     const isSelected = await this.browser.isElementSelected(elementId);
     if (!isSelected) return Promise.resolve(true);
@@ -1332,7 +1423,8 @@ class WebDriver extends Helper {
    *
    */
   async seeInField(field, value) {
-    return proceedSeeField.call(this, 'assert', field, value);
+    const _value = (typeof value === 'boolean') ? value : value.toString();
+    return proceedSeeField.call(this, 'assert', field, _value);
   }
 
   /**
@@ -1340,20 +1432,21 @@ class WebDriver extends Helper {
    *
    */
   async dontSeeInField(field, value) {
-    return proceedSeeField.call(this, 'negate', field, value);
+    const _value = (typeof value === 'boolean') ? value : value.toString();
+    return proceedSeeField.call(this, 'negate', field, _value);
   }
 
   /**
-   * {{> seeCheckboxIsChecked }}
    * Appium: not tested
+   * {{> seeCheckboxIsChecked }}
    */
   async seeCheckboxIsChecked(field) {
     return proceedSeeCheckbox.call(this, 'assert', field);
   }
 
   /**
-   * {{> dontSeeCheckboxIsChecked }}
    * Appium: not tested
+   * {{> dontSeeCheckboxIsChecked }}
    */
   async dontSeeCheckboxIsChecked(field) {
     return proceedSeeCheckbox.call(this, 'negate', field);
@@ -1471,33 +1564,33 @@ class WebDriver extends Helper {
   async seeCssPropertiesOnElements(locator, cssProperties) {
     const res = await this._locate(locator);
     assertElementExists(res, locator);
+
+    const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
     const elemAmount = res.length;
+    let props = [];
 
-    let props = await forEachAsync(res, async (el) => {
-      return forEachAsync(Object.keys(cssProperties), async (prop) => {
-        const propValue = await this.browser.getElementCSSValue(getElementId(el), prop);
-        if (isColorProperty(prop) && propValue && propValue.value) {
-          return convertColorToRGBA(propValue.value);
+    for (const element of res) {
+      for (const prop of Object.keys(cssProperties)) {
+        const cssProp = await this.grabCssPropertyFrom(locator, prop);
+        if (isColorProperty(prop)) {
+          props.push(convertColorToRGBA(cssProp));
+        } else {
+          props.push(cssProp);
         }
-        return propValue;
-      });
-    });
-
-    const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
+      }
+    }
 
     const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]);
     if (!Array.isArray(props)) props = [props];
     let chunked = chunkArray(props, values.length);
     chunked = chunked.filter((val) => {
       for (let i = 0; i < val.length; ++i) {
-        if (val[i] !== values[i]) return false;
+        // eslint-disable-next-line eqeqeq
+        if (val[i] != values[i]) return false;
       }
       return true;
     });
-    return assert.ok(
-      chunked.length === elemAmount,
-      `expected all elements (${(new Locator(locator))}) to have CSS property ${JSON.stringify(cssProperties)}`,
-    );
+    return equals(`all elements (${(new Locator(locator))}) to have CSS property ${JSON.stringify(cssProperties)}`).assert(chunked.length, elemAmount);
   }
 
   /**
@@ -1517,7 +1610,9 @@ class WebDriver extends Helper {
     let chunked = chunkArray(attrs, values.length);
     chunked = chunked.filter((val) => {
       for (let i = 0; i < val.length; ++i) {
-        if (val[i] !== values[i]) return false;
+        const _actual = Number.isNaN(val[i]) || (typeof values[i]) === 'string' ? val[i] : Number.parseInt(val[i], 10);
+        const _expected = Number.isNaN(values[i]) || (typeof values[i]) === 'string' ? values[i] : Number.parseInt(values[i], 10);
+        if (_actual !== _expected) return false;
       }
       return true;
     });
@@ -1576,10 +1671,9 @@ class WebDriver extends Helper {
   }
 
   /**
-   * {{> executeScript }}
-   *
-   *
    * Wraps [execute](http://webdriver.io/api/protocol/execute.html) command.
+   *
+   * {{> executeScript }}
    */
   executeScript(...args) {
     return this.browser.execute.apply(this.browser, args);
@@ -1642,7 +1736,11 @@ class WebDriver extends Helper {
     const res = await this._locate(withStrictLocator(locator), true);
     assertElementExists(res, locator);
     const elem = usingFirstElement(res);
-    return elem.moveTo({ xOffset, yOffset });
+    try {
+      await elem.moveTo({ xOffset, yOffset });
+    } catch (e) {
+      debug(e.message);
+    }
   }
 
   /**
@@ -1701,11 +1799,8 @@ class WebDriver extends Helper {
   }
 
   /**
+   * Uses Selenium's JSON [cookie format](https://code.google.com/p/selenium/wiki/JsonWireProtocol#Cookie_JSON_Object).
    * {{> setCookie }}
-   *
-   *
-   * Uses Selenium's JSON [cookie
-   * format](https://code.google.com/p/selenium/wiki/JsonWireProtocol#Cookie_JSON_Object).
    */
   async setCookie(cookie) {
     return this.browser.setCookies(cookie);
@@ -1758,7 +1853,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Dismisses the active JavaScript popup, as created by window.alert|window.confirm|window.prompt.
+   * Dismisses the active JavaScript popup, as created by `window.alert|window.confirm|window.prompt`.
    *
    */
   async cancelPopup() {
@@ -1832,9 +1927,9 @@ class WebDriver extends Helper {
   }
 
   /**
-   * {{> pressKeyWithKeyNormalization }}
-   *
    * _Note:_ In case a text field or textarea is focused be aware that some browsers do not respect active modifier when combining modifier keys with other keys.
+   *
+   * {{> pressKeyWithKeyNormalization }}
    */
   async pressKey(key) {
     const modifiers = [];
@@ -1879,6 +1974,7 @@ class WebDriver extends Helper {
    */
   async type(keys, delay = null) {
     if (!Array.isArray(keys)) {
+      keys = keys.toString();
       keys = keys.split('');
     }
     if (delay) {
@@ -1892,11 +1988,12 @@ class WebDriver extends Helper {
   }
 
   /**
-   * {{> resizeWindow }}
    * Appium: not tested in web, in apps doesn't work
+   *
+   * {{> resizeWindow }}
    */
   async resizeWindow(width, height) {
-    return this._resizeBrowserWindow(this.browser, width, height);
+    return this.browser.setWindowSize(width, height);
   }
 
   async _resizeBrowserWindow(browser, width, height) {
@@ -1921,8 +2018,32 @@ class WebDriver extends Helper {
   }
 
   /**
-   * {{> dragAndDrop }}
+   * {{> focus }}
+   *
+   */
+  async focus(locator) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator, 'Element to focus');
+    const el = usingFirstElement(els);
+
+    await focusElement(el, this.browser);
+  }
+
+  /**
+   * {{> blur }}
+   *
+   */
+  async blur(locator) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator, 'Element to blur');
+    const el = usingFirstElement(els);
+
+    await blurElement(el, this.browser);
+  }
+
+  /**
    * Appium: not tested
+   * {{> dragAndDrop }}
    */
   async dragAndDrop(srcElement, destElement) {
     let sourceEl = await this._locate(srcElement);
@@ -2022,7 +2143,9 @@ class WebDriver extends Helper {
    * {{> wait }}
    */
   async wait(sec) {
-    return new Promise(resolve => setTimeout(resolve, sec * 1000));
+    return new Promise(resolve => {
+      setTimeout(resolve, sec * 1000);
+    });
   }
 
   /**
@@ -2127,20 +2250,18 @@ class WebDriver extends Helper {
     const aSec = sec || this.options.waitForTimeoutInSeconds;
     const _context = context || this.root;
 
-    return this.browser.waitUntil(
-      async () => {
-        const res = await this.$$(withStrictLocator.call(this, _context));
-        if (!res || res.length === 0) return false;
-        const selected = await forEachAsync(res, async el => this.browser.getElementText(getElementId(el)));
-        if (Array.isArray(selected)) {
-          return selected.filter(part => part.indexOf(text) >= 0).length > 0;
-        }
-        return selected.indexOf(text) >= 0;
-      }, {
-        timeout: aSec * 1000,
-        timeoutMsg: `element (${_context}) is not in DOM or there is no element(${_context}) with text "${text}" after ${aSec} sec`,
-      },
-    );
+    return this.browser.waitUntil(async () => {
+      const res = await this.$$(withStrictLocator.call(this, _context));
+      if (!res || res.length === 0) return false;
+      const selected = await forEachAsync(res, async el => this.browser.getElementText(getElementId(el)));
+      if (Array.isArray(selected)) {
+        return selected.filter(part => part.indexOf(text) >= 0).length > 0;
+      }
+      return selected.indexOf(text) >= 0;
+    }, {
+      timeout: aSec * 1000,
+      timeoutMsg: `element (${_context}) is not in DOM or there is no element(${_context}) with text "${text}" after ${aSec} sec`,
+    });
   }
 
   /**
@@ -2150,20 +2271,18 @@ class WebDriver extends Helper {
     const client = this.browser;
     const aSec = sec || this.options.waitForTimeoutInSeconds;
 
-    return client.waitUntil(
-      async () => {
-        const res = await findFields.call(this, field);
-        if (!res || res.length === 0) return false;
-        const selected = await forEachAsync(res, async el => el.getValue());
-        if (Array.isArray(selected)) {
-          return selected.filter(part => part.indexOf(value) >= 0).length > 0;
-        }
-        return selected.indexOf(value) >= 0;
-      }, {
-        timeout: aSec * 1000,
-        timeoutMsg: `element (${field}) is not in DOM or there is no element(${field}) with value "${value}" after ${aSec} sec`,
-      },
-    );
+    return client.waitUntil(async () => {
+      const res = await findFields.call(this, field);
+      if (!res || res.length === 0) return false;
+      const selected = await forEachAsync(res, async el => el.getValue());
+      if (Array.isArray(selected)) {
+        return selected.filter(part => part.indexOf(value) >= 0).length > 0;
+      }
+      return selected.indexOf(value) >= 0;
+    }, {
+      timeout: aSec * 1000,
+      timeoutMsg: `element (${field}) is not in DOM or there is no element(${field}) with value "${value}" after ${aSec} sec`,
+    });
   }
 
   /**
@@ -2255,12 +2374,33 @@ class WebDriver extends Helper {
     return this.browser.waitUntil(async () => this.browser.execute(fn, ...args), { timeout: aSec * 1000, timeoutMsg: '' });
   }
 
+  /**
+   * {{> waitForNumberOfTabs }}
+   */
+  async waitForNumberOfTabs(expectedTabs, sec) {
+    const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeoutInSeconds;
+    let currentTabs;
+    let count = 0;
+
+    do {
+      currentTabs = await this.grabNumberOfOpenTabs();
+      await this.wait(1);
+      count += 1000;
+      if (currentTabs >= expectedTabs) return;
+    } while (count <= waitTimeout);
+
+    throw new Error(`Expected ${expectedTabs} tabs are not met after ${waitTimeout / 1000} sec.`);
+  }
+
   /**
    * {{> switchTo }}
    */
   async switchTo(locator) {
     this.browser.isInsideFrame = true;
     if (Number.isInteger(locator)) {
+      if (this.options.automationProtocol) {
+        return this.browser.switchToFrame(locator + 1);
+      }
       return this.browser.switchToFrame(locator);
     }
     if (!locator) {
@@ -2371,8 +2511,11 @@ class WebDriver extends Helper {
       const body = document.body;
       const html = document.documentElement;
       window.scrollTo(0, Math.max(
-        body.scrollHeight, body.offsetHeight,
-        html.clientHeight, html.scrollHeight, html.offsetHeight
+        body.scrollHeight,
+        body.offsetHeight,
+        html.clientHeight,
+        html.scrollHeight,
+        html.offsetHeight
       ));
     });
     /* eslint-enable */
@@ -2394,21 +2537,41 @@ class WebDriver extends Helper {
   }
 
   /**
+   * This method is **deprecated**.
+   *
+   *
    * {{> setGeoLocation }}
    */
-  async setGeoLocation(latitude, longitude, altitude = null) {
-    if (altitude) {
-      return this.browser.setGeoLocation({ latitude, longitude });
+  async setGeoLocation(latitude, longitude) {
+    if (!this.options.automationProtocol) {
+      console.log(`setGeoLocation deprecated:
+    * This command is deprecated due to using deprecated JSON Wire Protocol command. More info: https://webdriver.io/docs/api/jsonwp/#setgeolocation
+    * Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration`);
+      return;
     }
-    return this.browser.setGeoLocation({ latitude, longitude, altitude });
+    this.geoLocation = { latitude, longitude };
+    const puppeteerBrowser = await this.browser.getPuppeteer();
+    await this.browser.call(async () => {
+      const pages = await puppeteerBrowser.pages();
+      await pages[0].setGeolocation({ latitude, longitude });
+    });
   }
 
   /**
+   * This method is **deprecated**.
+   *
    * {{> grabGeoLocation }}
    *
    */
   async grabGeoLocation() {
-    return this.browser.getGeoLocation();
+    if (!this.options.automationProtocol) {
+      console.log(`grabGeoLocation deprecated:
+    * This command is deprecated due to using deprecated JSON Wire Protocol command. More info: https://webdriver.io/docs/api/jsonwp/#getgeolocation
+    * Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration`);
+      return;
+    }
+    if (!this.geoLocation) return 'No GeoLocation is set!';
+    return this.geoLocation;
   }
 
   /**
@@ -2604,7 +2767,7 @@ async function proceedSeeField(assertType, field, value) {
     }
   };
 
-  const proceedSingle = el => this.browser.getElementAttribute(getElementId(el), 'value').then((res) => {
+  const proceedSingle = el => el.getValue().then((res) => {
     if (res === null) {
       throw new Error(`Element ${el.selector} has no value attribute`);
     }
@@ -2873,6 +3036,12 @@ function isModifierKey(key) {
   return unicodeModifierKeys.includes(key);
 }
 
+function highlightActiveElement(element) {
+  if (this.options.highlightElement && global.debugMode) {
+    highlightElement(element, this.browser);
+  }
+}
+
 function prepareLocateFn(context) {
   if (!context) return this._locate.bind(this);
   return (l) => {