codeceptjs 4.0.0-rc.7 → 4.0.0-rc.8

package/docs/webapi/moveCursorTo.mustache

@@ -1,12 +1,16 @@
 Moves cursor to element matched by locator.
 Extra shift can be set with offsetX and offsetY options.
 
+An optional `context` (as a second parameter) can be specified to narrow the search to an element within a parent.
+When the second argument is a non-number (string or locator object), it is treated as context.
+
 ```js
 I.moveCursorTo('.tooltip');
 I.moveCursorTo('#submit', 5,5);
+I.moveCursorTo('#submit', '.container');
 ```
 
 @param {CodeceptJS.LocatorOrString} locator located by CSS|XPath|strict locator.
-@param {number} [offsetX=0] (optional, `0` by default) X-axis offset.
+@param {number|CodeceptJS.LocatorOrString} [offsetX=0] (optional, `0` by default) X-axis offset or context locator.
 @param {number} [offsetY=0] (optional, `0` by default) Y-axis offset.
 @returns {void} automatically synchronized promise through #recorder

package/lib/element/WebElement.js

@@ -1,4 +1,5 @@
 import assert from 'assert'
+import { simplifyHtmlElement } from '../html.js'
 
 /**
  * Unified WebElement class that wraps native element instances from different helpers
@@ -306,6 +307,57 @@ class WebElement {
    * @returns {string} Normalized CSS selector
    * @private
    */
