codeceptjs 3.4.1 → 3.5.1-2.beta.7

package/lib/helper/errors/ElementNotFound.js

@@ -5,7 +5,8 @@ const Locator = require('../../locator');
  */
 class ElementNotFound {
   constructor(
-    locator, prefixMessage = 'Element',
+    locator,
+    prefixMessage = 'Element',
     postfixMessage = 'was not found by text|CSS|XPath',
   ) {
     if (typeof locator === 'object') {

package/lib/helper/extras/PlaywrightReactVueLocator.js

@@ -0,0 +1,38 @@
+async function findReact(matcher, locator) {
+  let _locator = `_react=${locator.react}`;
+  let props = '';
+
+  if (locator.props) {
+    props += propBuilder(locator.props);
+    _locator += props;
+  }
+  return matcher.locator(_locator).all();
+}
+
+async function findVue(matcher, locator) {
+  let _locator = `_vue=${locator.vue}`;
+  let props = '';
+
+  if (locator.props) {
+    props += propBuilder(locator.props);
+    _locator += props;
+  }
+  return matcher.locator(_locator).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}"]`;
+    }
+  }
+  return _props;
+}
+
+module.exports = { findReact, findVue };

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 {
+    // Puppeteer
+    context.evaluate(clientSideHighlightFn, element).catch(err => console.error(err));
+  } 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-terser');
+
+async function minifyHtml(html) {
+  return minify(html, {
+    collapseWhitespace: true,
+    removeComments: true,
+    removeEmptyAttributes: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    collapseBooleanAttributes: true,
+    useShortDoctype: true,
+  });
+}
+
+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/bdd.js

