codeceptjs 3.4.0 → 3.5.0

package/lib/helper/REST.js

@@ -34,7 +34,8 @@ const config = {};
  *       endpoint: 'http://site.com/api',
  *       prettyPrintJson: true,
  *       onRequest: (request) => {
- *       request.headers.auth = '123';
+ *         request.headers.auth = '123';
+ *       }
  *     }
  *   }
  *}
@@ -136,6 +137,15 @@ class REST extends Helper {
       request.auth = this.headers.auth;
     }
 
+    if (typeof request.data === 'object') {
+      const returnedValue = {};
+      for (const [key, value] of Object.entries(request.data)) {
+        returnedValue[key] = value;
+        if (value instanceof Secret) returnedValue[key] = value.getMasked();
+      }
+      _debugRequest.data = returnedValue;
+    }
+
     if (request.data instanceof Secret) {
       _debugRequest.data = '*****';
       request.data = (typeof request.data === 'object' && !(request.data instanceof Secret)) ? { ...request.data.toString() } : request.data.toString();
@@ -198,7 +208,7 @@ class REST extends Helper {
    * ```
    *
    * @param {*} url
-   * @param {object} [headers={}] - the headers object to be sent. By default it is sent as an empty object
+   * @param {object} [headers={}] - the headers object to be sent. By default, it is sent as an empty object
    *
    * @returns {Promise<*>} response
    */
@@ -222,8 +232,8 @@ class REST extends Helper {
    * ```
    *
    * @param {*} url
-   * @param {*} [payload={}] - the payload to be sent. By default it is sent as an empty object
-   * @param {object} [headers={}] - the headers object to be sent. By default it is sent as an empty object
+   * @param {*} [payload={}] - the payload to be sent. By default, it is sent as an empty object
+   * @param {object} [headers={}] - the headers object to be sent. By default, it is sent as an empty object
    *
    * @returns {Promise<*>} response
    */
@@ -317,7 +327,7 @@ class REST extends Helper {
    * ```
    *
    * @param {*} url
-   * @param {object} [headers={}] - the headers object to be sent. By default it is sent as an empty object
+   * @param {object} [headers={}] - the headers object to be sent. By default, it is sent as an empty object
    *
    * @returns {Promise<*>} response
    */

package/lib/helper/TestCafe.js

@@ -410,7 +410,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);
   }
 

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,8 @@ 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 SHADOW = 'shadow';
 const webRoot = 'body';
@@ -39,7 +42,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 +60,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 +826,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 +839,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 +854,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 +918,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 +937,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 +965,7 @@ class WebDriver extends Helper {
     }
 
     const elem = usingFirstElement(res);
+    highlightActiveElement.call(this, elem);
     return elem.doubleClick();
   }
 
@@ -1024,6 +1031,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 +1043,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 +1055,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 +1066,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 +1133,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 +1153,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 +1892,7 @@ class WebDriver extends Helper {
    */
   async type(keys, delay = null) {
     if (!Array.isArray(keys)) {
+      keys = keys.toString();
       keys = keys.split('');
     }
     if (delay) {
@@ -2873,6 +2887,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/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/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/pause.js

@@ -1,9 +1,12 @@
 const colors = require('chalk');
 const readline = require('readline');
+const ora = require('ora-classic');
+const debug = require('debug')('codeceptjs:pause');
 
 const container = require('./container');
 const history = require('./history');
 const store = require('./store');
+const AiAssistant = require('./ai');
 const recorder = require('./recorder');
 const event = require('./event');
 const output = require('./output');
@@ -15,6 +18,8 @@ let nextStep;
 let finish;
 let next;
 let registeredVariables = {};
+const aiAssistant = new AiAssistant();
+
 /**
  * Pauses test execution and starts interactive shell
  */
@@ -45,6 +50,14 @@ function pauseSession(passedObject = {}) {
     output.print(colors.yellow(` - Press ${colors.bold('TAB')} twice to see all available commands`));
     output.print(colors.yellow(` - Type ${colors.bold('exit')} + Enter to exit the interactive shell`));
     output.print(colors.yellow(` - Prefix ${colors.bold('=>')} to run js commands ${colors.bold(vars)}`));
+
+    if (aiAssistant.isEnabled) {
+      output.print(colors.blue(` ${colors.bold('OpenAI is enabled! (experimental)')} Write what you want and make OpenAI run it`));
+      output.print(colors.blue(' Please note, only HTML fragments with interactive elements are sent to OpenAI'));
+      output.print(colors.blue(' Ideas: ask it to fill forms for you or to click'));
+    } else {
+      output.print(colors.blue(` Enable OpenAI assistant by setting ${colors.bold('OPENAI_API_KEY')} env variable`));
+    }
   }
   rl = readline.createInterface(process.stdin, process.stdout, completer);
 
@@ -59,9 +72,10 @@ function pauseSession(passedObject = {}) {
 }
 
 /* eslint-disable */
-function parseInput(cmd) {
+async function parseInput(cmd) {
   rl.pause();
   next = false;
+  recorder.session.start('pause');
   store.debugMode = false;
   if (cmd === '') next = true;
   if (!cmd || cmd === 'resume' || cmd === 'exit') {
@@ -74,37 +88,78 @@ function parseInput(cmd) {
   for (const k of Object.keys(registeredVariables)) {
     eval(`var ${k} = registeredVariables['${k}'];`); // eslint-disable-line no-eval
   }
+
+  let executeCommand = Promise.resolve();
+
+  const getCmd = () => {
+    debug('Command:', cmd)
+    return cmd;
+  };
+
   store.debugMode = true;
   let isCustomCommand = false;
   let lastError = null;
+  let isAiCommand = false;
+  let $res;
   try {
     const locate = global.locate; // enable locate in this context
     const I = container.support('I');
     if (cmd.trim().startsWith('=>')) {
       isCustomCommand = true;
       cmd = cmd.trim().substring(2, cmd.length);
+    } else if (aiAssistant.isEnabled && !cmd.match(/^\w+\(/) && cmd.includes(' ')) {
+      const currentOutputLevel = output.level();
+      output.level(0);
+      const res = I.grabSource();
+      isAiCommand = true;
+      executeCommand = executeCommand.then(async () => {
+        try {
+          const html = await res; 
+          aiAssistant.setHtmlContext(html);
+        } catch (err) {
+          output.print(output.styles.error(' ERROR '), 'Can\'t get HTML context', err.stack);
+          return;
+        } finally {
+          output.level(currentOutputLevel);          
+        }
+        // aiAssistant.mockResponse("```js\nI.click('Sign in');\n```");
+        const spinner = ora("Processing OpenAI request...").start();
+        cmd = await aiAssistant.writeSteps(cmd);
+        spinner.stop();
+        output.print('');
+        output.print(colors.blue(aiAssistant.getResponse()));
+        output.print('');
+        return cmd;
+      })
     } else {
       cmd = `I.${cmd}`;
     }
-    const executeCommand = eval(cmd); // eslint-disable-line no-eval
-
-    const result = executeCommand instanceof Promise ? executeCommand : Promise.resolve(executeCommand);
-    result.then((val) => {
-      if (isCustomCommand) {
-        console.log(val);
-        return;
-      }
-      if (cmd.startsWith('I.see') || cmd.startsWith('I.dontSee')) {
-        output.print(output.styles.success('  OK  '), cmd);
-        return;
-      }
-      if (cmd.startsWith('I.grab')) {
-        output.print(output.styles.debug(val));
-      }
+    executeCommand = executeCommand.then(async () => {
+      const cmd = getCmd();
+      if (!cmd) return;
+      return eval(cmd); // eslint-disable-line no-eval
     }).catch((err) => {
+      debug(err);
+      if (isAiCommand) return;
       if (!lastError) output.print(output.styles.error(' ERROR '), err.message);
+      debug(err.stack)
+
       lastError = err.message;
-    });
+    })
+
+    const val = await executeCommand;
+    
+    if (isCustomCommand) {
+      if (val !== undefined) console.log('Result', '$res=', val); // eslint-disable-line
+      $res = val;
+    }
+    
+    if (cmd?.startsWith('I.see') || cmd?.startsWith('I.dontSee')) {
+      output.print(output.styles.success('  OK  '), cmd);
+    }
+    if (cmd?.startsWith('I.grab')) {
+      output.print(output.styles.debug(val));
+    }
 
     history.push(cmd); // add command to history when successful
   } catch (err) {
@@ -117,6 +172,7 @@ function parseInput(cmd) {
     // pop latest command from history because it failed
     history.pop();
 
+    if (isAiCommand) return;
     if (!lastError) output.print(output.styles.error(' FAIL '), msg);
     lastError = err.message;
   });