codeceptjs 4.0.0-rc.8 → 4.0.0

package/lib/helper/Puppeteer.js

@@ -8,6 +8,7 @@ import promiseRetry from 'promise-retry'
 import Locator from '../locator.js'
 import recorder from '../recorder.js'
 import store from '../store.js'
+import { checkFocusBeforeType, checkFocusBeforePressKey } from './extras/focusCheck.js'
 import { includes as stringIncludes } from '../assert/include.js'
 import { urlEquals, equals } from '../assert/equal.js'
 import { empty } from '../assert/empty.js'
@@ -43,6 +44,8 @@ import { dropFile } from './scripts/dropFile.js'
 import { dontSeeElementError, seeElementError, dontSeeElementInDOMError, seeElementInDOMError } from './errors/ElementAssertion.js'
 import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js'
 import WebElement from '../element/WebElement.js'
+import { selectElement } from './extras/elementSelection.js'
+import { fillRichEditor } from './extras/richTextEditor.js'
 
 let puppeteer
 
@@ -750,7 +753,7 @@ class Puppeteer extends Helper {
     }
 
     if (this.options.trace) {
-      const fileName = `${`${global.output_dir}${path.sep}trace${path.sep}${uuidv4()}_${clearString(this.currentRunningTest.title)}`.slice(0, 245)}.json`
+      const fileName = `${`${store.outputDir}${path.sep}trace${path.sep}${uuidv4()}_${clearString(this.currentRunningTest.title)}`.slice(0, 245)}.json`
       const dir = path.dirname(fileName)
       if (!fileExists(dir)) fs.mkdirSync(dir)
       await this.page.tracing.start({ screenshots: true, path: fileName })
@@ -818,7 +821,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> moveCursorTo }}
-   * {{ react }}
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
     let context = null