@@ -30,7 +30,7 @@ const parameterTypeRegistry = new ParameterTypeRegistry();
 const matchStep = (step) => {
   for (const stepName in steps) {
     if (stepName.indexOf('/') === 0) {
-      const regExpArr = stepName.match(new RegExp('^/(.*?)/([gimy]*)$')) || [];
+      const regExpArr = stepName.match(/^\/(.*?)\/([gimy]*)$/) || [];
       const res = step.match(new RegExp(regExpArr[1], regExpArr[2]));
       if (res) {
         const fn = steps[stepName];

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');
@@ -17,6 +18,11 @@ parser.stopAtFirstError = false;
 
 module.exports = (text, file) => {
   const ast = parser.parse(text);
+  let currentLanguage;
+
+  if (ast.feature) {
+    currentLanguage = getTranslation(ast.feature.language);
+  }
 
   if (!ast.feature) {
     throw new Error(`No 'Features' available in Gherkin '${file}' provided!`);
@@ -39,7 +45,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 +75,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 +91,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);
     }
   };
@@ -88,7 +101,7 @@ module.exports = (text, file) => {
       suite.beforeEach('Before', scenario.injected(async () => runSteps(child.background.steps), suite, 'before'));
       continue;
     }
-    if (child.scenario && child.scenario.keyword === 'Scenario Outline') {
+    if (child.scenario && (currentLanguage ? child.scenario.keyword === currentLanguage.contexts.ScenarioOutline : child.scenario.keyword === 'Scenario Outline')) {
       for (const examples of child.scenario.examples) {
         const fields = examples.tableHeader.cells.map(c => c.value);
         for (const example of examples.tableBody) {
@@ -106,7 +119,14 @@ module.exports = (text, file) => {
             });
           }
           const tags = child.scenario.tags.map(t => t.name).concat(examples.tags.map(t => t.name));
-          const title = `${child.scenario.name} ${JSON.stringify(current)} ${tags.join(' ')}`.trim();
+          let title = `${child.scenario.name} ${JSON.stringify(current)} ${tags.join(' ')}`.trim();
+
+          for (const [key, value] of Object.entries(current)) {
+            if (title.includes(`<${key}>`)) {
+              title = title.replace(JSON.stringify(current), '').replace(`<${key}>`, value);
+            }
+          }
+
           const test = new Test(title, async () => runSteps(addExampleInTable(exampleSteps, current)));
           test.tags = suite.tags.concat(tags);
           test.file = file;
@@ -133,7 +153,7 @@ function transformTable(table) {
   let str = '';
   for (const id in table.rows) {
     const cells = table.rows[id].cells;
-    str += cells.map(c => c.value).map(c => c.slice(0, 15).padEnd(15)).join(' | ');
+    str += cells.map(c => c.value).map(c => c.padEnd(15)).join(' | ');
     str += '\n';
   }
   return str;
@@ -154,3 +174,17 @@ function addExampleInTable(exampleSteps, placeholders) {
   }
   return steps;
 }
+
+function getTranslation(language) {
+  const translations = Object.keys(require('../../translations'));
+
+  for (const availableTranslation of translations) {
+    if (!language) {
+      break;
+    }
+
+    if (availableTranslation.includes(language)) {
+      return require('../../translations')[availableTranslation];
+    }
+  }
+}

package/lib/interfaces/scenarioConfig.js

@@ -35,6 +35,7 @@ class ScenarioConfig {
    * @returns {this}
    */
   retry(retries) {
+    if (process.env.SCENARIO_ONLY) retries = -retries;
     this.test.retries(retries);
     return this;
   }

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}`);
       }
     }

package/lib/locator.js

@@ -1,4 +1,4 @@
-const cssToXPath = require('css-to-xpath');
+const cssToXPath = require('csstoxpath');
 const { sprintf } = require('sprintf-js');
 
 const { xpathLocator } = require('./utils');
@@ -158,11 +158,12 @@ class Locator {
   }
 
   /**
+   * @param {string} [pseudoSelector] CSS to XPath extension pseudo: https://www.npmjs.com/package/csstoxpath?activeTab=explore#extension-pseudos
    * @returns {string}
    */
-  toXPath() {
+  toXPath(pseudoSelector = '') {
     if (this.isXPath()) return this.value;
-    if (this.isCSS()) return cssToXPath(this.value);
+    if (this.isCSS()) return cssToXPath(`${this.value}${pseudoSelector}`);
 
     throw new Error('Can\'t be converted to XPath');
   }
@@ -243,12 +244,24 @@ class Locator {
   }
 
   /**
+   * Find an element containing a text
    * @param {string} text
    * @returns {Locator}
    */
   withText(text) {
     text = xpathLocator.literal(text);
-    const xpath = sprintf('%s[%s]', this.toXPath(), `contains(., ${text})`);
+    const xpath = this.toXPath(`:text-contains-case(${text})`);
+    return new Locator({ xpath });
+  }
+
+  /**
+   * Find an element with exact text
+   * @param {string} text
+   * @returns {Locator}
+   */
+  withTextEquals(text) {
+    text = xpathLocator.literal(text);
+    const xpath = this.toXPath(`:text-case(${text})`);
     return new Locator({ xpath });
   }
 

package/lib/mochaFactory.js

@@ -97,7 +97,8 @@ class MochaFactory {
     const attributes = Object.getOwnPropertyDescriptor(reporterOptions, 'codeceptjs-cli-reporter');
     if (reporterOptions['codeceptjs-cli-reporter'] && attributes) {
       Object.defineProperty(
-        reporterOptions, 'codeceptjs/lib/cli',
+        reporterOptions,
+        'codeceptjs/lib/cli',
         attributes,
       );
       delete reporterOptions['codeceptjs-cli-reporter'];

package/lib/output.js

@@ -106,7 +106,7 @@ module.exports = {
     if (!step) return;
     // Avoid to print non-gherkin steps, when gherkin is running for --steps mode
     if (outputLevel === 1) {
-      if (step.hasBDDAncestor()) {
+      if (typeof step === 'object' && step.hasBDDAncestor()) {
         return;
       }
     }