codeceptjs 4.0.1-beta.9 → 4.0.1

package/lib/helper/errors/ElementNotFound.js

@@ -5,10 +5,13 @@ import Locator from '../../locator.js'
  */
 class ElementNotFound {
   constructor(locator, prefixMessage = 'Element', postfixMessage = 'was not found by text|CSS|XPath') {
+    let locatorStr
     if (typeof locator === 'object') {
-      locator = JSON.stringify(locator)
+      locatorStr = JSON.stringify(locator)
+    } else {
+      locatorStr = new Locator(locator).toString()
     }
-    throw new Error(`${prefixMessage} "${new Locator(locator)}" ${postfixMessage}`)
+    throw new Error(`${prefixMessage} "${locatorStr}" ${postfixMessage}`)
   }
 }
 

package/lib/helper/errors/MultipleElementsFound.js

@@ -0,0 +1,52 @@
+import Locator from '../../locator.js'
+
+class MultipleElementsFound extends Error {
+  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.webElements = webElements
+    this.count = webElements.length
+    this._detailsFetched = false
+  }
+
+  async fetchDetails() {
+    if (this._detailsFetched) return
+
+    try {
+      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}]`)
+        }
+      }
+
+      if (this.count > 10) {
+        items.push(`  ... and ${this.count - 10} more`)
+      }
+
+      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}`
+    }
+
+    this._detailsFetched = true
+  }
+}
+
+export default MultipleElementsFound

package/lib/helper/errors/NonFocusedType.js

@@ -0,0 +1,8 @@
+class NonFocusedType extends Error {
+  constructor(message) {
+    super(message)
+    this.name = 'NonFocusedType'
+  }
+}
+
+export default NonFocusedType

package/lib/helper/extras/Download.js

@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+import minimatch from 'minimatch'
+import store from '../../store.js'
+import assert from 'assert'
+
+function getDownloadDir() {
+  return path.join(store.outputDir, 'downloads')
+}
+
+function getNewFiles(downloadDir, sinceTimestamp) {
+  if (!fs.existsSync(downloadDir)) return []
+  return fs.readdirSync(downloadDir).filter(name => {
+    const stat = fs.statSync(path.join(downloadDir, name))
+    return stat.isFile() && stat.mtimeMs >= sinceTimestamp
+  })
+}
+
+function seeFileDownloaded(arg) {
+  const downloadDir = getDownloadDir()
+  const files = getNewFiles(downloadDir, this._downloadStartTimestamp)
+
+  if (arg === undefined || arg === null) {
+    assert.ok(files.length > 0, `No files downloaded to ${downloadDir}`)
+    return
+  }
+  if (typeof arg === 'number') {
+    assert.strictEqual(files.length, arg, `Expected ${arg} downloaded file(s), found ${files.length}: [${files.join(', ')}]`)
+    return
+  }
+  const regexMatch = arg.match(/^\/(.+)\/$/)
+  if (regexMatch) {
+    const re = new RegExp(regexMatch[1])
+    assert.ok(files.some(f => re.test(f)), `No file matches ${arg}. Downloaded: [${files.join(', ')}]`)
+    return
+  }
+  if (/[*?[\]]/.test(arg)) {
+    const matched = minimatch.match(files, arg)
+    assert.ok(matched.length > 0, `No file matches glob "${arg}". Downloaded: [${files.join(', ')}]`)
+    return
+  }
+  assert.ok(files.includes(arg), `File "${arg}" not downloaded. Downloaded: [${files.join(', ')}]`)
+}
+
+export { seeFileDownloaded, getDownloadDir }

package/lib/helper/extras/PlaywrightLocator.js