+  async toAbsoluteXPath() {
+    const xpathFn = (el) => {
+      const parts = []
+      let current = el
+      while (current && current.nodeType === Node.ELEMENT_NODE) {
+        let index = 0
+        let sibling = current.previousSibling
+        while (sibling) {
+          if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === current.tagName) {
+            index++
+          }
+          sibling = sibling.previousSibling
+        }
+        const tagName = current.tagName.toLowerCase()
+        const pathIndex = index > 0 ? `[${index + 1}]` : ''
+        parts.unshift(`${tagName}${pathIndex}`)
+        current = current.parentElement
+      }
+      return '/' + parts.join('/')
+    }
+
+    switch (this.helperType) {
+      case 'playwright':
+        return this.element.evaluate(xpathFn)
+      case 'puppeteer':
+        return this.element.evaluate(xpathFn)
+      case 'webdriver':
+        return this.helper.browser.execute(xpathFn, this.element)
+      default:
+        throw new Error(`Unsupported helper type: ${this.helperType}`)
+    }
+  }
+
+  async toOuterHTML() {
+    switch (this.helperType) {
+      case 'playwright':
+        return this.element.evaluate(el => el.outerHTML)
+      case 'puppeteer':
+        return this.element.evaluate(el => el.outerHTML)
+      case 'webdriver':
+        return this.helper.browser.execute(el => el.outerHTML, this.element)
+      default:
+        throw new Error(`Unsupported helper type: ${this.helperType}`)
+    }
+  }
+
+  async toSimplifiedHTML(maxLength = 300) {
+    const outerHTML = await this.toOuterHTML()
+    return simplifyHtmlElement(outerHTML, maxLength)
+  }
+
   _normalizeLocator(locator) {
     if (typeof locator === 'string') {
       return locator

package/lib/helper/Playwright.js

@@ -36,6 +36,7 @@ import RemoteBrowserConnectionRefused from './errors/RemoteBrowserConnectionRefu
 import Popup from './extras/Popup.js'
 import Console from './extras/Console.js'
 import { findReact, findVue, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js'
+import { dropFile } from './scripts/dropFile.js'
 import WebElement from '../element/WebElement.js'
 
 let playwright
@@ -1494,8 +1495,23 @@ class Playwright extends Helper {
    *
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
-    const el = await this._locateElement(locator)
-    assertElementExists(el, locator)
+    let context = null
+    if (typeof offsetX !== 'number') {
+      context = offsetX
+      offsetX = 0
+    }
+
+    let el
+    if (context) {
+      const contextEls = await this._locate(context)
+      assertElementExists(contextEls, context, 'Context element')
+      el = await findElements.call(this, contextEls[0], locator)
+      assertElementExists(el, locator)
+      el = el[0]
+    } else {
+      el = await this._locateElement(locator)
+      assertElementExists(el, locator)
+    }
 
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
     const { x, y } = await clickablePoint(el)
@@ -1763,7 +1779,7 @@ class Playwright extends Helper {
     if (elements.length === 0) {
       throw new ElementNotFound(locator, 'Element', 'was not found')
     }
-    if (this.options.strict) assertOnlyOneElement(elements, locator)
+    if (this.options.strict) assertOnlyOneElement(elements, locator, this)
     return elements[0]
   }
 
@@ -1779,7 +1795,7 @@ class Playwright extends Helper {
     const context = providedContext || (await this._getContext())
     const els = await findCheckable.call(this, locator, context)
     assertElementExists(els[0], locator, 'Checkbox or radio')
-    if (this.options.strict) assertOnlyOneElement(els, locator)
+    if (this.options.strict) assertOnlyOneElement(els, locator, this)
     return els[0]
   }
 
@@ -2266,7 +2282,7 @@ class Playwright extends Helper {
   async fillField(field, value, context = null) {
     const els = await findFields.call(this, field, context)
     assertElementExists(els, field, 'Field')
-    if (this.options.strict) assertOnlyOneElement(els, field)
+    if (this.options.strict) assertOnlyOneElement(els, field, this)
     const el = els[0]
 
     await el.clear()
@@ -2285,7 +2301,7 @@ class Playwright extends Helper {
   async clearField(locator, context = null) {
     const els = await findFields.call(this, locator, context)
     assertElementExists(els, locator, 'Field to clear')
-    if (this.options.strict) assertOnlyOneElement(els, locator)
+    if (this.options.strict) assertOnlyOneElement(els, locator, this)
 
     const el = els[0]
 
@@ -2302,7 +2318,7 @@ class Playwright extends Helper {
   async appendField(field, value, context = null) {
     const els = await findFields.call(this, field, context)
     assertElementExists(els, field, 'Field')
-    if (this.options.strict) assertOnlyOneElement(els, field)
+    if (this.options.strict) assertOnlyOneElement(els, field, this)
     await highlightActiveElement.call(this, els[0])
     await els[0].press('End')
     await els[0].type(value.toString(), { delay: this.options.pressKeyDelay })
@@ -2347,20 +2363,12 @@ class Playwright extends Helper {
 
     const targetEls = els.length ? els : await this._locate(locator)
     assertElementExists(targetEls, locator, 'Element')
-    const base64Content = base64EncodeFile(file)
-    const fileName = path.basename(file)
-    const mimeType = getMimeType(fileName)
-    await targetEls[0].evaluate((el, { base64Content, fileName, mimeType }) => {
-      const binaryStr = atob(base64Content)
-      const bytes = new Uint8Array(binaryStr.length)
-      for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
-      const fileObj = new File([bytes], fileName, { type: mimeType })
-      const dataTransfer = new DataTransfer()
-      dataTransfer.items.add(fileObj)
-      el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true }))
-    }, { base64Content, fileName, mimeType })
+    const fileData = {
+      base64Content: base64EncodeFile(file),
+      fileName: path.basename(file),
+      mimeType: getMimeType(path.basename(file)),
+    }
+    await targetEls[0].evaluate(dropFile, fileData)
     return this._waitForAction()
   }
 
@@ -4300,7 +4308,7 @@ async function findClickable(matcher, locator) {
 
   if (!matchedLocator.isFuzzy()) {
     const els = await findElements.call(this, matcher, matchedLocator)
-    if (this.options.strict) assertOnlyOneElement(els, locator)
+    if (this.options.strict) assertOnlyOneElement(els, locator, this)
     return els
   }
 
@@ -4310,7 +4318,7 @@ async function findClickable(matcher, locator) {
   try {
     els = await matcher.getByRole('button', { name: matchedLocator.value }).all()
     if (els.length) {
-      if (this.options.strict) assertOnlyOneElement(els, locator)
+      if (this.options.strict) assertOnlyOneElement(els, locator, this)
       return els
     }
   } catch (err) {
@@ -4320,7 +4328,7 @@ async function findClickable(matcher, locator) {
   try {
     els = await matcher.getByRole('link', { name: matchedLocator.value }).all()
     if (els.length) {
-      if (this.options.strict) assertOnlyOneElement(els, locator)
+      if (this.options.strict) assertOnlyOneElement(els, locator, this)
       return els
     }
   } catch (err) {
@@ -4329,20 +4337,20 @@ async function findClickable(matcher, locator) {
 
   els = await findElements.call(this, matcher, Locator.clickable.narrow(literal))
   if (els.length) {
-    if (this.options.strict) assertOnlyOneElement(els, locator)
+    if (this.options.strict) assertOnlyOneElement(els, locator, this)
     return els
   }
 
   els = await findElements.call(this, matcher, Locator.clickable.wide(literal))
   if (els.length) {
-    if (this.options.strict) assertOnlyOneElement(els, locator)
+    if (this.options.strict) assertOnlyOneElement(els, locator, this)
     return els
   }
 
   try {
     els = await findElements.call(this, matcher, Locator.clickable.self(literal))
     if (els.length) {
-      if (this.options.strict) assertOnlyOneElement(els, locator)
+      if (this.options.strict) assertOnlyOneElement(els, locator, this)
       return els
     }
   } catch (err) {
@@ -4619,9 +4627,10 @@ function assertElementExists(res, locator, prefix, suffix) {
   }
 }
 
-function assertOnlyOneElement(elements, locator) {
+function assertOnlyOneElement(elements, locator, helper) {
   if (elements.length > 1) {
-    throw new MultipleElementsFound(locator, elements)
+    const webElements = elements.map(el => new WebElement(el, helper))
+    throw new MultipleElementsFound(locator, webElements)
   }
 }
 

package/lib/helper/Puppeteer.js

@@ -33,11 +33,13 @@ import {
 } from '../utils.js'
 import { isColorProperty, convertColorToRGBA } from '../colorUtils.js'
 import ElementNotFound from './errors/ElementNotFound.js'
+import MultipleElementsFound from './errors/MultipleElementsFound.js'
 import RemoteBrowserConnectionRefused from './errors/RemoteBrowserConnectionRefused.js'
 import Popup from './extras/Popup.js'
 import Console from './extras/Console.js'
 import { highlightElement } from './scripts/highlightElement.js'
 import { blurElement } from './scripts/blurElement.js'
+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'
@@ -270,6 +272,7 @@ class Puppeteer extends Helper {
       show: false,
       defaultPopupAction: 'accept',
       highlightElement: false,
+      strict: false,
     }
 
     return Object.assign(defaults, config)
@@ -818,9 +821,26 @@ class Puppeteer extends Helper {
    * {{ react }}
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
-    const el = await this._locateElement(locator)
-    if (!el) {
-      throw new ElementNotFound(locator, 'Element to move cursor to')
+    let context = null
+    if (typeof offsetX !== 'number') {
+      context = offsetX
+      offsetX = 0
+    }
+
+    let el
+    if (context) {
+      const contextEls = await findElements.call(this, this.page, context)
+      assertElementExists(contextEls, context, 'Context element')
+      const els = await findElements.call(this, contextEls[0], locator)
+      if (!els || els.length === 0) {
+        throw new ElementNotFound(locator, 'Element to move cursor to')
+      }
+      el = els[0]
+    } else {
+      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
@@ -988,6 +1008,14 @@ class Puppeteer extends Helper {
    */
   async _locateElement(locator) {
     const context = await this.context
+    if (this.options.strict) {
+      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 findElement.call(this, context, locator)
   }
 
@@ -1005,6 +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]
   }
 
@@ -1564,6 +1593,7 @@ class Puppeteer extends Helper {
   async fillField(field, value, context = null) {
     const els = await findVisibleFields.call(this, field, context)
     assertElementExists(els, field, 'Field')
+    if (this.options.strict) assertOnlyOneElement(els, field, this)
     const el = els[0]
     const tag = await el.getProperty('tagName').then(el => el.jsonValue())
     const editable = await el.getProperty('contenteditable').then(el => el.jsonValue())
@@ -1594,6 +1624,7 @@ class Puppeteer extends Helper {
   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 })
@@ -1639,20 +1670,12 @@ class Puppeteer extends Helper {
 
     const targetEls = els.length ? els : await this._locate(locator)
     assertElementExists(targetEls, locator, 'Element')
-    const base64Content = base64EncodeFile(file)
-    const fileName = path.basename(file)
-    const mimeType = getMimeType(fileName)
-    await targetEls[0].evaluate((el, { base64Content, fileName, mimeType }) => {
-      const binaryStr = atob(base64Content)
-      const bytes = new Uint8Array(binaryStr.length)
-      for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
-      const fileObj = new File([bytes], fileName, { type: mimeType })
-      const dataTransfer = new DataTransfer()
-      dataTransfer.items.add(fileObj)
-      el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true }))
-    }, { base64Content, fileName, mimeType })
+    const fileData = {
+      base64Content: base64EncodeFile(file),
+      fileName: path.basename(file),
+      mimeType: getMimeType(path.basename(file)),
+    }
+    await targetEls[0].evaluate(dropFile, fileData)
     return this._waitForAction()
   }
 
@@ -3098,6 +3121,7 @@ async function proceedClick(locator, context = null, options = {}) {
   } else {
     assertElementExists(els, locator, 'Clickable element')
   }
+  if (this.options.strict) assertOnlyOneElement(els, locator, this)
 
   highlightActiveElement.call(this, els[0], await this._getContext())
 
@@ -3425,6 +3449,13 @@ function assertElementExists(res, locator, prefix, suffix) {
   }
 }
 
+function assertOnlyOneElement(elements, locator, helper) {
+  if (elements.length > 1) {
+    const webElements = elements.map(el => new WebElement(el, helper))
+    throw new MultipleElementsFound(locator, webElements)
+  }
+}
+
 function $XPath(element, selector) {
   const found = document.evaluate(selector, element || document.body, null, 5, null)
   const res = []

package/lib/helper/WebDriver.js

@@ -30,12 +30,14 @@ import {
 } from '../utils.js'
 import { isColorProperty, convertColorToRGBA } from '../colorUtils.js'
 import ElementNotFound from './errors/ElementNotFound.js'
+import MultipleElementsFound from './errors/MultipleElementsFound.js'
 import ConnectionRefused from './errors/ConnectionRefused.js'
 import Locator from '../locator.js'
 import { highlightElement } from './scripts/highlightElement.js'
 import { focusElement } from './scripts/focusElement.js'
 import { blurElement } from './scripts/blurElement.js'
 import { dontSeeElementError, seeElementError, seeElementInDOMError, dontSeeElementInDOMError } from './errors/ElementAssertion.js'
+import { dropFile } from './scripts/dropFile.js'
 import { dontSeeTraffic, seeTraffic, grabRecordedNetworkTraffics, stopRecordingTraffic, flushNetworkTraffics } from './network/actions.js'
 import WebElement from '../element/WebElement.js'
 
@@ -503,6 +505,7 @@ class WebDriver extends Helper {
       keepBrowserState: false,
       deprecationWarnings: false,
       highlightElement: false,
+      strict: false,
     }
 
     // override defaults with config
@@ -1090,6 +1093,7 @@ class WebDriver extends Helper {
     } else {
       assertElementExists(res, locator, 'Clickable element')
     }
+    if (this.options.strict) assertOnlyOneElement(res, locator, this)
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
     return this.browser[clickMethod](getElementId(elem))
@@ -1109,6 +1113,7 @@ class WebDriver extends Helper {
     } else {
       assertElementExists(res, locator, 'Clickable element')
     }
+    if (this.options.strict) assertOnlyOneElement(res, locator, this)
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
 
@@ -1136,6 +1141,7 @@ class WebDriver extends Helper {
     } else {
       assertElementExists(res, locator, 'Clickable element')
     }
+    if (this.options.strict) assertOnlyOneElement(res, locator, this)
 
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
@@ -1156,6 +1162,7 @@ class WebDriver extends Helper {
     } else {
       assertElementExists(res, locator, 'Clickable element')
     }
+    if (this.options.strict) assertOnlyOneElement(res, locator, this)
 
     const el = usingFirstElement(res)
 
@@ -1272,6 +1279,7 @@ class WebDriver extends Helper {
   async fillField(field, value, context = null) {
     const res = await findFields.call(this, field, context)
     assertElementExists(res, field, 'Field')
+    if (this.options.strict) assertOnlyOneElement(res, field, this)
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
     try {
@@ -1295,6 +1303,7 @@ class WebDriver extends Helper {
   async appendField(field, value, context = null) {
     const res = await findFields.call(this, field, context)
     assertElementExists(res, field, 'Field')
+    if (this.options.strict) assertOnlyOneElement(res, field, this)
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
     return elem.addValue(value.toString())
@@ -1307,6 +1316,7 @@ class WebDriver extends Helper {
   async clearField(field, context = null) {
     const res = await findFields.call(this, field, context)
     assertElementExists(res, field, 'Field')
+    if (this.options.strict) assertOnlyOneElement(res, field, this)
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
     return elem.clearValue(getElementId(elem))
@@ -1376,20 +1386,12 @@ class WebDriver extends Helper {
     const targetRes = res.length ? res : await this._locate(locator)
     assertElementExists(targetRes, locator, 'Element')
     const targetEl = usingFirstElement(targetRes)
-    const base64Content = base64EncodeFile(file)
-    const fileName = path.basename(file)
-    const mimeType = getMimeType(fileName)
-    return this.browser.execute(function (el, data) {
-      var binaryStr = atob(data.base64Content)
-      var bytes = new Uint8Array(binaryStr.length)
-      for (var i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
-      var fileObj = new File([bytes], data.fileName, { type: data.mimeType })
-      var dataTransfer = new DataTransfer()
-      dataTransfer.items.add(fileObj)
-      el.dispatchEvent(new DragEvent('dragenter', { dataTransfer: dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('dragover', { dataTransfer: dataTransfer, bubbles: true }))
-      el.dispatchEvent(new DragEvent('drop', { dataTransfer: dataTransfer, bubbles: true }))
-    }, targetEl, { base64Content, fileName, mimeType })
+    const fileData = {
+      base64Content: base64EncodeFile(file),
+      fileName: path.basename(file),
+      mimeType: getMimeType(path.basename(file)),
+    }
+    return this.browser.execute(dropFile, targetEl, fileData)
   }
 
   /**
@@ -1974,8 +1976,22 @@ class WebDriver extends Helper {
    * {{> moveCursorTo }}
    */
   async moveCursorTo(locator, xOffset, yOffset) {
-    const res = await this._locate(withStrictLocator(locator), true)
-    assertElementExists(res, locator)
+    let context = null
+    if (typeof xOffset !== 'number' && xOffset !== undefined) {
+      context = xOffset
+      xOffset = undefined
+    }
+
+    let res
+    if (context) {
+      const contextRes = await this._locate(withStrictLocator(context), true)
+      assertElementExists(contextRes, context, 'Context element')
+      res = await contextRes[0].$$(withStrictLocator(locator))
+      assertElementExists(res, locator)
+    } else {
+      res = await this._locate(withStrictLocator(locator), true)
+      assertElementExists(res, locator)
+    }
     const elem = usingFirstElement(res)
     try {
       await elem.moveTo({ xOffset, yOffset })
@@ -3289,6 +3305,13 @@ function usingFirstElement(els) {
   return els[0]
 }
 
+function assertOnlyOneElement(elements, locator, helper) {
+  if (elements.length > 1) {
+    const webElements = Array.from(elements).map(el => new WebElement(el, helper))
+    throw new MultipleElementsFound(locator, webElements)
+  }
+}
+
 function getElementId(el) {
   // W3C WebDriver web element identifier
   // https://w3c.github.io/webdriver/#dfn-web-element-identifier

package/lib/helper/errors/MultipleElementsFound.js

@@ -1,40 +1,45 @@
 import Locator from '../../locator.js'
 
-/**
- * Error thrown when strict mode is enabled and multiple elements are found
- * for a single-element locator operation (click, fillField, etc.)
- */
 class MultipleElementsFound extends Error {
-  /**
-   * @param {Locator|string|object} locator - The locator used
-   * @param {Array<HTMLElement>} elements - Array of Playwright element handles found
-   */
-  constructor(locator, elements) {
-    super(`Multiple elements (${elements.length}) found for "${locator}". Call fetchDetails() for full information.`)
+  constructor(locator, webElements) {
+    const locatorStr = (typeof locator === 'object' && !(locator instanceof Locator))
+      ? new Locator(locator).toString()
+      : String(locator)
+    super(`Multiple elements (${webElements.length}) found for "${locatorStr}" in strict mode. Call fetchDetails() for full information.`)
     this.name = 'MultipleElementsFound'
     this.locator = locator
-    this.elements = elements
-    this.count = elements.length
+    this.webElements = webElements
+    this.count = webElements.length
     this._detailsFetched = false
   }
 
-  /**
-   * Fetch detailed information about the found elements asynchronously
-   * This updates the error message with XPath and element previews
-   */
   async fetchDetails() {
     if (this._detailsFetched) return
 
     try {
-      if (typeof this.locator === 'object' && !(this.locator instanceof Locator)) {
-        this.locator = JSON.stringify(this.locator)
+      const items = []
+      const maxToShow = Math.min(this.count, 10)
+
+      for (let i = 0; i < maxToShow; i++) {
+        const webEl = this.webElements[i]
+        try {
+          const xpath = await webEl.toAbsoluteXPath()
+          const html = await webEl.toSimplifiedHTML()
+          items.push(`  ${i + 1}. > ${xpath}\n     ${html}`)
+        } catch (err) {
+          items.push(`  ${i + 1}. [Unable to get element info: ${err.message}]`)
+        }
       }
 
-      const locatorObj = new Locator(this.locator)
-      const elementList = await this._generateElementList(this.elements, this.count)
+      if (this.count > 10) {
+        items.push(`  ... and ${this.count - 10} more`)
+      }
 
-      this.message = `Multiple elements (${this.count}) found for "${locatorObj.toString()}" in strict mode.\n` +
-        elementList +
+      const locatorStr = (typeof this.locator === 'object' && !(this.locator instanceof Locator))
+        ? new Locator(this.locator).toString()
+        : String(this.locator)
+      this.message = `Multiple elements (${this.count}) found for "${locatorStr}" in strict mode.\n` +
+        items.join('\n') +
         `\nUse a more specific locator or use grabWebElements() to handle multiple elements.`
     } catch (err) {
       this.message = `Multiple elements (${this.count}) found. Failed to fetch details: ${err.message}`
@@ -42,94 +47,6 @@ class MultipleElementsFound extends Error {
 
     this._detailsFetched = true
   }
-
-  /**
-   * Generate a formatted list of found elements with their XPath and preview
-   * @param {Array<HTMLElement>} elements
-   * @param {number} count
-   * @returns {Promise<string>}
-   */
-  async _generateElementList(elements, count) {
-    const items = []
-    const maxToShow = Math.min(count, 10)
-
-    for (let i = 0; i < maxToShow; i++) {
-      const el = elements[i]
-      try {
-        const info = await this._getElementInfo(el)
-        items.push(`  ${i + 1}. ${info.xpath} (${info.preview})`)
-      } catch (err) {
-        // Element might be detached or inaccessible
-        items.push(`  ${i + 1}. [Unable to get element info: ${err.message}]`)
-      }
-    }
-
-    if (count > 10) {
-      items.push(`  ... and ${count - 10} more`)
-    }
-
-    return items.join('\n')
-  }
-
-  /**
-   * Get XPath and preview for an element by running JavaScript in browser context
-   * @param {HTMLElement} element
-   * @returns {Promise<{xpath: string, preview: string}>}
-   */
-  async _getElementInfo(element) {
-    return element.evaluate((el) => {
-      // Generate a unique XPath for this element
-      const getUniqueXPath = (element) => {
-        if (element.id) {
-          return `//*[@id="${element.id}"]`
-        }
-
-        const parts = []
-        let current = element
-
-        while (current && current.nodeType === Node.ELEMENT_NODE) {
-          let index = 0
-          let sibling = current.previousSibling
-
-          while (sibling) {
-            if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === current.tagName) {
-              index++
-            }
-            sibling = sibling.previousSibling
-          }
-
-          const tagName = current.tagName.toLowerCase()
-          const pathIndex = index > 0 ? `[${index + 1}]` : ''
-          parts.unshift(`${tagName}${pathIndex}`)
-
-          current = current.parentElement
-
-          // Stop at body to keep XPath reasonable
-          if (current && current.tagName === 'BODY') {
-            parts.unshift('body')
-            break
-          }
-        }
-
-        return '/' + parts.join('/')
-      }
-
-      // Get a preview of the element (tag, classes, id)
-      const getPreview = (element) => {
-        const tag = element.tagName.toLowerCase()
-        const id = element.id ? `#${element.id}` : ''
-        const classes = element.className
-          ? '.' + element.className.split(' ').filter(c => c).join('.')
-          : ''
-        return `${tag}${id}${classes || ''}`
-      }
-
-      return {
-        xpath: getUniqueXPath(el),
-        preview: getPreview(el),
-      }
-    })
-  }
 }
 
 export default MultipleElementsFound

package/lib/helper/scripts/dropFile.js

@@ -0,0 +1,11 @@
+export const dropFile = (el, { base64Content, fileName, mimeType }) => {
+  const binaryStr = atob(base64Content)
+  const bytes = new Uint8Array(binaryStr.length)
+  for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
+  const fileObj = new File([bytes], fileName, { type: mimeType })
+  const dataTransfer = new DataTransfer()
+  dataTransfer.items.add(fileObj)
+  el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true }))
+  el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true }))
+  el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true }))
+}

package/lib/html.js

@@ -245,4 +245,17 @@ function splitByChunks(text, chunkSize) {
   return chunks.map(chunk => chunk.trim())
 }
 
-export { scanForErrorMessages, removeNonInteractiveElements, splitByChunks, minifyHtml }
+function simplifyHtmlElement(html, maxLength = 300) {
+  try {
+    html = removeNonInteractiveElements(html)
+    html = html.replace(/<html>(?:<head>.*?<\/head>)?<body>(.*)<\/body><\/html>/s, '$1').trim()
+  } catch (e) {
+    // keep raw html if minification fails
+  }
+  if (html.length > maxLength) {
+    html = html.slice(0, maxLength) + '...'
+  }
+  return html
+}
+
+export { scanForErrorMessages, removeNonInteractiveElements, splitByChunks, minifyHtml, simplifyHtmlElement }

package/lib/mocha/cli.js

@@ -202,6 +202,16 @@ class Cli extends Base {
 
     // failures
     if (stats.failures) {
+      for (const test of this.failures) {
+        if (test.err && typeof test.err.fetchDetails === 'function') {
+          try {
+            await test.err.fetchDetails()
+          } catch (e) {
+            // ignore fetch errors
+          }
+        }
+      }
+
       // append step traces
       this.failures = this.failures.map(test => {
         // we will change the stack trace, so we need to clone the test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeceptjs",
-  "version": "4.0.0-rc.7",
+  "version": "4.0.0-rc.8",
   "type": "module",
   "description": "Supercharged End 2 End Testing Framework for NodeJS",
   "keywords": [