codeceptjs 4.0.0-beta.3 → 4.0.0-beta.5

package/lib/helper/WebDriver.js

@@ -7,19 +7,11 @@ const Helper = require('@codeceptjs/helper')
 const promiseRetry = require('promise-retry')
 const stringIncludes = require('../assert/include').includes
 const { urlEquals, equals } = require('../assert/equal')
+const store = require('../store')
 const { debug } = require('../output')
 const { empty } = require('../assert/empty')
 const { truth } = require('../assert/truth')
-const {
-  xpathLocator,
-  fileExists,
-  decodeUrl,
-  chunkArray,
-  convertCssPropertiesToCamelCase,
-  screenshotOutputFolder,
-  getNormalizedKeyAttributeValue,
-  modifierKeys,
-} = require('../utils')
+const { xpathLocator, fileExists, decodeUrl, chunkArray, convertCssPropertiesToCamelCase, screenshotOutputFolder, getNormalizedKeyAttributeValue, modifierKeys } = require('../utils')
 const { isColorProperty, convertColorToRGBA } = require('../colorUtils')
 const ElementNotFound = require('./errors/ElementNotFound')
 const ConnectionRefused = require('./errors/ConnectionRefused')
@@ -27,22 +19,13 @@ const Locator = require('../locator')
 const { highlightElement } = require('./scripts/highlightElement')
 const { focusElement } = require('./scripts/focusElement')
 const { blurElement } = require('./scripts/blurElement')
-const {
-  dontSeeElementError,
-  seeElementError,
-  seeElementInDOMError,
-  dontSeeElementInDOMError,
-} = require('./errors/ElementAssertion')
-const {
-  dontSeeTraffic,
-  seeTraffic,
-  grabRecordedNetworkTraffics,
-  stopRecordingTraffic,
-  flushNetworkTraffics,
-} = require('./network/actions')
+const { dontSeeElementError, seeElementError, seeElementInDOMError, dontSeeElementInDOMError } = require('./errors/ElementAssertion')
+const { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } = require('./network/actions')
+const WebElement = require('../element/WebElement')
 
 const SHADOW = 'shadow'
 const webRoot = 'body'
+let browserLogs = []
 
 /**
  * ## Configuration
@@ -53,6 +36,7 @@ const webRoot = 'body'
  * @type {object}
  * @prop {string} url - base url of website to be tested.
  * @prop {string} browser - Browser in which to perform testing.
+ * @prop {boolean} [bidiProtocol=false] - WebDriver Bidi Protocol. Default: false. More info: https://webdriver.io/docs/api/webdriverBidi/
  * @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.
@@ -72,7 +56,6 @@ const webRoot = 'body'
  * @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 = {}
 
@@ -180,7 +163,6 @@ const config = {}
  *      WebDriver : {
  *        url: "http://localhost",
  *        browser: "chrome",
- *        devtoolsProtocol: true,
  *        desiredCapabilities: {
  *          chromeOptions: {
  *            args: [ "--headless", "--disable-gpu", "--no-sandbox" ]
@@ -508,6 +490,10 @@ class WebDriver extends Helper {
       config.capabilities = config.desiredCapabilities
     }
     config.capabilities.browserName = config.browser || config.capabilities.browserName
+
+    // WebDriver Bidi Protocol. Default: false
+    config.capabilities.webSocketUrl = config.bidiProtocol ?? config.capabilities.webSocketUrl ?? true
+
     config.capabilities.browserVersion = config.browserVersion || config.capabilities.browserVersion
     if (config.capabilities.chromeOptions) {
       config.capabilities['goog:chromeOptions'] = config.capabilities.chromeOptions
@@ -597,10 +583,7 @@ class WebDriver extends Helper {
   }
 
   async _res(locator) {
-    const res =
-      this._isShadowLocator(locator) || this._isCustomLocator(locator)
-        ? await this._locate(locator)
-        : await this.$$(withStrictLocator(locator))
+    const res = this._isShadowLocator(locator) || this._isCustomLocator(locator) ? await this._locate(locator) : await this.$$(withStrictLocator(locator))
     return res
   }
 
@@ -614,11 +597,6 @@ 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) {
@@ -638,7 +616,7 @@ class WebDriver extends Helper {
     this.$$ = this.browser.$$.bind(this.browser)
 
     if (this._isCustomLocatorStrategyDefined()) {
-      Object.keys(this.customLocatorStrategies).forEach(async (customLocator) => {
+      Object.keys(this.customLocatorStrategies).forEach(async customLocator => {
         this.debugSection('Weddriver', `adding custom locator strategy: ${customLocator}`)
         const locatorFunction = this._lookupCustomLocator(customLocator)
         this.browser.addLocatorStrategy(customLocator, locatorFunction)
@@ -649,10 +627,10 @@ class WebDriver extends Helper {
       this.browser.capabilities.platformName = this.browser.capabilities.platformName.toLowerCase()
     }
 
-    if (this.options.automationProtocol) {
-      this.puppeteerBrowser = await this.browser.getPuppeteer()
-      this.page = (await this.puppeteerBrowser.pages())[0]
-    }
+    this.browser.on('dialog', () => {})
+
+    await this.browser.sessionSubscribe({ events: ['log.entryAdded'] })
+    this.browser.on('log.entryAdded', logEvents)
 
     return this.browser
   }
@@ -679,7 +657,7 @@ class WebDriver extends Helper {
       this.isRunning = false
       return this.browser.deleteSession()
     }
-    if (this.browser.isInsideFrame) await this.browser.switchToFrame(null)
+    if (this.browser.isInsideFrame) await this.browser.switchFrame(null)
 
     if (this.options.keepBrowserState) return
 
@@ -687,10 +665,11 @@ class WebDriver extends Helper {
       this.debugSection('Session', 'cleaning cookies and localStorage')
       await this.browser.deleteCookies()
     }
-    await this.browser.execute('localStorage.clear();').catch((err) => {
+    await this.browser.execute('localStorage.clear();').catch(err => {
       if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err
     })
     await this.closeOtherTabs()
+    browserLogs = []
     return this.browser
   }
 
@@ -717,17 +696,17 @@ class WebDriver extends Helper {
 
         return browser
       },
-      stop: async (browser) => {
+      stop: async browser => {
         if (!browser) return
         return browser.deleteSession()
       },
-      loadVars: async (browser) => {
+      loadVars: async browser => {
         if (this.context !== this.root) throw new Error("Can't start session inside within block")
         this.browser = browser
         this.$$ = this.browser.$$.bind(this.browser)
         this.sessionWindows[this.activeSessionName] = browser
       },
-      restoreVars: async (session) => {
+      restoreVars: async session => {
         if (!session) {
           this.activeSessionName = ''
         }
@@ -769,7 +748,7 @@ class WebDriver extends Helper {
       this.browser.isInsideFrame = true
       if (Array.isArray(frame)) {
         // this.switchTo(null);
-        await forEachAsync(frame, async (f) => this.switchTo(f))
+        await forEachAsync(frame, async f => this.switchTo(f))
         return
       }
       await this.switchTo(frame)
@@ -847,10 +826,7 @@ class WebDriver extends Helper {
    * @param {object} locator
    */
   async _smartWait(locator) {
-    this.debugSection(
-      `SmartWait (${this.options.smartWait}ms)`,
-      `Locating ${JSON.stringify(locator)} in ${this.options.smartWait}`,
-    )
+    this.debugSection(`SmartWait (${this.options.smartWait}ms)`, `Locating ${JSON.stringify(locator)} in ${this.options.smartWait}`)
     await this.defineTimeout({ implicit: this.options.smartWait })
   }
 