@@ -1,110 +1,10 @@
-import Locator from '../../locator.js'
-
-function buildLocatorString(locator) {
-  if (locator.isCustom()) {
-    return `${locator.type}=${locator.value}`
-  }
-  if (locator.isXPath()) {
-    return `xpath=${locator.value}`
-  }
-  return locator.simplify()
-}
-
-async function findElements(matcher, locator) {
-  const matchedLocator = new Locator(locator, 'css')
-
-  if (matchedLocator.type === 'react') return findReact(matcher, matchedLocator)
-  if (matchedLocator.type === 'vue') return findVue(matcher, matchedLocator)
-  if (matchedLocator.type === 'pw') return findByPlaywrightLocator(matcher, matchedLocator)
-  if (matchedLocator.isRole()) return findByRole(matcher, matchedLocator)
-
-  return matcher.locator(buildLocatorString(matchedLocator)).all()
-}
-
-async function findElement(matcher, locator) {
-  const matchedLocator = new Locator(locator, 'css')
-
-  if (matchedLocator.type === 'react') return findReact(matcher, matchedLocator)
-  if (matchedLocator.type === 'vue') return findVue(matcher, matchedLocator)
-  if (matchedLocator.type === 'pw') return findByPlaywrightLocator(matcher, matchedLocator, { first: true })
-  if (matchedLocator.isRole()) return findByRole(matcher, matchedLocator, { first: true })
-
-  return matcher.locator(buildLocatorString(matchedLocator)).first()
-}
-
-async function getVisibleElements(elements) {
-  const visibleElements = []
-  for (const element of elements) {
-    if (await element.isVisible()) {
-      visibleElements.push(element)
-    }
-  }
-  if (visibleElements.length === 0) {
-    return elements
-  }
-  return visibleElements
-}
-
-async function findReact(matcher, locator) {
-  const details = locator.locator ?? { react: locator.value }
-  let locatorString = `_react=${details.react}`
-
-  if (details.props) {
-    locatorString += propBuilder(details.props)
-  }
-
-  return matcher.locator(locatorString).all()
-}
-
-async function findVue(matcher, locator) {
-  const details = locator.locator ?? { vue: locator.value }
-  let locatorString = `_vue=${details.vue}`
-
-  if (details.props) {
-    locatorString += propBuilder(details.props)
-  }
-
-  return matcher.locator(locatorString).all()
-}
-
-async function findByPlaywrightLocator(matcher, locator, { first = false } = {}) {
-  const details = locator.locator ?? { pw: locator.value }
-  const locatorValue = details.pw
-
-  const handle = matcher.locator(locatorValue)
-  return first ? handle.first() : handle.all()
-}
-
-async function findByRole(matcher, locator, { first = false } = {}) {
-  const details = locator.locator ?? { role: locator.value }
-  const { role, text, name, exact, includeHidden, ...rest } = details
-  const options = { ...rest }
-
-  if (includeHidden !== undefined) options.includeHidden = includeHidden
-
-  const accessibleName = name ?? text
-  if (accessibleName !== undefined) {
-    options.name = accessibleName
-    if (exact === true) options.exact = true
-  }
-
-  const roleLocator = matcher.getByRole(role, options)
-  return first ? roleLocator.first() : roleLocator.all()
-}
-
-function propBuilder(props) {
-  let _props = ''
-
-  for (const [key, value] of Object.entries(props)) {
-    if (typeof value === 'object') {
-      for (const [k, v] of Object.entries(value)) {
-        _props += `[${key}.${k} = "${v}"]`
-      }
-    } else {
-      _props += `[${key} = "${value}"]`
-    }
+async function findByPlaywrightLocator(matcher, locator) {
+  const pwLocator = locator.locator || locator
+  if (pwLocator && pwLocator.toString && pwLocator.toString().includes(process.env.testIdAttribute)) {
+    return matcher.getByTestId(pwLocator.pw.value.split('=')[1])
   }
-  return _props
+  const pwValue = typeof pwLocator.pw === 'string' ? pwLocator.pw : pwLocator.pw
+  return matcher.locator(pwValue).all()
 }
 
-export { buildLocatorString, findElements, findElement, getVisibleElements, findReact, findVue, findByPlaywrightLocator, findByRole }
+export { findByPlaywrightLocator }

package/lib/helper/extras/elementSelection.js

@@ -0,0 +1,58 @@
+import store from '../../store.js'
+import output from '../../output.js'
+import WebElement from '../../element/WebElement.js'
+import MultipleElementsFound from '../errors/MultipleElementsFound.js'
+
+function resolveElementIndex(value) {
+  if (value === 'first') return 1
+  if (value === 'last') return -1
+  return value
+}
+
+function isStrictStep(opts, helper) {
+  if (opts?.exact === true || opts?.strictMode === true) return true
+  if (opts?.exact === false || opts?.strictMode === false) return false
+  return helper.options.strict
+}
+
+function selectElement(els, locator, helper) {
+  const opts = store.currentStep?.opts
+  const rawIndex = opts?.elementIndex
+  const elementIndex = resolveElementIndex(rawIndex)
+
+  if (elementIndex != null) {
+    if (els.length === 1) return els[0]
+
+    if (!Number.isInteger(elementIndex) || elementIndex === 0) {
+      throw new Error(`elementIndex must be a non-zero integer or 'first'/'last', got: ${rawIndex}`)
+    }
+
+    let idx
+    if (elementIndex > 0) {
+      idx = elementIndex - 1
+      if (idx >= els.length) {
+        throw new Error(`elementIndex ${elementIndex} exceeds the number of elements found (${els.length}) for "${locator}"`)
+      }
+    } else {
+      idx = els.length + elementIndex
+      if (idx < 0) {
+        throw new Error(`elementIndex ${elementIndex} exceeds the number of elements found (${els.length}) for "${locator}"`)
+      }
+    }
+
+    output.debug(`[Elements] Using element #${elementIndex} out of ${els.length}`)
+    return els[idx]
+  }
+
+  if (isStrictStep(opts, helper)) {
+    if (els.length > 1) {
+      const webElements = Array.from(els).map(el => new WebElement(el, helper))
+      throw new MultipleElementsFound(locator, webElements)
+    }
+  }
+
+  if (els.length > 1) output.debug(`[Elements] Using first element out of ${els.length}`)
+  return els[0]
+}
+
+export { selectElement }

package/lib/helper/extras/focusCheck.js

@@ -0,0 +1,43 @@
+import store from '../../store.js'
+import NonFocusedType from '../errors/NonFocusedType.js'
+
+const MODIFIER_PATTERN = /^(control|ctrl|meta|cmd|command|commandorcontrol|ctrlorcommand)/i
+const EDITING_KEYS = new Set(['a', 'c', 'x', 'v', 'z', 'y'])
+
+async function isNoElementFocused(helper) {
+  return helper.executeScript(() => {
+    const ae = document.activeElement
+    return !ae || ae === document.documentElement || (ae === document.body && !ae.isContentEditable)
+  })
+}
+
+export async function checkFocusBeforeType(helper) {
+  if (!helper.options.strict && !store.debugMode) return
+  if (!await isNoElementFocused(helper)) return
+
+  const message = 'No element is in focus. Use I.click() or I.focus() to activate an element before typing.'
+  if (helper.options.strict) throw new NonFocusedType(message)
+  helper.debugSection('Warning', message)
+}
+
+export async function checkFocusBeforePressKey(helper, originalKey) {
+  if (!helper.options.strict && !store.debugMode) return
+  if (!Array.isArray(originalKey)) return
+
+  let hasCtrlOrMeta = false
+  let actionKey = null
+  for (const k of originalKey) {
+    if (MODIFIER_PATTERN.test(k)) {
+      hasCtrlOrMeta = true
+    } else {
+      actionKey = k
+    }
+  }
+  if (!hasCtrlOrMeta || !actionKey || !EDITING_KEYS.has(actionKey.toLowerCase())) return
+
+  if (!await isNoElementFocused(helper)) return
+
+  const message = `No element is in focus. Key combination with "${originalKey.join('+')}" may not work as expected. Use I.click() or I.focus() first.`
+  if (helper.options.strict) throw new NonFocusedType(message)
+  helper.debugSection('Warning', message)
+}

package/lib/helper/extras/richTextEditor.js

@@ -0,0 +1,178 @@
+import WebElement from '../../element/WebElement.js'
+
+const MARKER = 'data-codeceptjs-rte-target'
+
+const EDITOR = {
+  STANDARD: 'standard',
+  IFRAME: 'iframe',
+  CONTENTEDITABLE: 'contenteditable',
+  HIDDEN_TEXTAREA: 'hidden-textarea',
+  UNREACHABLE: 'unreachable',
+}
+
+function detectAndMark(el, opts) {
+  const marker = opts.marker
+  const kinds = opts.kinds
+  const CE = '[contenteditable="true"], [contenteditable=""]'
+
+  function mark(kind, target) {
+    document.querySelectorAll('[' + marker + ']').forEach(n => n.removeAttribute(marker))
+    if (target && target.nodeType === 1) target.setAttribute(marker, '1')
+    return kind
+  }
+
+  if (!el || el.nodeType !== 1) return mark(kinds.STANDARD, el)
+
+  const tag = el.tagName
+  if (tag === 'IFRAME') return mark(kinds.IFRAME, el)
+  if (el.isContentEditable) return mark(kinds.CONTENTEDITABLE, el)
+
+  const isFormHidden = tag === 'INPUT' && el.type === 'hidden'
+  if ((tag === 'INPUT' || tag === 'TEXTAREA') && !isFormHidden) {
+    const style = window.getComputedStyle(el)
+    if (style.display === 'none') return mark(kinds.UNREACHABLE, el)
+  }
+
+  const canSearchDescendants = tag !== 'INPUT' && tag !== 'TEXTAREA'
+  if (canSearchDescendants) {
+    const iframe = el.querySelector('iframe')
+    if (iframe) return mark(kinds.IFRAME, iframe)
+    const ce = el.querySelector(CE)
+    if (ce) return mark(kinds.CONTENTEDITABLE, ce)
+    const textareas = [...el.querySelectorAll('textarea')]
+    const focusable = textareas.find(t => window.getComputedStyle(t).display !== 'none')
+    const textarea = focusable || textareas[0]
+    if (textarea) return mark(kinds.HIDDEN_TEXTAREA, textarea)
+  }
+
+  return mark(kinds.STANDARD, el)
+}
+
+function detectInsideFrame() {
+  const MARKER = 'data-codeceptjs-rte-target'
+  const CE = '[contenteditable="true"], [contenteditable=""]'
+  const CONTENTEDITABLE = 'contenteditable'
+  const HIDDEN_TEXTAREA = 'hidden-textarea'
+  const body = document.body
+  document.querySelectorAll('[' + MARKER + ']').forEach(n => n.removeAttribute(MARKER))
+
+  if (body.isContentEditable) return CONTENTEDITABLE
+
+  const ce = body.querySelector(CE)
+  if (ce) {
+    ce.setAttribute(MARKER, '1')
+    return CONTENTEDITABLE
+  }
+
+  const textareas = [...body.querySelectorAll('textarea')]
+  const focusable = textareas.find(t => window.getComputedStyle(t).display !== 'none')
+  const textarea = focusable || textareas[0]
+  if (textarea) {
+    textarea.setAttribute(MARKER, '1')
+    return HIDDEN_TEXTAREA
+  }
+
+  return CONTENTEDITABLE
+}
+
+async function evaluateInFrame(helper, body, fn) {
+  if (body.helperType === 'webdriver') {
+    return helper.executeScript(fn)
+  }
+  return body.element.evaluate(fn)
+}
+
+function focusMarkedInFrameScript() {
+  const el = document.querySelector('[data-codeceptjs-rte-target]') || document.body
+  el.focus()
+  return document.activeElement === el
+}
+
+function selectAllInFrameScript() {
+  const el = document.querySelector('[data-codeceptjs-rte-target]') || document.body
+  el.focus()
+  const range = document.createRange()
+  range.selectNodeContents(el)
+  const sel = window.getSelection()
+  sel.removeAllRanges()
+  sel.addRange(range)
+  return document.activeElement === el
+}
+
+function selectAllInEditable(el) {
+  const doc = el.ownerDocument
+  const win = doc.defaultView
+  el.focus()
+  const range = doc.createRange()
+  range.selectNodeContents(el)
+  const sel = win.getSelection()
+  sel.removeAllRanges()
+  sel.addRange(range)
+}
+
+function unmarkAll(marker) {
+  document.querySelectorAll('[' + marker + ']').forEach(n => n.removeAttribute(marker))
+}
+
+function isActive(el) {
+  return el.ownerDocument.activeElement === el
+}
+
+async function assertFocused(target) {
+  const focused = await target.evaluate(isActive)
+  if (!focused) {
+    throw new Error('fillField: rich editor target did not accept focus. Locator must point at the visible editor surface (a wrapper, iframe, or contenteditable) — not a hidden backing element.')
+  }
+}
+
+async function findMarked(helper) {
+  const root = helper.page || helper.browser
+  const raw = await root.$('[' + MARKER + ']')
+  return new WebElement(raw, helper)
+}
+
+async function clearMarker(helper) {
+  if (helper.page) return helper.page.evaluate(unmarkAll, MARKER)
+  return helper.executeScript(unmarkAll, MARKER)
+}
+
+export async function fillRichEditor(helper, el, value) {
+  const source = el instanceof WebElement ? el : new WebElement(el, helper)
+  const kind = await source.evaluate(detectAndMark, { marker: MARKER, kinds: EDITOR })
+  if (kind === EDITOR.STANDARD) return false
+  if (kind === EDITOR.UNREACHABLE) {
+    throw new Error('fillField: cannot fill a display:none form control. Locator must point at the visible editor surface (a wrapper, iframe, or contenteditable).')
+  }
+
+  const target = await findMarked(helper)
+  const delay = helper.options.pressKeyDelay
+
+  if (kind === EDITOR.IFRAME) {
+    await target.inIframe(async body => {
+      const innerKind = await evaluateInFrame(helper, body, detectInsideFrame)
+      if (innerKind === EDITOR.HIDDEN_TEXTAREA) {
+        const focused = await evaluateInFrame(helper, body, focusMarkedInFrameScript)
+        if (!focused) throw new Error('fillField: rich editor target inside iframe did not accept focus.')
+        await body.selectAllAndDelete()
+        await body.typeText(value, { delay })
+      } else {
+        const focused = await evaluateInFrame(helper, body, selectAllInFrameScript)
+        if (!focused) throw new Error('fillField: rich editor target inside iframe did not accept focus.')
+        await body.typeText(value, { delay })
+      }
+    })
+  } else if (kind === EDITOR.HIDDEN_TEXTAREA) {
+    await target.focus()
+    await assertFocused(target)
+    await target.selectAllAndDelete()
+    await target.typeText(value, { delay })
+  } else if (kind === EDITOR.CONTENTEDITABLE) {
+    await target.click()
+    await target.evaluate(selectAllInEditable)
+    await assertFocused(target)
+    await target.typeText(value, { delay })
+  }
+
+  await clearMarker(helper)
+  return true
+}

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/history.js

@@ -2,6 +2,7 @@ import colors from 'chalk'
 import fs from 'fs'
 import path from 'path'
 import output from './output.js'
+import store from './store.js'
 
 /**
  * REPL history records REPL commands and stores them in
@@ -9,8 +10,8 @@ import output from './output.js'
  */
 class ReplHistory {
   constructor() {
-    if (global.output_dir) {
-      this.historyFile = path.join(global.output_dir, 'cli-history')
+    if (store.outputDir) {
+      this.historyFile = path.join(store.outputDir, 'cli-history')
     }
     this.commands = []
   }