codeceptjs 3.4.1 → 3.5.1

package/lib/helper/TestCafe.js

@@ -346,6 +346,34 @@ class TestCafe extends Helper {
     return this.t.resizeWindow(width, height).catch(mapError);
   }
 
+  /**
+   * {{> focus }}
+   *
+   */
+  async focus(locator) {
+    const els = await this._locate(locator);
+    await assertElementExists(els, locator, 'Element to focus');
+    const element = await els.nth(0);
+
+    const focusElement = ClientFunction(() => element().focus(), { boundTestRun: this.t, dependencies: { element } });
+
+    return focusElement();
+  }
+
+  /**
+   * {{> blur }}
+   *
+   */
+  async blur(locator) {
+    const els = await this._locate(locator);
+    await assertElementExists(els, locator, 'Element to blur');
+    const element = await els.nth(0);
+
+    const blurElement = ClientFunction(() => element().blur(), { boundTestRun: this.t, dependencies: { element } });
+
+    return blurElement();
+  }
+
   /**
    * {{> click }}
    *
@@ -410,7 +438,7 @@ class TestCafe extends Helper {
     const el = await els.nth(0);
 
     return this.t
-      .typeText(el, value, { replace: false })
+      .typeText(el, value.toString(), { replace: false })
       .catch(mapError);
   }
 
@@ -792,7 +820,7 @@ class TestCafe extends Helper {
   /**
    * {{> executeScript }}
    *
-   * If a function returns a Promise It will wait for it resolution.
+   * If a function returns a Promise It will wait for its resolution.
    */
   async executeScript(fn, ...args) {
     const browserFn = createClientFunction(fn, args).with({ boundTestRun: this.t });

package/lib/helper/WebDriver.js

@@ -5,6 +5,7 @@ const path = require('path');
 const fs = require('fs');
 
 const Helper = require('@codeceptjs/helper');
+const crypto = require('crypto');
 const stringIncludes = require('../assert/include').includes;
 const { urlEquals, equals } = require('../assert/equal');
 const { debug } = require('../output');
@@ -27,6 +28,10 @@ const {
 const ElementNotFound = require('./errors/ElementNotFound');
 const ConnectionRefused = require('./errors/ConnectionRefused');
 const Locator = require('../locator');
+const { highlightElement } = require('./scripts/highlightElement');
+const store = require('../store');
+const { focusElement } = require('./scripts/focusElement');
+const { blurElement } = require('./scripts/blurElement');
 
 const SHADOW = 'shadow';
 const webRoot = 'body';
@@ -39,7 +44,7 @@ const webRoot = 'body';
  * @typedef WebDriverConfig
  * @type {object}
  * @prop {string} url - base url of website to be tested.
- * @prop {string} browser browser in which to perform testing.
+ * @prop {string} browser - Browser in which to perform testing.
  * @prop {string} [basicAuth] - (optional) the basic authentication to pass to base url. Example: {username: 'username', password: 'password'}
  * @prop {string} [host=localhost] - WebDriver host to connect.
  * @prop {number} [port=4444] - WebDriver port to connect.
@@ -57,6 +62,7 @@ const webRoot = 'body';
  * @prop {object} [desiredCapabilities] Selenium's [desired capabilities](https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities).
  * @prop {boolean} [manualStart=false] - do not start browser before a test, start it manually inside a helper with `this.helpers["WebDriver"]._startBrowser()`.
  * @prop {object} [timeouts] [WebDriver timeouts](http://webdriver.io/docs/timeouts.html) defined as hash.
+ * @prop {boolean} [highlightElement] - highlight the interacting elements
  */
 const config = {};
 
@@ -822,7 +828,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find a checkbox by providing human readable text:
+   * Find a checkbox by providing human-readable text:
    *
    * ```js
    * this.helpers['WebDriver']._locateCheckable('I agree with terms and conditions').then // ...
@@ -835,7 +841,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find a clickable element by providing human readable text:
+   * Find a clickable element by providing human-readable text:
    *
    * ```js
    * const els = await this.helpers.WebDriver._locateClickable('Next page');
@@ -850,7 +856,7 @@ class WebDriver extends Helper {
   }
 
   /**
-   * Find field elements by providing human readable text:
+   * Find field elements by providing human-readable text:
    *
    * ```js
    * this.helpers['WebDriver']._locateFields('Your email').then // ...
@@ -914,6 +920,7 @@ class WebDriver extends Helper {
       assertElementExists(res, locator, 'Clickable element');
     }
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
     return this.browser[clickMethod](getElementId(elem));
   }
 
@@ -932,6 +939,7 @@ class WebDriver extends Helper {
       assertElementExists(res, locator, 'Clickable element');
     }
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
 
     return this.executeScript((el) => {
       if (document.activeElement instanceof HTMLElement) {
@@ -959,6 +967,7 @@ class WebDriver extends Helper {
     }
 
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
     return elem.doubleClick();
   }
 
@@ -1024,6 +1033,7 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
     return elem.setValue(value.toString());
   }
 
@@ -1035,7 +1045,8 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
-    return elem.addValue(value);
+    highlightActiveElement.call(this, elem);
+    return elem.addValue(value.toString());
   }
 
   /**
@@ -1046,6 +1057,7 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, field);
     assertElementExists(res, field, 'Field');
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
     return elem.clearValue(getElementId(elem));
   }
 
@@ -1056,6 +1068,7 @@ class WebDriver extends Helper {
     const res = await findFields.call(this, select);
     assertElementExists(res, select, 'Selectable field');
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
 
     if (!Array.isArray(option)) {
       option = [option];
@@ -1122,6 +1135,7 @@ class WebDriver extends Helper {
     assertElementExists(res, field, 'Checkable');
     const elem = usingFirstElement(res);
     const elementId = getElementId(elem);
+    highlightActiveElement.call(this, elem);
 
     const isSelected = await this.browser.isElementSelected(elementId);
     if (isSelected) return Promise.resolve(true);
@@ -1141,6 +1155,7 @@ class WebDriver extends Helper {
     assertElementExists(res, field, 'Checkable');
     const elem = usingFirstElement(res);
     const elementId = getElementId(elem);
+    highlightActiveElement.call(this, elem);
 
     const isSelected = await this.browser.isElementSelected(elementId);
     if (!isSelected) return Promise.resolve(true);
@@ -1879,6 +1894,7 @@ class WebDriver extends Helper {
    */
   async type(keys, delay = null) {
     if (!Array.isArray(keys)) {
+      keys = keys.toString();
       keys = keys.split('');
     }
     if (delay) {
@@ -1920,6 +1936,30 @@ class WebDriver extends Helper {
     }
   }
 
+  /**
+   * {{> focus }}
+   *
+   */
+  async focus(locator) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator, 'Element to focus');
+    const el = usingFirstElement(els);
+
+    await focusElement(el, this.browser);
+  }
+
+  /**
+   * {{> blur }}
+   *
+   */
+  async blur(locator) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator, 'Element to blur');
+    const el = usingFirstElement(els);
+
+    await blurElement(el, this.browser);
+  }
+
   /**
    * {{> dragAndDrop }}
    * Appium: not tested
@@ -2873,6 +2913,12 @@ function isModifierKey(key) {
   return unicodeModifierKeys.includes(key);
 }
 
+function highlightActiveElement(element) {
+  if (!this.options.enableHighlight && !store.debugMode) return;
+
+  highlightElement(element, this.browser);
+}
+
 function prepareLocateFn(context) {
   if (!context) return this._locate.bind(this);
   return (l) => {

package/lib/helper/scripts/blurElement.js

@@ -0,0 +1,17 @@
+module.exports.blurElement = (element, context) => {
+  const clientSideBlurFn = el => {
+    el.blur();
+  };
+
+  try {
+    // Puppeteer
+    context.evaluate(clientSideBlurFn, element);
+  } catch (e) {
+    // WebDriver
+    try {
+      context.execute(clientSideBlurFn, element);
+    } catch (err) {
+      // ignore
+    }
+  }
+};

package/lib/helper/scripts/focusElement.js

@@ -0,0 +1,17 @@
+module.exports.focusElement = (element, context) => {
+  const clientSideFn = el => {
+    el.focus();
+  };
+
+  try {
+    // Puppeteer
+    context.evaluate(clientSideFn, element);
+  } catch (e) {
+    // WebDriver
+    try {
+      context.execute(clientSideFn, element);
+    } catch (err) {
+      // ignore
+    }
+  }
+};

package/lib/helper/scripts/highlightElement.js

@@ -0,0 +1,20 @@
+module.exports.highlightElement = (element, context) => {
+  const clientSideHighlightFn = el => {
+    const style = '0px 0px 4px 3px rgba(255, 0, 0, 0.7)';
+    const prevStyle = el.style.boxShadow;
+    el.style.boxShadow = style;
+    setTimeout(() => el.style.boxShadow = prevStyle, 2000);
+  };
+
+  try {
+    // Playwright, Puppeteer
+    context.evaluate(clientSideHighlightFn, element);
+  } catch (e) {
+    // WebDriver
+    try {
+      context.execute(clientSideHighlightFn, element);
+    } catch (err) {
+      // ignore
+    }
+  }
+};

package/lib/html.js

@@ -0,0 +1,258 @@
+const { parse, serialize } = require('parse5');
+const { minify } = require('html-minifier');
+
+function minifyHtml(html) {
+  return minify(html, {
+    collapseWhitespace: true,
+    removeComments: true,
+    removeEmptyAttributes: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    collapseBooleanAttributes: true,
+    useShortDoctype: true,
+  }).toString();
+}
+
+const defaultHtmlOpts = {
+  interactiveElements: ['a', 'input', 'button', 'select', 'textarea', 'option'],
+  textElements: ['label', 'h1', 'h2'],
+  allowedAttrs: ['id', 'for', 'class', 'name', 'type', 'value', 'tabindex', 'aria-labelledby', 'aria-label', 'label', 'placeholder', 'title', 'alt', 'src', 'role'],
+  allowedRoles: ['button', 'checkbox', 'search', 'textbox', 'tab'],
+};
+
+function removeNonInteractiveElements(html, opts = {}) {
+  opts = { ...defaultHtmlOpts, ...opts };
+  const {
+    interactiveElements,
+    textElements,
+    allowedAttrs,
+    allowedRoles,
+  } = 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'];
+
+  function isFilteredOut(node) {
+    if (removeElements.includes(node.nodeName)) return true;
+    if (node.attrs) {
+      if (node.attrs.find(attr => attr.name === 'role' && attr.value === 'tooltip')) return true;
+    }
+    return false;
+  }
+
+  // Function to check if an element is interactive
+  function isInteractive(element) {
+    if (element.nodeName === 'input' && element.attrs.find(attr => attr.name === 'type' && attr.value === 'hidden')) return false;
+    if (interactiveElements.includes(element.nodeName)) return true;
+    if (element.attrs) {
+      if (element.attrs.find(attr => attr.name === 'contenteditable')) return true;
+      if (element.attrs.find(attr => attr.name === 'tabindex')) return true;
+      const role = element.attrs.find(attr => attr.name === 'role');
+      if (role && allowedRoles.includes(role.value)) return true;
+    }
+    return false;
+  }
+
+  function hasMeaningfulText(node) {
+    if (textElements.includes(node.nodeName)) return true;
+    return false;
+  }
+
+  function hasInteractiveDescendant(node) {
+    if (!node.childNodes) return false;
+    let result = false;
+
+    for (const childNode of node.childNodes) {
+      if (isInteractive(childNode) || hasMeaningfulText(childNode)) return true;
+      result = result || hasInteractiveDescendant(childNode);
+    }
+
+    return result;
+  }
+
+  // Function to remove non-interactive elements recursively
+  function removeNonInteractive(node) {
+    if (node.nodeName !== '#document') {
+      const parent = node.parentNode;
+      const index = parent.childNodes.indexOf(node);
+
+      if (isFilteredOut(node)) {
+        parent.childNodes.splice(index, 1);
+        return true;
+      }
+
+      // keep texts for interactive elements
+      if ((isInteractive(parent) || hasMeaningfulText(parent)) && node.nodeName === '#text') {
+        node.value = node.value.trim().slice(0, 200);
+        if (!node.value) return false;
+        return true;
+      }
+
+      if (
+        // if parent is interactive, we may need child element to match
+        !isInteractive(parent)
+        && !isInteractive(node)
+        && !hasInteractiveDescendant(node)
+        && !hasMeaningfulText(node)) {
+        parent.childNodes.splice(index, 1);
+        return true;
+      }
+    }
+
+    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(' ');
+        }
+
+        return allowedAttrs.includes(name);
+      });
+    }
+
+    if (node.childNodes) {
+      for (let i = node.childNodes.length - 1; i >= 0; i--) {
+        const childNode = node.childNodes[i];
+        removeNonInteractive(childNode);
+      }
+    }
+    return false;
+  }
+
+  // Remove non-interactive elements starting from the root element
+  removeNonInteractive(document);
+
+  // Serialize the modified document tree back to HTML
+  const serializedHTML = serialize(document);
+
+  return serializedHTML;
+}
+
+function scanForErrorMessages(html, errorClasses = []) {
+  // Parse the HTML into a document tree
+  const document = parse(html);
+
+  // Array to store error messages
+  const errorMessages = [];
+
+  // Function to recursively scan for error classes and messages
+  function scanErrors(node) {
+    if (node.attrs) {
+      const classAttr = node.attrs.find(attr => attr.name === 'class');
+      if (classAttr && classAttr.value) {
+        const classNameChunks = classAttr.value.split(' ');
+        const errorClassFound = errorClasses.some(errorClass => classNameChunks.includes(errorClass));
+        if (errorClassFound && node.childNodes) {
+          const errorMessage = sanitizeTextContent(node);
+          errorMessages.push(errorMessage);
+        }
+      }
+    }
+
+    if (node.childNodes) {
+      for (const childNode of node.childNodes) {
+        scanErrors(childNode);
+      }
+    }
+  }
+
+  // Start scanning for error classes and messages from the root element
+  scanErrors(document);
+
+  return errorMessages;
+}
+
+function sanitizeTextContent(node) {
+  if (node.nodeName === '#text') {
+    return node.value.trim();
+  }
+
+  let sanitizedText = '';
+
+  if (node.childNodes) {
+    for (const childNode of node.childNodes) {
+      sanitizedText += sanitizeTextContent(childNode);
+    }
+  }
+
+  return sanitizedText;
+}
+
+function buildPath(node, path = '') {
+  const tag = node.nodeName;
+  let attributes = '';
+
+  if (node.attrs) {
+    attributes = node.attrs
+      .map(attr => `${attr.name}="${attr.value}"`)
+      .join(' ');
+  }
+
+  if (!tag.startsWith('#') && tag !== 'body' && tag !== 'html') {
+    path += `<${node.nodeName}${node.attrs ? ` ${attributes}` : ''}>`;
+  }
+
+  if (!node.childNodes) return path;
+
+  const children = node.childNodes.filter(child => !child.nodeName.startsWith('#'));
+
+  if (children.length) {
+    return buildPath(children[children.length - 1], path);
+  }
+  return path;
+}
+
+function splitByChunks(text, chunkSize) {
+  chunkSize -= 20;
+  const chunks = [];
+  for (let i = 0; i < text.length; i += chunkSize) {
+    chunks.push(text.slice(i, i + chunkSize));
+  }
+
+  const regex = /<\s*\w+(?:\s+\w+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^>\s]+)))*\s*$/;
+
+  // append tag to chunk if it was split out
+  for (const index in chunks) {
+    const nextIndex = parseInt(index, 10) + 1;
+    if (!chunks[nextIndex]) break;
+
+    const currentChunk = chunks[index];
+    const nextChunk = chunks[nextIndex];
+
+    const lastTag = currentChunk.match(regex);
+    if (lastTag) {
+      chunks[nextIndex] = lastTag[0] + nextChunk;
+    }
+
+    const path = buildPath(parse(currentChunk));
+    if (path) {
+      chunks[nextIndex] = path + chunks[nextIndex];
+    }
+
+    if (chunks[nextIndex].includes('<html')) continue;
+    chunks[nextIndex] = `<html><body>${chunks[nextIndex]}</body></html>`;
+  }
+
+  return chunks.map(chunk => chunk.trim());
+}
+
+module.exports = {
+  scanForErrorMessages,
+  removeNonInteractiveElements,
+  splitByChunks,
+  minifyHtml,
+};

package/lib/interfaces/gherkin.js

@@ -1,6 +1,7 @@
 const Gherkin = require('@cucumber/gherkin');
 const Messages = require('@cucumber/messages');
 const { Context, Suite, Test } = require('mocha');
+const debug = require('debug')('codeceptjs:bdd');
 
 const { matchStep } = require('./bdd');
 const event = require('../event');
@@ -39,7 +40,9 @@ module.exports = (text, file) => {
     for (const step of steps) {
       const metaStep = new Step.MetaStep(null, step.text);
       metaStep.actor = step.keyword.trim();
+      let helperStep;
       const setMetaStep = (step) => {
+        helperStep = step;
         if (step.metaStep) {
           if (step.metaStep === metaStep) {
             return;
@@ -67,11 +70,15 @@ module.exports = (text, file) => {
       step.startTime = Date.now();
       step.match = fn.line;
       event.emit(event.bddStep.before, step);
+      event.emit(event.bddStep.started, metaStep);
       event.dispatcher.prependListener(event.step.before, setMetaStep);
       try {
+        debug(`Step '${step.text}' started...`);
         await fn(...fn.params);
+        debug('Step passed');
         step.status = 'passed';
       } catch (err) {
+        debug(`Step failed: ${err?.message}`);
         step.status = 'failed';
         step.err = err;
         throw err;
@@ -79,6 +86,7 @@ module.exports = (text, file) => {
         step.endTime = Date.now();
         event.dispatcher.removeListener(event.step.before, setMetaStep);
       }
+      event.emit(event.bddStep.finished, metaStep);
       event.emit(event.bddStep.after, step);
     }
   };

package/lib/listener/retry.js

@@ -44,6 +44,7 @@ module.exports = function () {
     if (!retryConfig) return;
 
     if (Number.isInteger(+retryConfig)) {
+      if (test.retries() === -1) test.retries(retryConfig);
       return;
     }
 
@@ -59,7 +60,7 @@ module.exports = function () {
       }
 
       if (config.Scenario) {
-        if (isNotSet(test.retries())) test.retries(config.Scenario);
+        if (test.retries() === -1) test.retries(config.Scenario);
         output.log(`Retries: ${config.Scenario}`);
       }
     }