@@ -925,7 +901,7 @@ class WebDriver extends Helper {
    * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
    */
   async _locateCheckable(locator) {
-    return findCheckable.call(this, locator, this.$$.bind(this)).then((res) => res)
+    return findCheckable.call(this, locator, this.$$.bind(this)).then(res => res)
   }
 
   /**
@@ -953,7 +929,7 @@ class WebDriver extends Helper {
    * @param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
    */
   async _locateFields(locator) {
-    return findFields.call(this, locator).then((res) => res)
+    return findFields.call(this, locator).then(res => res)
   }
 
   /**
@@ -961,7 +937,20 @@ class WebDriver extends Helper {
    *
    */
   async grabWebElements(locator) {
-    return this._locate(locator)
+    const elements = await this._locate(locator)
+    return elements.map(element => new WebElement(element, this))
+  }
+
+  /**
+   * {{> grabWebElement }}
+   *
+   */
+  async grabWebElement(locator) {
+    const elements = await this._locate(locator)
+    if (elements.length === 0) {
+      throw new ElementNotFound(locator, 'Element')
+    }
+    return new WebElement(elements[0], this)
   }
 
   /**
@@ -1037,7 +1026,7 @@ class WebDriver extends Helper {
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
 
-    return this.executeScript((el) => {
+    return this.executeScript(el => {
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur()
       }
@@ -1109,7 +1098,7 @@ class WebDriver extends Helper {
     }
     const elem = usingFirstElement(res)
 
-    return this.executeScript((el) => {
+    return this.executeScript(el => {
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur()
       }
@@ -1143,10 +1132,6 @@ class WebDriver extends Helper {
     assertElementExists(res, field, 'Field')
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
-    if (this.options.automationProtocol) {
-      const curentValue = await elem.getValue()
-      return elem.setValue(curentValue + value.toString())
-    }
     return elem.addValue(value.toString())
   }
 
@@ -1159,9 +1144,6 @@ class WebDriver extends Helper {
     assertElementExists(res, field, 'Field')
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
-    if (this.options.automationProtocol) {
-      return elem.setValue('')
-    }
     return elem.clearValue(getElementId(elem))
   }
 
@@ -1179,15 +1161,9 @@ class WebDriver extends Helper {
     }
 
     // select options by visible text
-    let els = await forEachAsync(option, async (opt) =>
-      this.browser.findElementsFromElement(
-        getElementId(elem),
-        'xpath',
-        Locator.select.byVisibleText(xpathLocator.literal(opt)),
-      ),
-    )
+    let els = await forEachAsync(option, async opt => this.browser.findElementsFromElement(getElementId(elem), 'xpath', Locator.select.byVisibleText(xpathLocator.literal(opt))))
 
-    const clickOptionFn = async (el) => {
+    const clickOptionFn = async el => {
       if (el[0]) el = el[0]
       const elementId = getElementId(el)
       if (elementId) return this.browser.elementClick(elementId)
@@ -1197,19 +1173,9 @@ class WebDriver extends Helper {
       return forEachAsync(els, clickOptionFn)
     }
     // select options by value
-    els = await forEachAsync(option, async (opt) =>
-      this.browser.findElementsFromElement(
-        getElementId(elem),
-        'xpath',
-        Locator.select.byValue(xpathLocator.literal(opt)),
-      ),
-    )
+    els = await forEachAsync(option, async opt => this.browser.findElementsFromElement(getElementId(elem), 'xpath', Locator.select.byValue(xpathLocator.literal(opt))))
     if (els.length === 0) {
-      throw new ElementNotFound(
-        select,
-        `Option "${option}" in`,
-        'was not found neither by a visible text nor by a value',
-      )
+      throw new ElementNotFound(select, `Option "${option}" in`, 'was not found neither by a visible text nor by a value')
     }
     return forEachAsync(els, clickOptionFn)
   }
@@ -1231,14 +1197,12 @@ class WebDriver extends Helper {
     const el = usingFirstElement(res)
 
     // Remote Upload (when running Selenium Server)
-    if (this.options.remoteFileUpload && !this.options.automationProtocol) {
+    if (this.options.remoteFileUpload) {
       try {
         this.debugSection('File', 'Uploading file to remote server')
         file = await this.browser.uploadFile(file)
       } catch (err) {
-        throw new Error(
-          `File can't be transferred to remote server. Set \`remoteFileUpload: false\` in config to upload file locally.\n${err.message}`,
-        )
+        throw new Error(`File can't be transferred to remote server. Set \`remoteFileUpload: false\` in config to upload file locally.\n${err.message}`)
       }
     }
 
@@ -1291,7 +1255,11 @@ class WebDriver extends Helper {
    */
   async grabTextFromAll(locator) {
     const res = await this._locate(locator, true)
-    const val = await forEachAsync(res, (el) => this.browser.getElementText(getElementId(el)))
+    let val = []
+    await forEachAsync(res, async el => {
+      const text = await this.browser.getElementText(getElementId(el))
+      val.push(text)
+    })
     this.debugSection('GrabText', String(val))
     return val
   }
@@ -1316,7 +1284,7 @@ class WebDriver extends Helper {
    */
   async grabHTMLFromAll(locator) {
     const elems = await this._locate(locator, true)
-    const html = await forEachAsync(elems, (elem) => elem.getHTML(false))
+    const html = await forEachAsync(elems, elem => elem.getHTML(false))
     this.debugSection('GrabHTML', String(html))
     return html
   }
@@ -1341,7 +1309,7 @@ class WebDriver extends Helper {
    */
   async grabValueFromAll(locator) {
     const res = await this._locate(locator, true)
-    const val = await forEachAsync(res, (el) => el.getValue())
+    const val = await forEachAsync(res, el => el.getValue())
     this.debugSection('GrabValue', String(val))
 
     return val
@@ -1366,7 +1334,7 @@ class WebDriver extends Helper {
    */
   async grabCssPropertyFromAll(locator, cssProperty) {
     const res = await this._locate(locator, true)
-    const val = await forEachAsync(res, async (el) => this.browser.getElementCSSValue(getElementId(el), cssProperty))
+    const val = await forEachAsync(res, async el => this.browser.getElementCSSValue(getElementId(el), cssProperty))
     this.debugSection('Grab', String(val))
     return val
   }
@@ -1390,7 +1358,7 @@ class WebDriver extends Helper {
    */
   async grabAttributeFromAll(locator, attr) {
     const res = await this._locate(locator, true)
-    const val = await forEachAsync(res, async (el) => el.getAttribute(attr))
+    const val = await forEachAsync(res, async el => el.getAttribute(attr))
     this.debugSection('GrabAttribute', String(val))
     return val
   }
@@ -1507,7 +1475,7 @@ class WebDriver extends Helper {
   async seeElement(locator) {
     const res = await this._locate(locator, true)
     assertElementExists(res, locator)
-    const selected = await forEachAsync(res, async (el) => el.isDisplayed())
+    const selected = await forEachAsync(res, async el => el.isDisplayed())
     try {
       return truth(`elements of ${new Locator(locator)}`, 'to be seen').assert(selected)
     } catch (e) {
@@ -1524,7 +1492,7 @@ class WebDriver extends Helper {
     if (!res || res.length === 0) {
       return truth(`elements of ${new Locator(locator)}`, 'to be seen').negate(false)
     }
-    const selected = await forEachAsync(res, async (el) => el.isDisplayed())
+    const selected = await forEachAsync(res, async el => el.isDisplayed())
     try {
       return truth(`elements of ${new Locator(locator)}`, 'to be seen').negate(selected)
     } catch (e) {
@@ -1579,11 +1547,7 @@ class WebDriver extends Helper {
    * {{> grabBrowserLogs }}
    */
   async grabBrowserLogs() {
-    if (this.browser.isW3C) {
-      this.debug('Logs not available in W3C specification')
-      return
-    }
-    return this.browser.getLogs('browser')
+    return browserLogs
   }
 
   /**
@@ -1609,11 +1573,7 @@ class WebDriver extends Helper {
    */
   async seeNumberOfElements(locator, num) {
     const res = await this._locate(locator)
-    return assert.equal(
-      res.length,
-      num,
-      `expected number of elements (${new Locator(locator)}) is ${num}, but found ${res.length}`,
-    )
+    return assert.equal(res.length, num, `expected number of elements (${new Locator(locator)}) is ${num}, but found ${res.length}`)
   }
 
   /**
@@ -1622,11 +1582,7 @@ class WebDriver extends Helper {
    */
   async seeNumberOfVisibleElements(locator, num) {
     const res = await this.grabNumberOfVisibleElements(locator)
-    return assert.equal(
-      res,
-      num,
-      `expected number of visible elements (${new Locator(locator)}) is ${num}, but found ${res}`,
-    )
+    return assert.equal(res, num, `expected number of visible elements (${new Locator(locator)}) is ${num}, but found ${res}`)
   }
 
   /**
@@ -1651,19 +1607,16 @@ class WebDriver extends Helper {
       }
     }
 
-    const values = Object.keys(cssPropertiesCamelCase).map((key) => cssPropertiesCamelCase[key])
+    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) => {
+    chunked = chunked.filter(val => {
       for (let i = 0; i < val.length; ++i) {
-        // eslint-disable-next-line eqeqeq
         if (val[i] != values[i]) return false
       }
       return true
     })
-    return equals(
-      `all elements (${new Locator(locator)}) to have CSS property ${JSON.stringify(cssProperties)}`,
-    ).assert(chunked.length, elemAmount)
+    return equals(`all elements (${new Locator(locator)}) to have CSS property ${JSON.stringify(cssProperties)}`).assert(chunked.length, elemAmount)
   }
 
   /**
@@ -1674,28 +1627,24 @@ class WebDriver extends Helper {
     assertElementExists(res, locator)
     const elemAmount = res.length
 
-    let attrs = await forEachAsync(res, async (el) => {
-      return forEachAsync(Object.keys(attributes), async (attr) => el.getAttribute(attr))
+    let attrs = await forEachAsync(res, async el => {
+      return forEachAsync(Object.keys(attributes), async attr => el.getAttribute(attr))
     })
 
-    const values = Object.keys(attributes).map((key) => attributes[key])
+    const values = Object.keys(attributes).map(key => attributes[key])
     if (!Array.isArray(attrs)) attrs = [attrs]
     let chunked = chunkArray(attrs, values.length)
-    chunked = chunked.filter((val) => {
+    chunked = chunked.filter(val => {
       for (let i = 0; i < val.length; ++i) {
         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)
+        const _expected = Number.isNaN(values[i]) || typeof values[i] === 'string' ? values[i] : Number.parseInt(values[i], 10)
         // the attribute could be a boolean
         if (typeof _actual === 'boolean') return _actual === _expected
         if (_actual !== _expected) return false
       }
       return true
     })
-    return assert.ok(
-      chunked.length === elemAmount,
-      `expected all elements (${new Locator(locator)}) to have attributes ${JSON.stringify(attributes)}`,
-    )
+    return assert.ok(chunked.length === elemAmount, `expected all elements (${new Locator(locator)}) to have attributes ${JSON.stringify(attributes)}`)
   }
 
   /**
@@ -1704,9 +1653,9 @@ class WebDriver extends Helper {
   async grabNumberOfVisibleElements(locator) {
     const res = await this._locate(locator)
 
-    let selected = await forEachAsync(res, async (el) => el.isDisplayed())
+    let selected = await forEachAsync(res, async el => el.isDisplayed())
     if (!Array.isArray(selected)) selected = [selected]
-    selected = selected.filter((val) => val === true)
+    selected = selected.filter(val => val === true)
     return selected.length
   }
 
@@ -1793,7 +1742,7 @@ class WebDriver extends Helper {
       if (this.browser.isMobile && !this.browser.isW3C) return this.browser.touchScroll(offsetX, offsetY, elementId)
       const location = await elem.getLocation()
       assertElementExists(location, locator, 'Failed to receive', 'location')
-      /* eslint-disable prefer-arrow-callback */
+
       return this.browser.execute(
         function (x, y) {
           return window.scrollTo(x, y)
@@ -1801,12 +1750,10 @@ class WebDriver extends Helper {
         location.x + offsetX,
         location.y + offsetY,
       )
-      /* eslint-enable */
     }
 
     if (this.browser.isMobile && !this.browser.isW3C) return this.browser.touchScroll(locator, offsetX, offsetY)
 
-    /* eslint-disable prefer-arrow-callback, comma-dangle */
     return this.browser.execute(
       function (x, y) {
         return window.scrollTo(x, y)
@@ -1814,7 +1761,6 @@ class WebDriver extends Helper {
       offsetX,
       offsetY,
     )
-    /* eslint-enable */
   }
 
   /**
@@ -1863,19 +1809,25 @@ class WebDriver extends Helper {
 
         if (browser) {
           this.debug(`Screenshot of ${sessionName} session has been saved to ${outputFile}`)
-          return browser.saveScreenshot(outputFile)
+          await browser.saveScreenshot(outputFile)
         }
       }
     }
 
     if (!fullPage) {
       this.debug(`Screenshot has been saved to ${outputFile}`)
-      return this.browser.saveScreenshot(outputFile)
+      await this.browser.saveScreenshot(outputFile)
     }
 
-    /* eslint-disable prefer-arrow-callback, comma-dangle, prefer-const */
     const originalWindowSize = await this.browser.getWindowSize()
 
+    // this case running on device, so we could not set the windowSize
+    if (this.browser.isMobile) {
+      this.debug(`Screenshot has been saved to ${outputFile}, size: ${originalWindowSize.width}x${originalWindowSize.height}`)
+      const buffer = await this.browser.saveScreenshot(outputFile)
+      return buffer
+    }
+
     let { width, height } = await this.browser
       .execute(function () {
         return {
@@ -1883,10 +1835,9 @@ class WebDriver extends Helper {
           width: document.body.scrollWidth,
         }
       })
-      .then((res) => res)
+      .then(res => res)
 
     if (height < 100) height = 500 // errors for very small height
-    /* eslint-enable */
 
     await this.browser.setWindowSize(width, height)
     this.debug(`Screenshot has been saved to ${outputFile}, size: ${width}x${height}`)
@@ -1952,7 +1903,7 @@ class WebDriver extends Helper {
 
     return promiseRetry(
       async (retry, number) => {
-        const _grabCookie = async (name) => {
+        const _grabCookie = async name => {
           const cookie = await this.browser.getCookies([name])
           if (cookie.length === 0) throw Error(`Cookie ${name} is not found after ${retries}s`)
         }
@@ -1976,11 +1927,10 @@ class WebDriver extends Helper {
    * libraries](http://jster.net/category/windows-modals-popups).
    */
   async acceptPopup() {
-    return this.browser.getAlertText().then((res) => {
-      if (res !== null) {
-        return this.browser.acceptAlert()
-      }
-    })
+    const text = await this.browser.getAlertText()
+    if (text) {
+      return await this.browser.acceptAlert()
+    }
   }
 
   /**
@@ -1988,11 +1938,10 @@ class WebDriver extends Helper {
    *
    */
   async cancelPopup() {
-    return this.browser.getAlertText().then((res) => {
-      if (res !== null) {
-        return this.browser.dismissAlert()
-      }
-    })
+    const text = await this.browser.getAlertText()
+    if (text) {
+      return await this.browser.dismissAlert()
+    }
   }
 
   /**
@@ -2002,7 +1951,7 @@ class WebDriver extends Helper {
    * @param {string} text value to check.
    */
   async seeInPopup(text) {
-    return this.browser.getAlertText().then((res) => {
+    return await this.browser.getAlertText().then(res => {
       if (res === null) {
         throw new Error('Popup is not opened')
       }
@@ -2283,9 +2232,9 @@ class WebDriver extends Helper {
   async closeOtherTabs() {
     const handles = await this.browser.getWindowHandles()
     const currentHandle = await this.browser.getWindowHandle()
-    const otherHandles = handles.filter((handle) => handle !== currentHandle)
+    const otherHandles = handles.filter(handle => handle !== currentHandle)
 
-    await forEachAsync(otherHandles, async (handle) => {
+    await forEachAsync(otherHandles, async handle => {
       await this.browser.switchToWindow(handle)
       await this.browser.closeWindow()
     })
@@ -2296,7 +2245,7 @@ class WebDriver extends Helper {
    * {{> wait }}
    */
   async wait(sec) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       setTimeout(resolve, sec * 1000)
     })
   }
@@ -2313,9 +2262,9 @@ class WebDriver extends Helper {
         if (!res || res.length === 0) {
           return false
         }
-        const selected = await forEachAsync(res, async (el) => this.browser.isElementEnabled(getElementId(el)))
+        const selected = await forEachAsync(res, async el => this.browser.isElementEnabled(getElementId(el)))
         if (Array.isArray(selected)) {
-          return selected.filter((val) => val === true).length > 0
+          return selected.filter(val => val === true).length > 0
         }
         return selected
       },
@@ -2370,14 +2319,14 @@ class WebDriver extends Helper {
     return client
       .waitUntil(
         function () {
-          return this.getUrl().then((res) => {
+          return this.getUrl().then(res => {
             currUrl = decodeUrl(res)
             return currUrl.indexOf(urlPart) > -1
           })
         },
         { timeout: aSec * 1000 },
       )
-      .catch((e) => {
+      .catch(e => {
         if (e.message.indexOf('timeout')) {
           throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`)
         }
@@ -2397,12 +2346,12 @@ class WebDriver extends Helper {
     let currUrl = ''
     return this.browser
       .waitUntil(function () {
-        return this.getUrl().then((res) => {
+        return this.getUrl().then(res => {
           currUrl = decodeUrl(res)
           return currUrl === urlPart
         })
       }, aSec * 1000)
-      .catch((e) => {
+      .catch(e => {
         if (e.message.indexOf('timeout')) {
           throw new Error(`expected url to be ${urlPart}, but found ${currUrl}`)
         }
@@ -2422,9 +2371,9 @@ class WebDriver extends Helper {
       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)))
+        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.filter(part => part.indexOf(text) >= 0).length > 0
         }
         return selected.indexOf(text) >= 0
       },
@@ -2446,9 +2395,9 @@ class WebDriver extends Helper {
       async () => {
         const res = await findFields.call(this, field)
         if (!res || res.length === 0) return false
-        const selected = await forEachAsync(res, async (el) => el.getValue())
+        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.filter(part => part.indexOf(value) >= 0).length > 0
         }
         return selected.indexOf(value) >= 0
       },
@@ -2470,9 +2419,9 @@ class WebDriver extends Helper {
       async () => {
         const res = await this._res(locator)
         if (!res || res.length === 0) return false
-        const selected = await forEachAsync(res, async (el) => el.isDisplayed())
+        const selected = await forEachAsync(res, async el => el.isDisplayed())
         if (Array.isArray(selected)) {
-          return selected.filter((val) => val === true).length > 0
+          return selected.filter(val => val === true).length > 0
         }
         return selected
       },
@@ -2493,10 +2442,10 @@ class WebDriver extends Helper {
       async () => {
         const res = await this._res(locator)
         if (!res || res.length === 0) return false
-        let selected = await forEachAsync(res, async (el) => el.isDisplayed())
+        let selected = await forEachAsync(res, async el => el.isDisplayed())
 
         if (!Array.isArray(selected)) selected = [selected]
-        selected = selected.filter((val) => val === true)
+        selected = selected.filter(val => val === true)
         return selected.length === num
       },
       {
@@ -2516,7 +2465,7 @@ class WebDriver extends Helper {
       async () => {
         const res = await this._res(locator)
         if (!res || res.length === 0) return true
-        const selected = await forEachAsync(res, async (el) => el.isDisplayed())
+        const selected = await forEachAsync(res, async el => el.isDisplayed())
         return !selected.length
       },
       { timeout: aSec * 1000, timeoutMsg: `element (${new Locator(locator)}) still visible after ${aSec} sec` },
@@ -2592,20 +2541,14 @@ class WebDriver extends Helper {
    */
   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) {
-      return this.browser.switchToFrame(null)
+      return this.browser.switchFrame(null)
     }
 
     let res = await this._locate(locator, true)
     assertElementExists(res, locator)
     res = usingFirstElement(res)
-    return this.browser.switchToFrame(res)
+    return this.browser.switchFrame(res)
   }
 
   /**
@@ -2618,7 +2561,7 @@ class WebDriver extends Helper {
 
     await this.browser.waitUntil(
       async () => {
-        await this.browser.getWindowHandles().then((handles) => {
+        await this.browser.getWindowHandles().then(handles => {
           if (handles.indexOf(current) + num + 1 <= handles.length) {
             target = handles[handles.indexOf(current) + num]
           }
@@ -2640,7 +2583,7 @@ class WebDriver extends Helper {
 
     await this.browser.waitUntil(
       async () => {
-        await this.browser.getWindowHandles().then((handles) => {
+        await this.browser.getWindowHandles().then(handles => {
           if (handles.indexOf(current) - num > -1) {
             target = handles[handles.indexOf(current) - num]
           }
@@ -2695,11 +2638,10 @@ class WebDriver extends Helper {
    */
   scrollPageToTop() {
     const client = this.browser
-    /* eslint-disable prefer-arrow-callback */
+
     return client.execute(function () {
       window.scrollTo(0, 0)
     })
-    /* eslint-enable */
   }
 
   /**
@@ -2707,69 +2649,26 @@ class WebDriver extends Helper {
    */
   scrollPageToBottom() {
     const client = this.browser
-    /* eslint-disable prefer-arrow-callback, comma-dangle */
+
     return client.execute(function () {
       const body = document.body
       const html = document.documentElement
-      window.scrollTo(
-        0,
-        Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
-      )
+      window.scrollTo(0, Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight))
     })
-    /* eslint-enable */
   }
 
   /**
    * {{> grabPageScrollPosition }}
    */
   async grabPageScrollPosition() {
-    /* eslint-disable comma-dangle */
     function getScrollPosition() {
       return {
         x: window.pageXOffset,
         y: window.pageYOffset,
       }
     }
-    /* eslint-enable comma-dangle */
-    return this.executeScript(getScrollPosition)
-  }
-
-  /**
-   * This method is **deprecated**.
-   *
-   *
-   * {{> setGeoLocation }}
-   */
-  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
-    }
-    this.geoLocation = { latitude, longitude }
-
-    await this.browser.call(async () => {
-      const pages = await this.puppeteerBrowser.pages()
-      await pages[0].setGeolocation({ latitude, longitude })
-    })
-  }
 
-  /**
-   * This method is **deprecated**.
-   *
-   * {{> grabGeoLocation }}
-   *
-   */
-  async grabGeoLocation() {
-    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
+    return this.executeScript(getScrollPosition)
   }
 
   /**
@@ -2793,7 +2692,7 @@ class WebDriver extends Helper {
    * @param {*} caps
    * @param {*} fn
    */
-  /* eslint-disable */
+
   runOnIOS(caps, fn) {}
 
   /**
@@ -2802,135 +2701,13 @@ class WebDriver extends Helper {
    * @param {*} fn
    */
   runOnAndroid(caps, fn) {}
-  /* eslint-enable */
 
   /**
    * Placeholder for ~ locator only test case write once run on both Appium and WebDriver.
    */
-  runInWeb(fn) {
+  async runInWeb(fn) {
     return fn()
   }
-
-  /**
-   *
-   * _Note:_ Only works when devtoolsProtocol is enabled.
-   *
-   * {{> flushNetworkTraffics }}
-   */
-  flushNetworkTraffics() {
-    if (!this.options.automationProtocol) {
-      console.log(
-        '* Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration',
-      )
-      return
-    }
-    this.requests = []
-  }
-
-  /**
-   *
-   * _Note:_ Only works when devtoolsProtocol is enabled.
-   *
-   * {{> stopRecordingTraffic }}
-   */
-  stopRecordingTraffic() {
-    if (!this.options.automationProtocol) {
-      console.log(
-        '* Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration',
-      )
-      return
-    }
-    this.page.removeAllListeners('request')
-    this.recording = false
-  }
-
-  /**
-   *
-   * _Note:_ Only works when devtoolsProtocol is enabled.
-   *
-   * {{> startRecordingTraffic }}
-   *
-   */
-  async startRecordingTraffic() {
-    if (!this.options.automationProtocol) {
-      console.log(
-        '* Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration',
-      )
-      return
-    }
-    this.flushNetworkTraffics()
-    this.recording = true
-    this.recordedAtLeastOnce = true
-
-    await this.page.setRequestInterception(true)
-
-    this.page.on('request', (request) => {
-      const information = {
-        url: request.url(),
-        method: request.method(),
-        requestHeaders: request.headers(),
-        requestPostData: request.postData(),
-        response: request.response(),
-      }
-
-      this.debugSection('REQUEST: ', JSON.stringify(information))
-
-      if (typeof information.requestPostData === 'object') {
-        information.requestPostData = JSON.parse(information.requestPostData)
-      }
-      request.continue()
-      this.requests.push(information)
-    })
-  }
-
-  /**
-   *
-   * _Note:_ Only works when devtoolsProtocol is enabled.
-   *
-   * {{> grabRecordedNetworkTraffics }}
-   */
-  async grabRecordedNetworkTraffics() {
-    if (!this.options.automationProtocol) {
-      console.log(
-        '* Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration',
-      )
-      return
-    }
-    return grabRecordedNetworkTraffics.call(this)
-  }
-
-  /**
-   *
-   * _Note:_ Only works when devtoolsProtocol is enabled.
-   *
-   * {{> seeTraffic }}
-   */
-  async seeTraffic({ name, url, parameters, requestPostData, timeout = 10 }) {
-    if (!this.options.automationProtocol) {
-      console.log(
-        '* Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration',
-      )
-      return
-    }
-    await seeTraffic.call(this, ...arguments)
-  }
-
-  /**
-   *
-   * _Note:_ Only works when devtoolsProtocol is enabled.
-   *
-   * {{> dontSeeTraffic }}
-   *
-   */
-  dontSeeTraffic({ name, url }) {
-    if (!this.options.automationProtocol) {
-      console.log(
-        '* Switch to devtools protocol to use this command by setting devtoolsProtocol: true in the configuration',
-      )
-      return
-    }
-    dontSeeTraffic.call(this, ...arguments)
-  }
 }
 
 async function proceedSee(assertType, text, context, strict = false) {
@@ -2950,10 +2727,17 @@ async function proceedSee(assertType, text, context, strict = false) {
   const smartWaitEnabled = assertType === 'assert'
   const res = await this._locate(withStrictLocator(context), smartWaitEnabled)
   assertElementExists(res, context)
-  const selected = await forEachAsync(res, async (el) => this.browser.getElementText(getElementId(el)))
+  let selected = await forEachAsync(res, async el => this.browser.getElementText(getElementId(el)))
+
+  // apply ignoreCase option
+  if (store?.currentStep?.opts?.ignoreCase === true) {
+    text = text.toLowerCase()
+    selected = selected.map(elText => elText.toLowerCase())
+  }
+
   if (strict) {
     if (Array.isArray(selected) && selected.length !== 0) {
-      return selected.map((elText) => equals(description)[assertType](text, elText))
+      return selected.map(elText => equals(description)[assertType](text, elText))
     }
     return equals(description)[assertType](text, selected)
   }
@@ -2981,7 +2765,7 @@ async function forEachAsync(array, callback, options = { expandArrayResults: tru
     const res = await callback(inputArray[index], index, inputArray)
 
     if (Array.isArray(res) && expandArrayResults) {
-      res.forEach((val) => values.push(val))
+      res.forEach(val => values.push(val))
     } else if (res) {
       values.push(res)
     }
@@ -3067,11 +2851,11 @@ async function proceedSeeField(assertType, field, value) {
   const elem = usingFirstElement(res)
   const elemId = getElementId(elem)
 
-  const proceedMultiple = async (fields) => {
+  const proceedMultiple = async fields => {
     const fieldResults = toArray(
-      await forEachAsync(fields, async (el) => {
+      await forEachAsync(fields, async el => {
         const elementId = getElementId(el)
-        return this.browser.isW3C ? el.getValue() : this.browser.getElementAttribute(elementId, 'value')
+        return this.browser.getElementAttribute(elementId, 'value')
       }),
     )
 
@@ -3080,27 +2864,24 @@ async function proceedSeeField(assertType, field, value) {
     } else {
       // Assert that results were found so the forEach assert does not silently pass
       equals(`no. of items matching > 0:  ${field}`)[assertType](true, !!fieldResults.length)
-      fieldResults.forEach((val) => stringIncludes(`fields by ${field}`)[assertType](value, val))
+      fieldResults.forEach(val => stringIncludes(`fields by ${field}`)[assertType](value, val))
     }
   }
 
-  const proceedSingle = (el) =>
-    el.getValue().then((res) => {
+  const proceedSingle = el =>
+    el.getValue().then(res => {
       if (res === null) {
         throw new Error(`Element ${el.selector} has no value attribute`)
       }
       stringIncludes(`fields by ${field}`)[assertType](value, res)
     })
 
-  const filterBySelected = async (elements) =>
-    filterAsync(elements, async (el) => this.browser.isElementSelected(getElementId(el)))
+  const filterBySelected = async elements => filterAsync(elements, async el => this.browser.isElementSelected(getElementId(el)))
 
   const filterSelectedByValue = async (elements, value) => {
-    return filterAsync(elements, async (el) => {
+    return filterAsync(elements, async el => {
       const elementId = getElementId(el)
-      const currentValue = this.browser.isW3C
-        ? await el.getValue()
-        : await this.browser.getElementAttribute(elementId, 'value')
+      const currentValue = await this.browser.getElementAttribute(elementId, 'value')
       const isSelected = await this.browser.isElementSelected(elementId)
       return currentValue === value && isSelected
     })
@@ -3108,7 +2889,13 @@ async function proceedSeeField(assertType, field, value) {
 
   const tag = await elem.getTagName()
   if (tag === 'select') {
-    const subOptions = await this.browser.findElementsFromElement(elemId, 'css', 'option')
+    let subOptions
+
+    try {
+      subOptions = await this.browser.findElementsFromElement(elemId, 'css', 'option')
+    } catch (e) {
+      subOptions = await this.browser.findElementsFromElement(elemId, 'xpath', 'option')
+    }
 
     if (value === '') {
       // Don't filter by value
@@ -3149,7 +2936,7 @@ async function proceedSeeCheckbox(assertType, field) {
   const res = await findFields.call(this, field)
   assertElementExists(res, field, 'Field')
 
-  const selected = await forEachAsync(res, async (el) => this.browser.isElementSelected(getElementId(el)))
+  const selected = await forEachAsync(res, async el => this.browser.isElementSelected(getElementId(el)))
   return truth(`checkable field "${field}"`, 'to be checked')[assertType](selected)
 }
 
@@ -3213,7 +3000,6 @@ function getElementId(el) {
 // List of known key values to unicode code points
 // https://www.w3.org/TR/webdriver/#keyboard-actions
 const keyUnicodeMap = {
-  /* eslint-disable quote-props */
   Unidentified: '\uE000',
   Cancel: '\uE001',
   Clear: '\uE005',
@@ -3328,7 +3114,6 @@ const keyUnicodeMap = {
   Semicolon: '\uE018', // ';' alias
   Slash: '/', // '/' alias
   ZenkakuHankaku: '\uE040',
-  /* eslint-enable quote-props */
 }
 
 function convertKeyToRawKey(key) {
@@ -3352,7 +3137,7 @@ function getNormalizedKey(key) {
   return convertKeyToRawKey(normalizedKey)
 }
 
-const unicodeModifierKeys = modifierKeys.map((k) => convertKeyToRawKey(k))
+const unicodeModifierKeys = modifierKeys.map(k => convertKeyToRawKey(k))
 function isModifierKey(key) {
   return unicodeModifierKeys.includes(key)
 }
@@ -3365,9 +3150,9 @@ function highlightActiveElement(element) {
 
 function prepareLocateFn(context) {
   if (!context) return this._locate.bind(this)
-  return (l) => {
+  return l => {
     l = new Locator(l, 'css')
-    return this._locate(context, true).then(async (res) => {
+    return this._locate(context, true).then(async res => {
       assertElementExists(res, context, 'Context element')
       if (l.react) {
         return res[0].react$$(l.react, l.props || undefined)
@@ -3377,4 +3162,8 @@ function prepareLocateFn(context) {
   }
 }
 
+function logEvents(event) {
+  browserLogs.push(event.text) // add log message to the array
+}
+
 module.exports = WebDriver