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

package/lib/helper/Puppeteer.js

@@ -36,19 +36,9 @@ const Popup = require('./extras/Popup')
 const Console = require('./extras/Console')
 const { highlightElement } = require('./scripts/highlightElement')
 const { blurElement } = require('./scripts/blurElement')
-const {
-  dontSeeElementError,
-  seeElementError,
-  dontSeeElementInDOMError,
-  seeElementInDOMError,
-} = require('./errors/ElementAssertion')
-const {
-  dontSeeTraffic,
-  seeTraffic,
-  grabRecordedNetworkTraffics,
-  stopRecordingTraffic,
-  flushNetworkTraffics,
-} = require('./network/actions')
+const { dontSeeElementError, seeElementError, dontSeeElementInDOMError, seeElementInDOMError } = require('./errors/ElementAssertion')
+const { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } = require('./network/actions')
+const WebElement = require('../element/WebElement')
 
 let puppeteer
 let perfTiming
@@ -271,9 +261,7 @@ class Puppeteer extends Helper {
   }
 
   _getOptions(config) {
-    return config.browser === 'firefox'
-      ? Object.assign(this.options.firefox, { product: 'firefox' })
-      : this.options.chrome
+    return config.browser === 'firefox' ? Object.assign(this.options.firefox, { product: 'firefox' }) : this.options.chrome
   }
 
   _setConfig(config) {
@@ -325,8 +313,8 @@ class Puppeteer extends Helper {
     this.sessionPages = {}
     this.currentRunningTest = test
     recorder.retry({
-      retries: process.env.FAILED_STEP_RETRIES || 3,
-      when: (err) => {
+      retries: test?.opts?.conditionalRetries || 3,
+      when: err => {
         if (!err || typeof err.message !== 'string') {
           return false
         }
@@ -346,7 +334,7 @@ class Puppeteer extends Helper {
     const contexts = this.browser.browserContexts()
     const defaultCtx = contexts.shift()
 
-    await Promise.all(contexts.map((c) => c.close()))
+    await Promise.all(contexts.map(c => c.close()))
 
     if (this.options.restart) {
       this.isRunning = false
@@ -355,7 +343,7 @@ class Puppeteer extends Helper {
 
     // ensure this.page is from default context
     if (this.page) {
-      const existingPages = defaultCtx.targets().filter((t) => t.type() === 'page')
+      const existingPages = defaultCtx.targets().filter(t => t.type() === 'page')
       await this._setPage(await existingPages[0].page())
     }
 
@@ -368,10 +356,10 @@ class Puppeteer extends Helper {
     const currentUrl = await this.grabCurrentUrl()
 
     if (currentUrl.startsWith('http')) {
-      await this.executeScript('localStorage.clear();').catch((err) => {
+      await this.executeScript('localStorage.clear();').catch(err => {
         if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err
       })
-      await this.executeScript('sessionStorage.clear();').catch((err) => {
+      await this.executeScript('sessionStorage.clear();').catch(err => {
         if (!(err.message.indexOf("Storage is disabled inside 'data:' URLs.") > -1)) throw err
       })
     }
@@ -400,12 +388,12 @@ class Puppeteer extends Helper {
       stop: async () => {
         // is closed by _after
       },
-      loadVars: async (context) => {
-        const existingPages = context.targets().filter((t) => t.type() === 'page')
+      loadVars: async context => {
+        const existingPages = context.targets().filter(t => t.type() === 'page')
         this.sessionPages[this.activeSessionName] = await existingPages[0].page()
         return this._setPage(this.sessionPages[this.activeSessionName])
       },
-      restoreVars: async (session) => {
+      restoreVars: async session => {
         this.withinLocator = null
 
         if (!session) {
@@ -414,7 +402,7 @@ class Puppeteer extends Helper {
           this.activeSessionName = session
         }
         const defaultCtx = this.browser.defaultBrowserContext()
-        const existingPages = defaultCtx.targets().filter((t) => t.type() === 'page')
+        const existingPages = defaultCtx.targets().filter(t => t.type() === 'page')
         await this._setPage(await existingPages[0].page())
 
         return this._waitForAction()
@@ -517,7 +505,7 @@ class Puppeteer extends Helper {
     if (!page) {
       return
     }
-    page.on('error', async (error) => {
+    page.on('error', async error => {
       console.error('Puppeteer page error', error)
     })
   }
@@ -533,7 +521,7 @@ class Puppeteer extends Helper {
     if (!page) {
       return
     }
-    page.on('dialog', async (dialog) => {
+    page.on('dialog', async dialog => {
       popupStore.popup = dialog
       const action = popupStore.actionType || this.options.defaultPopupAction
       await this._waitForAction()
@@ -588,15 +576,15 @@ class Puppeteer extends Helper {
       this.browser = await puppeteer.launch(this.puppeteerOptions)
     }
 
-    this.browser.on('targetcreated', (target) =>
+    this.browser.on('targetcreated', target =>
       target
         .page()
-        .then((page) => targetCreatedHandler.call(this, page))
-        .catch((e) => {
+        .then(page => targetCreatedHandler.call(this, page))
+        .catch(e => {
           console.error('Puppeteer page error', e)
         }),
     )
-    this.browser.on('targetchanged', (target) => {
+    this.browser.on('targetchanged', target => {
       this.debugSection('Url', target.url())
     })
 
@@ -639,18 +627,18 @@ class Puppeteer extends Helper {
 
     if (frame) {
       if (Array.isArray(frame)) {
-        return this.switchTo(null).then(() =>
-          frame.reduce((p, frameLocator) => p.then(() => this.switchTo(frameLocator)), Promise.resolve()),
-        )
+        return this.switchTo(null).then(() => frame.reduce((p, frameLocator) => p.then(() => this.switchTo(frameLocator)), Promise.resolve()))
       }
       await this.switchTo(frame)
       this.withinLocator = new Locator(frame)
       return
     }
 
-    const els = await this._locate(locator)
-    assertElementExists(els, locator)
-    this.context = els[0]
+    const el = await this._locateElement(locator)
+    if (!el) {
+      throw new ElementNotFound(locator, 'Element for within context')
+    }
+    this.context = el
 
     this.withinLocator = new Locator(locator)
   }
@@ -664,7 +652,7 @@ class Puppeteer extends Helper {
     const navigationStart = timing.navigationStart
 
     const extractedData = {}
-    dataNames.forEach((name) => {
+    dataNames.forEach(name => {
       extractedData[name] = timing[name] - navigationStart
     })
 
@@ -698,13 +686,7 @@ class Puppeteer extends Helper {
 
     const performanceTiming = JSON.parse(await this.page.evaluate(() => JSON.stringify(window.performance.timing)))
 
-    perfTiming = this._extractDataFromPerformanceTiming(
-      performanceTiming,
-      'responseEnd',
-      'domInteractive',
-      'domContentLoadedEventEnd',
-      'loadEventEnd',
-    )
+    perfTiming = this._extractDataFromPerformanceTiming(performanceTiming, 'responseEnd', 'domInteractive', 'domContentLoadedEventEnd', 'loadEventEnd')
 
     return this._waitForAction()
   }
@@ -750,11 +732,13 @@ class Puppeteer extends Helper {
    * {{ react }}
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
-    const els = await this._locate(locator)
-    assertElementExists(els, locator)
+    const el = await this._locateElement(locator)
+    if (!el) {
+      throw new ElementNotFound(locator, 'Element to move cursor to')
+    }
 
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
-    const { x, y } = await getClickablePoint(els[0])
+    const { x, y } = await getClickablePoint(el)
     await this.page.mouse.move(x + offsetX, y + offsetY)
     return this._waitForAction()
   }
@@ -764,9 +748,10 @@ class Puppeteer extends Helper {
    *
    */
   async focus(locator) {
-    const els = await this._locate(locator)
-    assertElementExists(els, locator, 'Element to focus')
-    const el = els[0]
+    const el = await this._locateElement(locator)
+    if (!el) {
+      throw new ElementNotFound(locator, 'Element to focus')
+    }
 
     await el.click()
     await el.focus()
@@ -778,10 +763,12 @@ class Puppeteer extends Helper {
    *
    */
   async blur(locator) {
-    const els = await this._locate(locator)
-    assertElementExists(els, locator, 'Element to blur')
+    const el = await this._locateElement(locator)
+    if (!el) {
+      throw new ElementNotFound(locator, 'Element to blur')
+    }
 
-    await blurElement(els[0], this.page)
+    await blurElement(el, this.page)
     return this._waitForAction()
   }
 
@@ -815,10 +802,7 @@ class Puppeteer extends Helper {
     return this.executeScript(() => {
       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))
     })
   }
 
@@ -833,16 +817,13 @@ class Puppeteer extends Helper {
     }
 
     if (locator) {
-      const els = await this._locate(locator)
-      assertElementExists(els, locator, 'Element')
-      const el = els[0]
-      await el.evaluate((el) => el.scrollIntoView())
-      const elementCoordinates = await getClickablePoint(els[0])
-      await this.executeScript(
-        (x, y) => window.scrollBy(x, y),
-        elementCoordinates.x + offsetX,
-        elementCoordinates.y + offsetY,
-      )
+      const el = await this._locateElement(locator)
+      if (!el) {
+        throw new ElementNotFound(locator, 'Element to scroll into view')
+      }
+      await el.evaluate(el => el.scrollIntoView())
+      const elementCoordinates = await getClickablePoint(el)
+      await this.executeScript((x, y) => window.scrollBy(x, y), elementCoordinates.x + offsetX, elementCoordinates.y + offsetY)
     } else {
       await this.executeScript((x, y) => window.scrollTo(x, y), offsetX, offsetY)
     }
@@ -861,14 +842,13 @@ class Puppeteer extends Helper {
    * {{> grabPageScrollPosition }}
    */
   async grabPageScrollPosition() {
-    /* eslint-disable comma-dangle */
     function getScrollPosition() {
       return {
         x: window.pageXOffset,
         y: window.pageYOffset,
       }
     }
-    /* eslint-enable comma-dangle */
+
     return this.executeScript(getScrollPosition)
   }
 
@@ -910,6 +890,21 @@ class Puppeteer extends Helper {
     return findElements.call(this, context, locator)
   }
 
+  /**
+   * Get single element by different locator types, including strict locator
+   * Should be used in custom helpers:
+   *
+   * ```js
+   * const element = await this.helpers['Puppeteer']._locateElement({name: 'password'});
+   * ```
+   *
+   * {{ react }}
+   */
+  async _locateElement(locator) {
+    const context = await this.context
+    return findElement.call(this, context, locator)
+  }
+
   /**
    * Find a checkbox by providing human-readable text:
    * NOTE: Assumes the checkable element exists
@@ -921,7 +916,9 @@ class Puppeteer extends Helper {
   async _locateCheckable(locator, providedContext = null) {
     const context = providedContext || (await this._getContext())
     const els = await findCheckable.call(this, locator, context)
-    assertElementExists(els[0], locator, 'Checkbox or radio')
+    if (!els || els.length === 0) {
+      throw new ElementNotFound(locator, 'Checkbox or radio')
+    }
     return els[0]
   }
 
@@ -953,7 +950,20 @@ class Puppeteer 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)
   }
 
   /**
@@ -1026,10 +1036,10 @@ class Puppeteer extends Helper {
    */
   async closeOtherTabs() {
     const pages = await this.browser.pages()
-    const otherPages = pages.filter((page) => page !== this.page)
+    const otherPages = pages.filter(page => page !== this.page)
 
     let p = Promise.resolve()
-    otherPages.forEach((page) => {
+    otherPages.forEach(page => {
       p = p.then(() => page.close())
     })
     await p
@@ -1062,19 +1072,11 @@ class Puppeteer extends Helper {
    */
   async seeElement(locator) {
     let els = await this._locate(locator)
-    els = (await Promise.all(els.map((el) => el.boundingBox() && el))).filter((v) => v)
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v)
     // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-    els = await Promise.all(
-      els.map(
-        async (el) =>
-          (await el.evaluate(
-            (node) =>
-              window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none',
-          )) && el,
-      ),
-    )
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el))
     try {
-      return empty('visible elements').negate(els.filter((v) => v).fill('ELEMENT'))
+      return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       dontSeeElementError(locator)
     }
@@ -1086,19 +1088,11 @@ class Puppeteer extends Helper {
    */
   async dontSeeElement(locator) {
     let els = await this._locate(locator)
-    els = (await Promise.all(els.map((el) => el.boundingBox() && el))).filter((v) => v)
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v)
     // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-    els = await Promise.all(
-      els.map(
-        async (el) =>
-          (await el.evaluate(
-            (node) =>
-              window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none',
-          )) && el,
-      ),
-    )
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el))
     try {
-      return empty('visible elements').assert(els.filter((v) => v).fill('ELEMENT'))
+      return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       seeElementError(locator)
     }
@@ -1110,7 +1104,7 @@ class Puppeteer extends Helper {
   async seeElementInDOM(locator) {
     const els = await this._locate(locator)
     try {
-      return empty('elements on page').negate(els.filter((v) => v).fill('ELEMENT'))
+      return empty('elements on page').negate(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       dontSeeElementInDOMError(locator)
     }
@@ -1122,7 +1116,7 @@ class Puppeteer extends Helper {
   async dontSeeElementInDOM(locator) {
     const els = await this._locate(locator)
     try {
-      return empty('elements on a page').assert(els.filter((v) => v).fill('ELEMENT'))
+      return empty('elements on a page').assert(els.filter(v => v).fill('ELEMENT'))
     } catch (e) {
       seeElementInDOMError(locator)
     }
@@ -1152,17 +1146,12 @@ class Puppeteer extends Helper {
 
     const els = await findClickable.call(this, matcher, locator)
     if (context) {
-      assertElementExists(
-        els,
-        locator,
-        'Clickable element',
-        `was not found inside element ${new Locator(context).toString()}`,
-      )
+      assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`)
     } else {
       assertElementExists(els, locator, 'Clickable element')
     }
     const elem = els[0]
-    return this.executeScript((el) => {
+    return this.executeScript(el => {
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur()
       }
@@ -1221,8 +1210,8 @@ class Puppeteer extends Helper {
     let fileName
     await this.page.setRequestInterception(true)
 
-    const xRequest = await new Promise((resolve) => {
-      this.page.on('request', (request) => {
+    const xRequest = await new Promise(resolve => {
+      this.page.on('request', request => {
         console.log('rq', request, customName)
         const grabbedFileName = request.url().split('/')[request.url().split('/').length - 1]
         const fileExtension = request.url().split('/')[request.url().split('/').length - 1].split('.')[1]
@@ -1249,7 +1238,7 @@ class Puppeteer extends Helper {
     }
 
     const cookies = await this.page.cookies()
-    options.headers.Cookie = cookies.map((ck) => `${ck.name}=${ck.value}`).join(';')
+    options.headers.Cookie = cookies.map(ck => `${ck.name}=${ck.value}`).join(';')
 
     const response = await axios({
       method: options.method,
@@ -1303,7 +1292,7 @@ class Puppeteer extends Helper {
    */
   async checkOption(field, context = null) {
     const elm = await this._locateCheckable(field, context)
-    const curentlyChecked = await elm.getProperty('checked').then((checkedProperty) => checkedProperty.jsonValue())
+    const curentlyChecked = await elm.getProperty('checked').then(checkedProperty => checkedProperty.jsonValue())
     // Only check if NOT currently checked
     if (!curentlyChecked) {
       await elm.click()
@@ -1316,7 +1305,7 @@ class Puppeteer extends Helper {
    */
   async uncheckOption(field, context = null) {
     const elm = await this._locateCheckable(field, context)
-    const curentlyChecked = await elm.getProperty('checked').then((checkedProperty) => checkedProperty.jsonValue())
+    const curentlyChecked = await elm.getProperty('checked').then(checkedProperty => checkedProperty.jsonValue())
     // Only uncheck if currently checked
     if (curentlyChecked) {
       await elm.click()
@@ -1409,12 +1398,12 @@ class Puppeteer extends Helper {
     const els = await findVisibleFields.call(this, field)
     assertElementExists(els, field, 'Field')
     const el = els[0]
-    const tag = await el.getProperty('tagName').then((el) => el.jsonValue())
-    const editable = await el.getProperty('contenteditable').then((el) => el.jsonValue())
+    const tag = await el.getProperty('tagName').then(el => el.jsonValue())
+    const editable = await el.getProperty('contenteditable').then(el => el.jsonValue())
     if (tag === 'INPUT' || tag === 'TEXTAREA') {
-      await this._evaluateHandeInContext((el) => (el.value = ''), el)
+      await this._evaluateHandeInContext(el => (el.value = ''), el)
     } else if (editable) {
-      await this._evaluateHandeInContext((el) => (el.innerHTML = ''), el)
+      await this._evaluateHandeInContext(el => (el.innerHTML = ''), el)
     }
 
     highlightActiveElement.call(this, el, await this._getContext())
@@ -1484,7 +1473,7 @@ class Puppeteer extends Helper {
     const els = await findVisibleFields.call(this, select)
     assertElementExists(els, select, 'Selectable field')
     const el = els[0]
-    if ((await el.getProperty('tagName').then((t) => t.jsonValue())) !== 'SELECT') {
+    if ((await el.getProperty('tagName').then(t => t.jsonValue())) !== 'SELECT') {
       throw new Error('Element is not <select>')
     }
     highlightActiveElement.call(this, els[0], await this._getContext())
@@ -1494,15 +1483,15 @@ class Puppeteer extends Helper {
       const opt = xpathLocator.literal(option[key])
       let optEl = await findElements.call(this, el, { xpath: Locator.select.byVisibleText(opt) })
       if (optEl.length) {
-        this._evaluateHandeInContext((el) => (el.selected = true), optEl[0])
+        this._evaluateHandeInContext(el => (el.selected = true), optEl[0])
         continue
       }
       optEl = await findElements.call(this, el, { xpath: Locator.select.byValue(opt) })
       if (optEl.length) {
-        this._evaluateHandeInContext((el) => (el.selected = true), optEl[0])
+        this._evaluateHandeInContext(el => (el.selected = true), optEl[0])
       }
     }
-    await this._evaluateHandeInContext((element) => {
+    await this._evaluateHandeInContext(element => {
       element.dispatchEvent(new Event('input', { bubbles: true }))
       element.dispatchEvent(new Event('change', { bubbles: true }))
     }, el)
@@ -1516,19 +1505,11 @@ class Puppeteer extends Helper {
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator)
-    els = (await Promise.all(els.map((el) => el.boundingBox() && el))).filter((v) => v)
+    els = (await Promise.all(els.map(el => el.boundingBox() && el))).filter(v => v)
     // Puppeteer visibility was ignored? | Remove when Puppeteer is fixed
-    els = await Promise.all(
-      els.map(
-        async (el) =>
-          (await el.evaluate(
-            (node) =>
-              window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none',
-          )) && el,
-      ),
-    )
+    els = await Promise.all(els.map(async el => (await el.evaluate(node => window.getComputedStyle(node).visibility !== 'hidden' && window.getComputedStyle(node).display !== 'none')) && el))
 
-    return els.filter((v) => v).length
+    return els.filter(v => v).length
   }
 
   /**
@@ -1636,9 +1617,7 @@ class Puppeteer extends Helper {
    */
   async seeNumberOfElements(locator, num) {
     const elements = await this._locate(locator)
-    return equals(
-      `expected number of elements (${new Locator(locator)}) is ${num}, but found ${elements.length}`,
-    ).assert(elements.length, num)
+    return equals(`expected number of elements (${new Locator(locator)}) is ${num}, but found ${elements.length}`).assert(elements.length, num)
   }
 
   /**
@@ -1648,10 +1627,7 @@ class Puppeteer extends Helper {
    */
   async seeNumberOfVisibleElements(locator, num) {
     const res = await this.grabNumberOfVisibleElements(locator)
-    return equals(`expected number of visible elements (${new Locator(locator)}) is ${num}, but found ${res}`).assert(
-      res,
-      num,
-    )
+    return equals(`expected number of visible elements (${new Locator(locator)}) is ${num}, but found ${res}`).assert(res, num)
   }
 
   /**
@@ -1670,7 +1646,7 @@ class Puppeteer extends Helper {
    */
   async seeCookie(name) {
     const cookies = await this.page.cookies()
-    empty(`cookie ${name} to be set`).negate(cookies.filter((c) => c.name === name))
+    empty(`cookie ${name} to be set`).negate(cookies.filter(c => c.name === name))
   }
 
   /**
@@ -1678,7 +1654,7 @@ class Puppeteer extends Helper {
    */
   async dontSeeCookie(name) {
     const cookies = await this.page.cookies()
-    empty(`cookie ${name} not to be set`).assert(cookies.filter((c) => c.name === name))
+    empty(`cookie ${name} not to be set`).assert(cookies.filter(c => c.name === name))
   }
 
   /**
@@ -1689,7 +1665,7 @@ class Puppeteer extends Helper {
   async grabCookie(name) {
     const cookies = await this.page.cookies()
     if (!name) return cookies
-    const cookie = cookies.filter((c) => c.name === name)
+    const cookie = cookies.filter(c => c.name === name)
     if (cookie[0]) return cookie[0]
   }
 
@@ -1709,9 +1685,9 @@ class Puppeteer extends Helper {
 
     return promiseRetry(
       async (retry, number) => {
-        const _grabCookie = async (name) => {
+        const _grabCookie = async name => {
           const cookies = await this.page.cookies()
-          const cookie = cookies.filter((c) => c.name === name)
+          const cookie = cookies.filter(c => c.name === name)
           if (cookie.length === 0) throw Error(`Cookie ${name} is not found after ${retries}s`)
         }
 
@@ -1736,7 +1712,7 @@ class Puppeteer extends Helper {
     if (!name) {
       return this.page.deleteCookie.apply(this.page, cookies)
     }
-    const cookie = cookies.filter((c) => c.name === name)
+    const cookie = cookies.filter(c => c.name === name)
     if (!cookie[0]) return
     return this.page.deleteCookie(cookie[0])
   }
@@ -1761,8 +1737,8 @@ class Puppeteer extends Helper {
   async executeAsyncScript(...args) {
     const asyncFn = function () {
       const args = Array.from(arguments)
-      const fn = eval(`(${args.shift()})`) // eslint-disable-line no-eval
-      return new Promise((done) => {
+      const fn = eval(`(${args.shift()})`)
+      return new Promise(done => {
         args.push(done)
         fn.apply(null, args)
       })
@@ -1829,7 +1805,7 @@ class Puppeteer extends Helper {
    */
   async grabHTMLFromAll(locator) {
     const els = await this._locate(locator)
-    const values = await Promise.all(els.map((el) => el.evaluate((element) => element.innerHTML, el)))
+    const values = await Promise.all(els.map(el => el.evaluate(element => element.innerHTML, el)))
     return values
   }
 
@@ -1852,10 +1828,8 @@ class Puppeteer extends Helper {
    */
   async grabCssPropertyFromAll(locator, cssProperty) {
     const els = await this._locate(locator)
-    const res = await Promise.all(
-      els.map((el) => el.evaluate((el) => JSON.parse(JSON.stringify(getComputedStyle(el))), el)),
-    )
-    const cssValues = res.map((props) => props[toCamelCase(cssProperty)])
+    const res = await Promise.all(els.map(el => el.evaluate(el => JSON.parse(JSON.stringify(getComputedStyle(el))), el)))
+    const cssValues = res.map(props => props[toCamelCase(cssProperty)])
 
     return cssValues
   }
@@ -1898,19 +1872,16 @@ class Puppeteer 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)
   }
 
   /**
@@ -1923,7 +1894,7 @@ class Puppeteer extends Helper {
 
     const expectedAttributes = Object.entries(attributes)
 
-    const valuesPromises = elements.map(async (element) => {
+    const valuesPromises = elements.map(async element => {
       const elementAttributes = {}
       await Promise.all(
         expectedAttributes.map(async ([attribute, expectedValue]) => {
@@ -1936,7 +1907,7 @@ class Puppeteer extends Helper {
 
     const actualAttributes = await Promise.all(valuesPromises)
 
-    const matchingElements = actualAttributes.filter((attrs) =>
+    const matchingElements = actualAttributes.filter(attrs =>
       expectedAttributes.every(([attribute, expectedValue]) => {
         const actualValue = attrs[attribute]
         if (!actualValue) return false
@@ -1948,10 +1919,7 @@ class Puppeteer extends Helper {
     const elementsCount = elements.length
     const matchingCount = matchingElements.length
 
-    return equals(`all elements (${new Locator(locator)}) to have attributes ${JSON.stringify(attributes)}`).assert(
-      matchingCount,
-      elementsCount,
-    )
+    return equals(`all elements (${new Locator(locator)}) to have attributes ${JSON.stringify(attributes)}`).assert(matchingCount, elementsCount)
   }
 
   /**
@@ -2081,7 +2049,7 @@ class Puppeteer extends Helper {
    * {{> wait }}
    */
   async wait(sec) {
-    return new Promise((done) => {
+    return new Promise(done => {
       setTimeout(done, sec * 1000)
     })
   }
@@ -2101,20 +2069,18 @@ class Puppeteer extends Helper {
         if (!els || els.length === 0) {
           return false
         }
-        return Array.prototype.filter.call(els, (el) => !el.disabled).length > 0
+        return Array.prototype.filter.call(els, el => !el.disabled).length > 0
       }
       waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value)
     } else {
       const enabledFn = function (locator, $XPath) {
-        eval($XPath) // eslint-disable-line no-eval
-        return $XPath(null, locator).filter((el) => !el.disabled).length > 0
+        eval($XPath)
+        return $XPath(null, locator).filter(el => !el.disabled).length > 0
       }
       waiter = context.waitForFunction(enabledFn, { timeout: waitTimeout }, locator.value, $XPath.toString())
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not enabled after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2133,21 +2099,19 @@ class Puppeteer extends Helper {
         if (!els || els.length === 0) {
           return false
         }
-        return Array.prototype.filter.call(els, (el) => (el.value.toString() || '').indexOf(value) !== -1).length > 0
+        return Array.prototype.filter.call(els, el => (el.value.toString() || '').indexOf(value) !== -1).length > 0
       }
       waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, value)
     } else {
       const valueFn = function (locator, $XPath, value) {
-        eval($XPath) // eslint-disable-line no-eval
-        return $XPath(null, locator).filter((el) => (el.value || '').indexOf(value) !== -1).length > 0
+        eval($XPath)
+        return $XPath(null, locator).filter(el => (el.value || '').indexOf(value) !== -1).length > 0
       }
       waiter = context.waitForFunction(valueFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), value)
     }
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       const loc = locator.toString()
-      throw new Error(
-        `element (${loc}) is not in DOM or there is no element(${loc}) with value "${value}" after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+      throw new Error(`element (${loc}) is not in DOM or there is no element(${loc}) with value "${value}" after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2166,20 +2130,18 @@ class Puppeteer extends Helper {
         if (!els || els.length === 0) {
           return false
         }
-        return Array.prototype.filter.call(els, (el) => el.offsetParent !== null).length === num
+        return Array.prototype.filter.call(els, el => el.offsetParent !== null).length === num
       }
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, num)
     } else {
       const visibleFn = function (locator, $XPath, num) {
-        eval($XPath) // eslint-disable-line no-eval
-        return $XPath(null, locator).filter((el) => el.offsetParent !== null).length === num
+        eval($XPath)
+        return $XPath(null, locator).filter(el => el.offsetParent !== null).length === num
       }
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString(), num)
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `The number of elements (${locator.toString()}) is not ${num} after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`The number of elements (${locator.toString()}) is not ${num} after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2187,14 +2149,14 @@ class Puppeteer extends Helper {
    * {{> waitForClickable }}
    */
   async waitForClickable(locator, waitTimeout) {
-    const els = await this._locate(locator)
-    assertElementExists(els, locator)
+    const el = await this._locateElement(locator)
+    if (!el) {
+      throw new ElementNotFound(locator, 'Element to wait for clickable')
+    }
 
-    return this.waitForFunction(isElementClickable, [els[0]], waitTimeout).catch(async (e) => {
+    return this.waitForFunction(isElementClickable, [el], waitTimeout).catch(async e => {
       if (/Waiting failed/i.test(e.message) || /failed: timeout/i.test(e.message)) {
-        throw new Error(
-          `element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`,
-        )
+        throw new Error(`element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`)
       } else {
         throw e
       }
@@ -2216,10 +2178,8 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout })
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not present on page after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2239,10 +2199,8 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout, visible: true })
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not visible after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2260,7 +2218,7 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout, hidden: true })
     }
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       throw new Error(`element (${locator.toString()}) still visible after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
@@ -2278,10 +2236,8 @@ class Puppeteer extends Helper {
     } else {
       waiter = _waitForElement.call(this, locator, { timeout: waitTimeout, hidden: true })
     }
-    return waiter.catch((err) => {
-      throw new Error(
-        `element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`,
-      )
+    return waiter.catch(err => {
+      throw new Error(`element (${locator.toString()}) still not hidden after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
 
@@ -2318,14 +2274,14 @@ class Puppeteer extends Helper {
 
     return this.page
       .waitForFunction(
-        (urlPart) => {
+        urlPart => {
           const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)))
           return currUrl.indexOf(urlPart) > -1
         },
         { timeout: waitTimeout },
         urlPart,
       )
-      .catch(async (e) => {
+      .catch(async e => {
         const currUrl = await this._getPageUrl() // Required because the waitForFunction can't return data.
         if (/Waiting failed:/i.test(e.message) || /failed: timeout/i.test(e.message)) {
           throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`)
@@ -2348,14 +2304,14 @@ class Puppeteer extends Helper {
 
     return this.page
       .waitForFunction(
-        (urlPart) => {
+        urlPart => {
           const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)))
           return currUrl.indexOf(urlPart) > -1
         },
         { timeout: waitTimeout },
         urlPart,
       )
-      .catch(async (e) => {
+      .catch(async e => {
         const currUrl = await this._getPageUrl() // Required because the waitForFunction can't return data.
         if (/Waiting failed/i.test(e.message) || /failed: timeout/i.test(e.message)) {
           throw new Error(`expected url to be ${urlPart}, but found ${currUrl}`)
@@ -2392,7 +2348,7 @@ class Puppeteer extends Helper {
       if (locator.isXPath()) {
         waiter = contextObject.waitForFunction(
           (locator, text, $XPath) => {
-            eval($XPath) // eslint-disable-line no-eval
+            eval($XPath)
             const el = $XPath(null, locator)
             if (!el.length) return false
             return el[0].innerText.indexOf(text) > -1
@@ -2404,14 +2360,10 @@ class Puppeteer extends Helper {
         )
       }
     } else {
-      waiter = contextObject.waitForFunction(
-        (text) => document.body && document.body.innerText.indexOf(text) > -1,
-        { timeout: waitTimeout },
-        text,
-      )
+      waiter = contextObject.waitForFunction(text => document.body && document.body.innerText.indexOf(text) > -1, { timeout: waitTimeout }, text)
     }
 
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       throw new Error(`Text "${text}" was not found on page after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
@@ -2544,12 +2496,12 @@ class Puppeteer extends Helper {
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value)
     } else {
       const visibleFn = function (locator, $XPath) {
-        eval($XPath) // eslint-disable-line no-eval
+        eval($XPath)
         return $XPath(null, locator).length === 0
       }
       waiter = context.waitForFunction(visibleFn, { timeout: waitTimeout }, locator.value, $XPath.toString())
     }
-    return waiter.catch((err) => {
+    return waiter.catch(err => {
       throw new Error(`element (${locator.toString()}) still on page after ${waitTimeout / 1000} sec\n${err.message}`)
     })
   }
@@ -2590,7 +2542,7 @@ class Puppeteer extends Helper {
   async mockRoute(url, handler) {
     await this.page.setRequestInterception(true)
 
-    this.page.on('request', (interceptedRequest) => {
+    this.page.on('request', interceptedRequest => {
       if (interceptedRequest.url().match(url)) {
         // @ts-ignore
         handler(interceptedRequest)
@@ -2615,7 +2567,7 @@ class Puppeteer extends Helper {
     this.page.off('request')
 
     // Resume normal request handling for the given URL
-    this.page.on('request', (interceptedRequest) => {
+    this.page.on('request', interceptedRequest => {
       if (interceptedRequest.url().includes(url)) {
         interceptedRequest.continue()
       } else {
@@ -2651,7 +2603,7 @@ class Puppeteer extends Helper {
 
     await this.page.setRequestInterception(true)
 
-    this.page.on('request', (request) => {
+    this.page.on('request', request => {
       const information = {
         url: request.url(),
         method: request.method(),
@@ -2712,15 +2664,15 @@ class Puppeteer extends Helper {
     await this.cdpSession.send('Network.enable')
     await this.cdpSession.send('Page.enable')
 
-    this.cdpSession.on('Network.webSocketFrameReceived', (payload) => {
+    this.cdpSession.on('Network.webSocketFrameReceived', payload => {
       this._logWebsocketMessages(this._getWebSocketLog('RECEIVED', payload))
     })
 
-    this.cdpSession.on('Network.webSocketFrameSent', (payload) => {
+    this.cdpSession.on('Network.webSocketFrameSent', payload => {
       this._logWebsocketMessages(this._getWebSocketLog('SENT', payload))
     })
 
-    this.cdpSession.on('Network.webSocketFrameError', (payload) => {
+    this.cdpSession.on('Network.webSocketFrameError', payload => {
       this._logWebsocketMessages(this._getWebSocketLog('ERROR', payload))
     })
   }
@@ -2744,9 +2696,7 @@ class Puppeteer extends Helper {
   grabWebSocketMessages() {
     if (!this.recordingWebSocketMessages) {
       if (!this.recordedWebSocketMessagesAtLeastOnce) {
-        throw new Error(
-          'Failure in test automation. You use "I.grabWebSocketMessages", but "I.startRecordingWebSocketMessages" was never called before.',
-        )
+        throw new Error('Failure in test automation. You use "I.grabWebSocketMessages", but "I.startRecordingWebSocketMessages" was never called before.')
       }
     }
     return this.webSocketMessages
@@ -2778,9 +2728,18 @@ class Puppeteer extends Helper {
 
 module.exports = Puppeteer
 
+/**
+ * Find elements using Puppeteer's native element discovery methods
+ * Note: Unlike Playwright, Puppeteer's Locator API doesn't have .all() method for multiple elements
+ * @param {Object} matcher - Puppeteer context to search within
+ * @param {Object|string} locator - Locator specification
+ * @returns {Promise<Array>} Array of ElementHandle objects
+ */
 async function findElements(matcher, locator) {
   if (locator.react) return findReactElements.call(this, locator)
   locator = new Locator(locator, 'css')
+
+  // Use proven legacy approach - Puppeteer Locator API doesn't have .all() method
   if (!locator.isXPath()) return matcher.$$(locator.simplify())
   // puppeteer version < 19.4.0 is no longer supported. This one is backward support.
   if (puppeteer.default?.defaultBrowserRevision) {
@@ -2789,6 +2748,31 @@ async function findElements(matcher, locator) {
   return matcher.$x(locator.value)
 }
 
+/**
+ * Find a single element using Puppeteer's native element discovery methods
+ * Note: Puppeteer Locator API doesn't have .first() method like Playwright
+ * @param {Object} matcher - Puppeteer context to search within
+ * @param {Object|string} locator - Locator specification
+ * @returns {Promise<Object>} Single ElementHandle object
+ */
+async function findElement(matcher, locator) {
+  if (locator.react) return findReactElements.call(this, locator)
+  locator = new Locator(locator, 'css')
+
+  // Use proven legacy approach - Puppeteer Locator API doesn't have .first() method
+  if (!locator.isXPath()) {
+    const elements = await matcher.$$(locator.simplify())
+    return elements[0]
+  }
+  // puppeteer version < 19.4.0 is no longer supported. This one is backward support.
+  if (puppeteer.default?.defaultBrowserRevision) {
+    const elements = await matcher.$$(`xpath/${locator.value}`)
+    return elements[0]
+  }
+  const elements = await matcher.$x(locator.value)
+  return elements[0]
+}
+
 async function proceedClick(locator, context = null, options = {}) {
   let matcher = await this.context
   if (context) {
@@ -2798,12 +2782,7 @@ async function proceedClick(locator, context = null, options = {}) {
   }
   const els = await findClickable.call(this, matcher, locator)
   if (context) {
-    assertElementExists(
-      els,
-      locator,
-      'Clickable element',
-      `was not found inside element ${new Locator(context).toString()}`,
-    )
+    assertElementExists(els, locator, 'Clickable element', `was not found inside element ${new Locator(context).toString()}`)
   } else {
     assertElementExists(els, locator, 'Clickable element')
   }
@@ -2855,23 +2834,25 @@ async function proceedSee(assertType, text, context, strict = false) {
       el = await this.context.$('body')
     }
 
-    allText = [await el.getProperty('innerText').then((p) => p.jsonValue())]
+    allText = [await el.getProperty('innerText').then(p => p.jsonValue())]
     description = 'web application'
   } else {
     const locator = new Locator(context, 'css')
     description = `element ${locator.toString()}`
     const els = await this._locate(locator)
     assertElementExists(els, locator.toString())
-    allText = await Promise.all(els.map((el) => el.getProperty('innerText').then((p) => p.jsonValue())))
+    allText = await Promise.all(els.map(el => el.getProperty('innerText').then(p => p.jsonValue())))
+  }
+
+  if (store?.currentStep?.opts?.ignoreCase === true) {
+    text = text.toLowerCase()
+    allText = allText.map(elText => elText.toLowerCase())
   }
 
   if (strict) {
-    return allText.map((elText) => equals(description)[assertType](text, elText))
+    return allText.map(elText => equals(description)[assertType](text, elText))
   }
-  return stringIncludes(description)[assertType](
-    normalizeSpacesInString(text),
-    normalizeSpacesInString(allText.join(' | ')),
-  )
+  return stringIncludes(description)[assertType](normalizeSpacesInString(text), normalizeSpacesInString(allText.join(' | ')))
 }
 
 async function findCheckable(locator, context) {
@@ -2901,15 +2882,15 @@ async function findCheckable(locator, context) {
 async function proceedIsChecked(assertType, option) {
   let els = await findCheckable.call(this, option)
   assertElementExists(els, option, 'Checkable')
-  els = await Promise.all(els.map((el) => el.getProperty('checked')))
-  els = await Promise.all(els.map((el) => el.jsonValue()))
+  els = await Promise.all(els.map(el => el.getProperty('checked')))
+  els = await Promise.all(els.map(el => el.jsonValue()))
   const selected = els.reduce((prev, cur) => prev || cur)
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected)
 }
 
 async function findVisibleFields(locator) {
   const els = await findFields.call(this, locator)
-  const visible = await Promise.all(els.map((el) => el.boundingBox()))
+  const visible = await Promise.all(els.map(el => el.boundingBox()))
   return els.filter((el, index) => visible[index])
 }
 
@@ -2937,15 +2918,19 @@ async function findFields(locator) {
 }
 
 async function proceedDragAndDrop(sourceLocator, destinationLocator) {
-  const src = await this._locate(sourceLocator)
-  assertElementExists(src, sourceLocator, 'Source Element')
+  const src = await this._locateElement(sourceLocator)
+  if (!src) {
+    throw new ElementNotFound(sourceLocator, 'Source Element')
+  }
 
-  const dst = await this._locate(destinationLocator)
-  assertElementExists(dst, destinationLocator, 'Destination Element')
+  const dst = await this._locateElement(destinationLocator)
+  if (!dst) {
+    throw new ElementNotFound(destinationLocator, 'Destination Element')
+  }
 
-  // Note: Using public api .getClickablePoint becaues the .BoundingBox does not take into account iframe offsets
-  const dragSource = await getClickablePoint(src[0])
-  const dragDestination = await getClickablePoint(dst[0])
+  // Note: Using public api .getClickablePoint because the .BoundingBox does not take into account iframe offsets
+  const dragSource = await getClickablePoint(src)
+  const dragDestination = await getClickablePoint(dst)
 
   // Drag start point
   await this.page.mouse.move(dragSource.x, dragSource.y, { steps: 5 })
@@ -2962,15 +2947,15 @@ async function proceedSeeInField(assertType, field, value) {
   const els = await findVisibleFields.call(this, field)
   assertElementExists(els, field, 'Field')
   const el = els[0]
-  const tag = await el.getProperty('tagName').then((el) => el.jsonValue())
-  const fieldType = await el.getProperty('type').then((el) => el.jsonValue())
+  const tag = await el.getProperty('tagName').then(el => el.jsonValue())
+  const fieldType = await el.getProperty('type').then(el => el.jsonValue())
 
-  const proceedMultiple = async (elements) => {
+  const proceedMultiple = async elements => {
     const fields = Array.isArray(elements) ? elements : [elements]
 
     const elementValues = []
     for (const element of fields) {
-      elementValues.push(await element.getProperty('value').then((el) => el.jsonValue()))
+      elementValues.push(await element.getProperty('value').then(el => el.jsonValue()))
     }
 
     if (typeof value === 'boolean') {
@@ -2979,7 +2964,7 @@ async function proceedSeeInField(assertType, field, value) {
       if (assertType === 'assert') {
         equals(`select option by ${field}`)[assertType](true, elementValues.length > 0)
       }
-      elementValues.forEach((val) => stringIncludes(`fields by ${field}`)[assertType](value, val))
+      elementValues.forEach(val => stringIncludes(`fields by ${field}`)[assertType](value, val))
     }
   }
 
@@ -3007,14 +2992,14 @@ async function proceedSeeInField(assertType, field, value) {
     }
     return proceedMultiple(els[0])
   }
-  const fieldVal = await el.getProperty('value').then((el) => el.jsonValue())
+  const fieldVal = await el.getProperty('value').then(el => el.jsonValue())
   return stringIncludes(`fields by ${field}`)[assertType](value, fieldVal)
 }
 
 async function filterFieldsByValue(elements, value, onlySelected) {
   const matches = []
   for (const element of elements) {
-    const val = await element.getProperty('value').then((el) => el.jsonValue())
+    const val = await element.getProperty('value').then(el => el.jsonValue())
     let isSelected = true
     if (onlySelected) {
       isSelected = await elementSelected(element)
@@ -3038,12 +3023,12 @@ async function filterFieldsBySelectionState(elements, state) {
 }
 
 async function elementSelected(element) {
-  const type = await element.getProperty('type').then((el) => el.jsonValue())
+  const type = await element.getProperty('type').then(el => el.jsonValue())
 
   if (type === 'checkbox' || type === 'radio') {
-    return element.getProperty('checked').then((el) => el.jsonValue())
+    return element.getProperty('checked').then(el => el.jsonValue())
   }
-  return element.getProperty('selected').then((el) => el.jsonValue())
+  return element.getProperty('selected').then(el => el.jsonValue())
 }
 
 function isFrameLocator(locator) {
@@ -3078,9 +3063,9 @@ async function targetCreatedHandler(page) {
     page
       .$('body')
       .catch(() => null)
-      .then((context) => (this.context = context))
+      .then(context => (this.context = context))
   })
-  page.on('console', (msg) => {
+  page.on('console', msg => {
     this.debugSection(`Browser:${ucfirst(msg.type())}`, (msg._text || '') + msg.args().join(' '))
     consoleLogStore.add(msg)
   })
@@ -3106,7 +3091,6 @@ async function getClickablePoint(el) {
 // List of key values to key definitions
 // https://github.com/GoogleChrome/puppeteer/blob/v1.20.0/lib/USKeyboardLayout.js
 const keyDefinitionMap = {
-  /* eslint-disable quote-props */
   0: 'Digit0',
   1: 'Digit1',
   2: 'Digit2',
@@ -3154,7 +3138,6 @@ const keyDefinitionMap = {
   '\\': 'Backslash',
   ']': 'BracketRight',
   "'": 'Quote',
-  /* eslint-enable quote-props */
 }
 
 function getNormalizedKey(key) {
@@ -3189,7 +3172,7 @@ async function findReactElements(locator, props = {}, state = {}) {
 
   await this.page.evaluate(() => window.resq.waitToLoadReact())
   const arrayHandle = await this.page.evaluateHandle(
-    (obj) => {
+    obj => {
       const { selector, props, state } = obj
       let elements = window.resq.resq$$(selector)
       if (Object.keys(props).length) {
@@ -3208,7 +3191,7 @@ async function findReactElements(locator, props = {}, state = {}) {
       // [[div, div], [div, div]] => [div, div, div, div]
       let nodes = []
 
-      elements.forEach((element) => {
+      elements.forEach(element => {
         let { node, isFragment } = element
 
         if (!node) {