codeceptjs 4.0.0-rc.9 → 4.0.0

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/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 = []
   }

package/lib/html.js

@@ -1,5 +1,8 @@
 import { parse, serialize } from 'parse5'
 import { minify } from 'html-minifier-terser'
+import beautify from 'js-beautify'
+
+const { html: html_beautify } = beautify
 
 async function minifyHtml(html) {
   return minify(html, {
@@ -14,6 +17,62 @@ async function minifyHtml(html) {
   })
 }
 
+const TRASH_HTML_CLASSES = /^(text-|color-|flex-|float-|v-|ember-|d-|border-)/
+
+function isTrashClass(className) {
+  if (!className) return true
+  if (/\d/.test(className)) return true
+  if (TRASH_HTML_CLASSES.test(className)) return true
+  if (/(:|__)/.test(className)) return true
+  return false
+}
+
+function filterClassValue(value) {
+  return (value || '')
+    .split(/\s+/)
+    .filter(c => c && !isTrashClass(c))
+    .join(' ')
+}
+
+const DROP_TAGS = new Set(['style', 'noscript'])
+const DROP_ATTRS = new Set(['style'])
+
+function cleanHtml(html) {
+  const document = parse(html)
+
+  function walk(node) {
+    if (!node) return false
+
+    if (DROP_TAGS.has(node.nodeName) || (node.nodeName === 'script' && !(node.attrs || []).some(a => a.name === 'src'))) {
+      const parent = node.parentNode
+      const idx = parent.childNodes.indexOf(node)
+      if (idx >= 0) parent.childNodes.splice(idx, 1)
+      return true
+    }
+
+    if (node.attrs) {
+      node.attrs = node.attrs.filter(attr => {
+        if (DROP_ATTRS.has(attr.name)) return false
+        if (attr.name === 'class') {
+          attr.value = filterClassValue(attr.value)
+          if (!attr.value) return false
+        }
+        return true
+      })
+    }
+
+    if (node.childNodes) {
+      for (let i = node.childNodes.length - 1; i >= 0; i--) {
+        walk(node.childNodes[i])
+      }
+    }
+    return false
+  }
+
+  walk(document)
+  return serialize(document)
+}
+
 const defaultHtmlOpts = {
   interactiveElements: ['a', 'input', 'button', 'select', 'textarea', 'option'],
   textElements: ['label', 'h1', 'h2'],
@@ -28,7 +87,6 @@ function removeNonInteractiveElements(html, opts = {}) {
   // Parse the HTML into a document tree
   const document = parse(html)
 
-  const trashHtmlClasses = /^(text-|color-|flex-|float-|v-|ember-|d-|border-)/
   // Array to store interactive elements
   const removeElements = ['path', 'script']
 
@@ -103,21 +161,10 @@ function removeNonInteractiveElements(html, opts = {}) {
     if (node.attrs) {
       // Filter and keep allowed attributes, accessibility attributes
       node.attrs = node.attrs.filter(attr => {
-        const { name, value } = attr
-        if (name === 'class') {
-          // Remove classes containing digits
-          attr.value = value
-            .split(' ')
-            // remove classes containing digits/
-            .filter(className => !/\d/.test(className))
-            // remove popular trash classes
-            .filter(className => !className.match(trashHtmlClasses))
-            // remove classes with : and __ in them
-            .filter(className => !className.match(/(:|__)/))
-            .join(' ')
+        if (attr.name === 'class') {
+          attr.value = filterClassValue(attr.value)
         }
-
-        return allowedAttrs.includes(name)
+        return allowedAttrs.includes(attr.name)
       })
     }
 
@@ -258,4 +305,31 @@ function simplifyHtmlElement(html, maxLength = 300) {
   return html
 }
 
-export { scanForErrorMessages, removeNonInteractiveElements, splitByChunks, minifyHtml, simplifyHtmlElement }
+async function formatHtml(html) {
+  let processed = html
+  try {
+    processed = await minifyHtml(processed)
+  } catch (e) {
+    // keep raw html if minification fails
+  }
+  try {
+    processed = cleanHtml(processed)
+  } catch (e) {
+    // keep minified html if cleaning fails
+  }
+  try {
+    return html_beautify(processed, {
+      indent_size: 2,
+      wrap_line_length: 0,
+      preserve_newlines: false,
+      end_with_newline: false,
+      // Force every element onto its own line so line numbers in trace HTML
+      // map 1:1 to elements (consumed by codeceptq for AI/agent debugging).
+      inline: [],
+    })
+  } catch (e) {
+    return processed
+  }
+}
+
+export { scanForErrorMessages, removeNonInteractiveElements, splitByChunks, minifyHtml, simplifyHtmlElement, formatHtml, cleanHtml, isTrashClass }

package/lib/index.js

@@ -23,6 +23,10 @@ import heal from './heal.js'
 import ai from './ai.js'
 import Workers from './workers.js'
 import Secret, { secret } from './secret.js'
+import session from './session.js'
+
+const inject = (name) => container.support(name)
+const locate = (query) => locator.build(query)
 
 export default {
   /** @type {typeof CodeceptJS.Codecept} */
@@ -67,7 +71,11 @@ export default {
   Secret,
   /** @type {typeof CodeceptJS.secret} */
   secret,
+
+  session,
+  inject,
+  locate,
 }
 
 // Named exports for ESM compatibility
-export { codecept, output, container, event, recorder, config, actor, helper, pause, within, dataTable, dataTableArgument, store, locator, heal, ai, Workers, Secret, secret }
+export { codecept, output, container, event, recorder, config, actor, helper, pause, within, dataTable, dataTableArgument, store, locator, heal, ai, Workers, Secret, secret, session, inject, locate }

package/lib/listener/config.js

@@ -2,16 +2,18 @@ import event from '../event.js'
 import recorder from '../recorder.js'
 import { deepMerge, deepClone, ucfirst } from '../utils.js'
 import output from '../output.js'
+import container from '../container.js'
 
 /**
  * Enable Helpers to listen to test events
  */
+let initialized = false
+
 export default function () {
-  // Use global flag to prevent duplicate initialization across module re-imports
-  if (global.__codeceptConfigListenerInitialized) {
+  if (initialized) {
     return
   }
-  global.__codeceptConfigListenerInitialized = true
+  initialized = true
 
   enableDynamicConfigFor('suite')
   enableDynamicConfigFor('test')
@@ -20,7 +22,7 @@ export default function () {
     event.dispatcher.on(event[type].before, (context = {}) => {
       // Get helpers dynamically at runtime, not at initialization time
       // This ensures we get the actual helper instances, not placeholders
-      const helpers = global.container.helpers()
+      const helpers = container.helpers()
 
       function updateHelperConfig(helper, config) {
         // Guard against undefined or invalid helpers

package/lib/listener/emptyRun.js

@@ -1,6 +1,7 @@
 import figures from 'figures'
 import event from '../event.js'
 import output from '../output.js'
+import container from '../container.js'
 import { searchWithFusejs } from '../utils.js'
 
 export default function () {
@@ -12,7 +13,7 @@ export default function () {
 
   event.dispatcher.on(event.all.result, () => {
     if (isEmptyRun) {
-      const mocha = global.container.mocha()
+      const mocha = container.mocha()
 
       if (mocha.options.grep) {
         output.print()

package/lib/listener/helpers.js

@@ -3,11 +3,12 @@ import event from '../event.js'
 import recorder from '../recorder.js'
 import store from '../store.js'
 import output from '../output.js'
+import container from '../container.js'
 /**
  * Enable Helpers to listen to test events
  */
 export default function () {
-  const helpers = global.container.helpers()
+  const helpers = container.helpers()
 
   const runHelpersHook = (hook, param) => {
     if (store.dryRun) return
@@ -29,11 +30,13 @@ export default function () {
   event.dispatcher.on(event.suite.before, suite => {
     // if (suite.parent) return; // only for root suite
     runAsyncHelpersHook('_beforeSuite', suite, true)
+    recorder.catch()
   })
 
   event.dispatcher.on(event.suite.after, suite => {
     // if (suite.parent) return; // only for root suite
     runAsyncHelpersHook('_afterSuite', suite, true)
+    recorder.catch()
   })
 
   event.dispatcher.on(event.test.started, test => {

package/lib/listener/mocha.js

@@ -1,10 +1,11 @@
 import event from '../event.js'
+import container from '../container.js'
 
 export default function () {
   let mocha
 
   event.dispatcher.on(event.all.before, () => {
-    mocha = global.container.mocha()
+    mocha = container.mocha()
   })
 
   event.dispatcher.on(event.test.passed, test => {

package/lib/listener/pageobjects.js

@@ -0,0 +1,43 @@
+import event from '../event.js'
+import recorder from '../recorder.js'
+import store from '../store.js'
+import container from '../container.js'
+import { resetBeforeCalledSet, getBeforeCalledSet } from '../container.js'
+
+export default function () {
+  const runAsyncSupportHook = (hook, param, force) => {
+    if (store.dryRun) return
+    const support = container.supportObjects()
+    Object.keys(support).forEach(key => {
+      if (key === 'I') return
+      const obj = support[key]
+      if (!obj || typeof obj !== 'object' || !obj[hook]) return
+      recorder.add(`pageobject ${key}.${hook}()`, () => obj[hook](param), force, false)
+    })
+  }
+
+  event.dispatcher.on(event.test.started, () => {
+    resetBeforeCalledSet()
+  })
+
+  event.dispatcher.on(event.test.after, () => {
+    if (store.dryRun) return
+    const support = container.supportObjects()
+    const called = getBeforeCalledSet()
+    called.forEach(name => {
+      const obj = support[name]
+      if (obj && obj._after) {
+        recorder.add(`pageobject ${name}._after()`, () => obj._after(), true, false)
+      }
+    })
+    recorder.catchWithoutStop(() => {})
+  })
+
+  event.dispatcher.on(event.suite.after, suite => {
+    runAsyncSupportHook('_afterSuite', suite, true)
+  })
+
+  event.dispatcher.on(event.suite.before, suite => {
+    runAsyncSupportHook('_beforeSuite', suite, true)
+  })
+}

package/lib/listener/result.js

@@ -1,11 +1,12 @@
 import event from '../event.js'
+import container from '../container.js'
 
 export default function () {
   event.dispatcher.on(event.hook.failed, err => {
-    global.container.result().addStats({ failedHooks: 1 })
+    container.result().addStats({ failedHooks: 1 })
   })
 
   event.dispatcher.on(event.test.before, test => {
-    global.container.result().addTest(test)
+    container.result().addTest(test)
   })
 }