@@ -989,7 +991,6 @@ class Puppeteer extends Helper {
    * const elements = await this.helpers['Puppeteer']._locate({name: 'password'});
    * ```
    *
-   * {{ react }}
    */
   async _locate(locator) {
     const context = await this.context
@@ -1004,17 +1005,16 @@ class Puppeteer extends Helper {
    * const element = await this.helpers['Puppeteer']._locateElement({name: 'password'});
    * ```
    *
-   * {{ react }}
    */
   async _locateElement(locator) {
     const context = await this.context
-    if (this.options.strict) {
+    const elementIndex = store.currentStep?.opts?.elementIndex
+    if (this.options.strict || elementIndex) {
       const elements = await findElements.call(this, context, locator)
       if (elements.length === 0) {
         throw new ElementNotFound(locator, 'Element', 'was not found')
       }
-      assertOnlyOneElement(elements, locator, this)
-      return elements[0]
+      return selectElement(elements, locator, this)
     }
     return findElement.call(this, context, locator)
   }
@@ -1033,8 +1033,7 @@ class Puppeteer extends Helper {
     if (!els || els.length === 0) {
       throw new ElementNotFound(locator, 'Checkbox or radio')
     }
-    if (this.options.strict) assertOnlyOneElement(els, locator, this)
-    return els[0]
+    return selectElement(els, locator, this)
   }
 
   /**
@@ -1189,7 +1188,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> seeElement }}
-   * {{ react }}
    */
   async seeElement(locator, context = null) {
     let els
@@ -1213,7 +1211,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> dontSeeElement }}
-   * {{ react }}
    */
   async dontSeeElement(locator, context = null) {
     let els
@@ -1262,7 +1259,6 @@ class Puppeteer extends Helper {
   /**
    * {{> click }}
    *
-   * {{ react }}
    */
   async click(locator = '//body', context = null) {
     return proceedClick.call(this, locator, context)
@@ -1271,7 +1267,6 @@ class Puppeteer extends Helper {
   /**
    * {{> forceClick }}
    *
-   * {{ react }}
    */
   async forceClick(locator, context = null) {
     let matcher = await this.context
@@ -1301,7 +1296,6 @@ class Puppeteer extends Helper {
   /**
    * {{> clickLink }}
    *
-   * {{ react }}
    */
   async clickLink(locator, context = null) {
     return proceedClick.call(this, locator, context, { waitForNavigation: true })
@@ -1325,7 +1319,7 @@ class Puppeteer extends Helper {
    * @param {string} [downloadPath='downloads'] change this parameter to set another directory for saving
    */
   async handleDownloads(downloadPath = 'downloads') {
-    downloadPath = path.join(global.output_dir, downloadPath)
+    downloadPath = path.join(store.outputDir, downloadPath)
     if (!fs.existsSync(downloadPath)) {
       fs.mkdirSync(downloadPath, '0777')
     }
@@ -1387,7 +1381,7 @@ class Puppeteer extends Helper {
       },
     })
 
-    const outputFile = path.join(`${global.output_dir}/${fileName}`)
+    const outputFile = path.join(`${store.outputDir}/${fileName}`)
 
     try {
       await new Promise((resolve, reject) => {
@@ -1409,7 +1403,6 @@ class Puppeteer extends Helper {
   /**
    * {{> doubleClick }}
    *
-   * {{ react }}
    */
   async doubleClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { clickCount: 2 })
@@ -1418,7 +1411,6 @@ class Puppeteer extends Helper {
   /**
    * {{> rightClick }}
    *
-   * {{ react }}
    */
   async rightClick(locator, context = null) {
     return proceedClick.call(this, locator, context, { button: 'right' })
@@ -1547,6 +1539,7 @@ class Puppeteer extends Helper {
    * {{> pressKeyWithKeyNormalization }}
    */
   async pressKey(key) {
+    await checkFocusBeforePressKey(this, key)
     const modifiers = []
     if (Array.isArray(key)) {
       for (let k of key) {
@@ -1575,6 +1568,8 @@ class Puppeteer extends Helper {
    * {{> type }}
    */
   async type(keys, delay = null) {
+    await checkFocusBeforeType(this)
+
     if (!Array.isArray(keys)) {
       keys = keys.toString()
       keys = keys.split('')
@@ -1588,13 +1583,20 @@ class Puppeteer extends Helper {
 
   /**
    * {{> fillField }}
-   * {{ react }}
    */
   async fillField(field, value, context = null) {
-    const els = await findVisibleFields.call(this, field, context)
+    let els = await findVisibleFields.call(this, field, context)
+    if (!els.length) {
+      els = await findFields.call(this, field, context)
+    }
     assertElementExists(els, field, 'Field')
-    if (this.options.strict) assertOnlyOneElement(els, field, this)
-    const el = els[0]
+    const el = selectElement(els, field, this)
+
+    if (await fillRichEditor(this, el, value)) {
+      highlightActiveElement.call(this, el, await this._getContext())
+      return this._waitForAction()
+    }
+
     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') {
@@ -1619,15 +1621,14 @@ class Puppeteer extends Helper {
   /**
    * {{> appendField }}
    *
-   * {{ react }}
    */
   async appendField(field, value, context = null) {
     const els = await findVisibleFields.call(this, field, context)
     assertElementExists(els, field, 'Field')
-    if (this.options.strict) assertOnlyOneElement(els, field, this)
-    highlightActiveElement.call(this, els[0], await this._getContext())
-    await els[0].press('End')
-    await els[0].type(value.toString(), { delay: this.options.pressKeyDelay })
+    const el = selectElement(els, field, this)
+    highlightActiveElement.call(this, el, await this._getContext())
+    await el.press('End')
+    await el.type(value.toString(), { delay: this.options.pressKeyDelay })
     return this._waitForAction()
   }
 
@@ -1653,29 +1654,31 @@ class Puppeteer extends Helper {
    * {{> attachFile }}
    */
   async attachFile(locator, pathToFile, context = null) {
-    const file = path.join(global.codecept_dir, pathToFile)
+    const file = path.join(store.codeceptDir, pathToFile)
 
     if (!fileExists(file)) {
       throw new Error(`File at ${file} can not be found on local system`)
     }
     const els = await findFields.call(this, locator, context)
     if (els.length) {
-      const tag = await els[0].evaluate(el => el.tagName)
-      const type = await els[0].evaluate(el => el.type)
+      const el = selectElement(els, locator, this)
+      const tag = await el.evaluate(el => el.tagName)
+      const type = await el.evaluate(el => el.type)
       if (tag === 'INPUT' && type === 'file') {
-        await els[0].uploadFile(file)
+        await el.uploadFile(file)
         return this._waitForAction()
       }
     }
 
     const targetEls = els.length ? els : await this._locate(locator)
     assertElementExists(targetEls, locator, 'Element')
+    const el = selectElement(targetEls, locator, this)
     const fileData = {
       base64Content: base64EncodeFile(file),
       fileName: path.basename(file),
       mimeType: getMimeType(path.basename(file)),
     }
-    await targetEls[0].evaluate(dropFile, fileData)
+    await el.evaluate(dropFile, fileData)
     return this._waitForAction()
   }
 
@@ -1698,28 +1701,27 @@ class Puppeteer extends Helper {
       this.debugSection('SelectOption', `Strict: ${JSON.stringify(select)}`)
       const els = contextEl ? await findElements.call(this, contextEl, select) : await this._locate(select)
       assertElementExists(els, select, 'Selectable element')
-      return proceedSelect.call(this, pageContext, els[0], option)
+      return proceedSelect.call(this, pageContext, selectElement(els, select, this), option)
     }
 
     // Fuzzy: try combobox
     this.debugSection('SelectOption', `Fuzzy: "${matchedLocator.value}"`)
     const comboboxSearchCtx = contextEl || pageContext
     let els = await findByRole(comboboxSearchCtx, { role: 'combobox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, pageContext, els[0], option)
+    if (els?.length) return proceedSelect.call(this, pageContext, selectElement(els, select, this), option)
 
     // Fuzzy: try listbox
     els = await findByRole(comboboxSearchCtx, { role: 'listbox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, pageContext, els[0], option)
+    if (els?.length) return proceedSelect.call(this, pageContext, selectElement(els, select, this), option)
 
     // Fuzzy: try native select
     const visibleEls = await findVisibleFields.call(this, select, context)
     assertElementExists(visibleEls, select, 'Selectable field')
-    return proceedSelect.call(this, pageContext, visibleEls[0], option)
+    return proceedSelect.call(this, pageContext, selectElement(visibleEls, select, this), option)
   }
 
   /**
    * {{> grabNumberOfVisibleElements }}
-   * {{ react }}
    */
   async grabNumberOfVisibleElements(locator) {
     let els = await this._locate(locator)
@@ -1781,7 +1783,6 @@ class Puppeteer extends Helper {
   /**
    * {{> see }}
    *
-   * {{ react }}
    */
   async see(text, context = null) {
     return proceedSee.call(this, 'assert', text, context)
@@ -1797,7 +1798,6 @@ class Puppeteer extends Helper {
   /**
    * {{> dontSee }}
    *
-   * {{ react }}
    */
   async dontSee(text, context = null) {
     return proceedSee.call(this, 'negate', text, context)
@@ -1851,7 +1851,6 @@ class Puppeteer extends Helper {
   /**
    * {{> seeNumberOfElements }}
    *
-   * {{ react }}
    */
   async seeNumberOfElements(locator, num) {
     const elements = await this._locate(locator)
@@ -1861,7 +1860,6 @@ class Puppeteer extends Helper {
   /**
    * {{> seeNumberOfVisibleElements }}
    *
-   * {{ react }}
    */
   async seeNumberOfVisibleElements(locator, num) {
     const res = await this.grabNumberOfVisibleElements(locator)
@@ -1988,7 +1986,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> grabTextFromAll }}
-   * {{ react }}
    */
   async grabTextFromAll(locator) {
     const els = await this._locate(locator)
@@ -2001,7 +1998,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> grabTextFrom }}
-   * {{ react }}
    */
   async grabTextFrom(locator) {
     const texts = await this.grabTextFromAll(locator)
@@ -2062,7 +2058,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> grabCssPropertyFromAll }}
-   * {{ react }}
    */
   async grabCssPropertyFromAll(locator, cssProperty) {
     const els = await this._locate(locator)
@@ -2074,7 +2069,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> grabCssPropertyFrom }}
-   * {{ react }}
    */
   async grabCssPropertyFrom(locator, cssProperty) {
     const cssValues = await this.grabCssPropertyFromAll(locator, cssProperty)
@@ -2089,7 +2083,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> seeCssPropertiesOnElements }}
-   * {{ react }}
    */
   async seeCssPropertiesOnElements(locator, cssProperties) {
     const res = await this._locate(locator)
@@ -2124,7 +2117,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> seeAttributesOnElements }}
-   * {{ react }}
    */
   async seeAttributesOnElements(locator, attributes) {
     const elements = await this._locate(locator)
@@ -2162,7 +2154,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> dragSlider }}
-   * {{ react }}
    */
   async dragSlider(locator, offsetX = 0) {
     const src = await this._locate(locator)
@@ -2184,7 +2175,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> grabAttributeFromAll }}
-   * {{ react }}
    */
   async grabAttributeFromAll(locator, attr) {
     const els = await this._locate(locator)
@@ -2198,7 +2188,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> grabAttributeFrom }}
-   * {{ react }}
    */
   async grabAttributeFrom(locator, attr) {
     const attrs = await this.grabAttributeFromAll(locator, attr)
@@ -2361,7 +2350,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> waitNumberOfVisibleElements }}
-   * {{ react }}
    */
   async waitNumberOfVisibleElements(locator, num, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout
@@ -2409,7 +2397,6 @@ class Puppeteer extends Helper {
 
   /**
    * {{> waitForElement }}
-   * {{ react }}
    */
   async waitForElement(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout
@@ -2430,7 +2417,6 @@ class Puppeteer extends Helper {
   /**
    * {{> waitForVisible }}
    *
-   * {{ react }}
    */
   async waitForVisible(locator, sec) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout
@@ -3007,10 +2993,6 @@ export default Puppeteer
  * @returns {Promise<Array>} Array of ElementHandle objects
  */
 async function findElements(matcher, locator) {
-  // Check if locator is a Locator object with react type, or a raw object with react property
-  const isReactLocator = locator.type === 'react' || (locator.locator && locator.locator.react) || locator.react
-  if (isReactLocator) return findReactElements.call(this, locator)
-  
   locator = new Locator(locator, 'css')
 
   // Check if locator is a role locator and call findByRole
@@ -3077,7 +3059,6 @@ async function findElements(matcher, locator) {
  * @returns {Promise<Object>} Single ElementHandle object
  */
 async function findElement(matcher, locator) {
-  if (locator.react) return findReactElements.call(this, locator)
   locator = new Locator(locator, 'css')
 
   // Check if locator is a role locator and call findByRole
@@ -3121,11 +3102,11 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element')
   }
-  if (this.options.strict) assertOnlyOneElement(els, locator, this)
+  const el = selectElement(els, locator, this)
 
-  highlightActiveElement.call(this, els[0], await this._getContext())
+  highlightActiveElement.call(this, el, await this._getContext())
 
-  await els[0].click(options)
+  await el.click(options)
   const promises = []
   if (options.waitForNavigation) {
     promises.push(this.waitForNavigation())
@@ -3563,7 +3544,7 @@ function getNormalizedKey(key) {
 }
 
 function highlightActiveElement(element, context) {
-  if (this.options.highlightElement && global.debugMode) {
+  if (this.options.highlightElement && store.debugMode) {
     highlightElement(element, context)
   }
 }
@@ -3576,75 +3557,6 @@ function _waitForElement(locator, options) {
   }
 }
 
-async function findReactElements(locator) {
-  // Handle both Locator objects and raw locator objects
-  const resolved = locator.locator ? locator.locator : toLocatorConfig(locator, 'react')
-  this.debug(`Finding React elements: ${JSON.stringify(resolved)}`)
-
-  // Use createRequire to access require.resolve in ESM
-  const { createRequire } = await import('module')
-  const require = createRequire(import.meta.url)
-  const resqScript = await fs.promises.readFile(require.resolve('resq'), 'utf-8')
-  await this.page.evaluate(resqScript.toString())
-
-  await this.page.evaluate(() => window.resq.waitToLoadReact())
-  const arrayHandle = await this.page.evaluateHandle(
-    obj => {
-      const { selector, props, state } = obj
-      let elements = window.resq.resq$$(selector)
-      if (Object.keys(props).length) {
-        elements = elements.byProps(props)
-      }
-      if (Object.keys(state).length) {
-        elements = elements.byState(state)
-      }
-
-      if (!elements.length) {
-        return []
-      }
-
-      // resq returns an array of HTMLElements if the React component is a fragment
-      // this avoids having nested arrays of nodes which the driver does not understand
-      // [[div, div], [div, div]] => [div, div, div, div]
-      let nodes = []
-
-      elements.forEach(element => {
-        let { node, isFragment } = element
-
-        if (!node) {
-          isFragment = true
-          node = element.children
-        }
-
-        if (isFragment) {
-          nodes = nodes.concat(node)
-        } else {
-          nodes.push(node)
-        }
-      })
-
-      return [...nodes]
-    },
-    {
-      selector: resolved.react,
-      props: resolved.props || {},
-      state: resolved.state || {},
-    },
-  )
-
-  const properties = await arrayHandle.getProperties()
-  const result = []
-  for (const property of properties.values()) {
-    const elementHandle = property.asElement()
-    if (elementHandle) {
-      result.push(elementHandle)
-    }
-  }
-
-  await arrayHandle.dispose()
-  return result
-}
-
 async function findByRole(matcher, locator) {
   const resolved = toLocatorConfig(locator, 'role')
   const roleSelector = buildRoleSelector(resolved)