@checksum-ai/runtime 1.1.51 → 1.1.53-beta

package/checksum-root/checksum.config.ts

@@ -14,38 +14,27 @@ export default getChecksumConfig({
   apiKey: "<API key>",
 
   /**
-   * This is the base URL of the tested app. E.g. https://example.com. URLs in the tests will be relative to the base URL.
+   * Define your test run environments and test users within each environment.
+   * The environments must be aligned with those set here:
+   * https://app.checksum.ai/#/settings/
    */
-  baseURL: "<base URL>",
-
-  /**
-   * Insert the account's username that will be used
-   * to login into your testing environment
-   */
-  username: "<username>",
-
-  /**
-   * Insert the account's password that will be used
-   * to login into your testing environment
-   */
-  password: "<password>",
-
-  /**
-   * The credentials of the users that will be used to login into your testing environment
-   * Uncomment if you require support for multiple users
-   */
-  // users: [
-  //   {
-  //     role: "host",
-  //     username: "<host username>",
-  //     password: "<host password>",
-  //   },
-  //   {
-  //     role: "guest",
-  //     username: "<guest username>",
-  //     password: "<guest password>",
-  //   },
-  // ],
+  environments: [
+    {
+      name: "<The name of the environment>",
+      baseURL:
+        "<The base URL of the tested app. e.g. https://example.com. URLs in the tests will be relative to the base URL>",
+      loginURL: "<The URL of the login page>",
+      default: true,
+      users: [
+        {
+          role: "<The role of the user, may be undefined in case of single user>",
+          username: "<username>",
+          password: "<password>",
+          default: true,
+        },
+      ],
+    },
+  ],
 
   options: {
     /**

package/checksumlib.js

@@ -7598,9 +7598,9 @@
         case Node.TEXT_NODE:
           return node2.nodeValue;
         case Node.CDATA_SECTION_NODE:
-          return includeCDATA ? `<![CDATA[${node2.nodeValue}]]>` : "";
+          return includeCDATA && node2.nodeValue.trim().length > 0 ? `<![CDATA[${node2.nodeValue}]]>` : "";
         case Node.COMMENT_NODE:
-          return includeComments ? `<!--${node2.nodeValue}-->` : "";
+          return includeComments && node2.nodeValue.trim().length > 0 ? `<!--${node2.nodeValue}-->` : "";
         default:
           return "";
       }
@@ -29412,14 +29412,74 @@
 
   // ../browser-lib/src/session-record-replay/session-replayer.ts
   var import_await_sleep3 = __toESM(require_await_sleep());
+
+  // ../browser-lib/src/session-record-replay/replayer-listeners-manager.ts
+  var ReplayerListenersManager = class {
+    constructor() {
+      this._replayingState = "Paused" /* Paused */;
+      // Internal state for isShowing
+      this.listeners = [];
+    }
+    static {
+      __name(this, "ReplayerListenersManager");
+    }
+    // Listeners array
+    // Setter for isShowing with listener notification
+    set replayingState(value) {
+      this._replayingState = value;
+      this.notifyListeners();
+    }
+    // Add a listener to observe changes to isShowing
+    addListener(listener) {
+      this.listeners.push(listener);
+    }
+    // Remove a listener
+    removeListener(listener) {
+      this.listeners = this.listeners.filter((l2) => l2 !== listener);
+    }
+    // Wrapper function to handle loading state
+    async wrapWithLoadingState(fn, loadingCompletedState = "Paused" /* Paused */) {
+      this.replayingState = "Processing" /* Processing */;
+      return new Promise((resolve2, reject) => {
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            fn().then((result2) => {
+              resolve2(result2);
+            }).catch((error) => {
+              reject(error);
+            }).finally(() => {
+              this.replayingState = loadingCompletedState;
+            });
+          }, 0);
+        });
+      });
+    }
+    // Notify all listeners of the state change
+    notifyListeners() {
+      this.listeners.forEach((listener) => listener(this._replayingState));
+    }
+  };
+
+  // ../browser-lib/src/session-record-replay/session-replayer.ts
   var DEBUG_MODE = false;
   var SessionReplayer = class {
     constructor(config = {}) {
-      // array of events to init replayer
-      this.eventsBuffer = [];
+      this.initialEventsBuffer = [];
       this.config = {
         enableInteract: false
       };
+      this.overlayElement = null;
+      this.timer = null;
+      this.animationFrameStepHandler = {
+        wait: /* @__PURE__ */ __name((callback) => requestAnimationFrame(callback), "wait"),
+        cancel: /* @__PURE__ */ __name((id) => cancelAnimationFrame(id), "cancel")
+      };
+      this.timoutStepHandler = {
+        wait: /* @__PURE__ */ __name((callback) => {
+          return setTimeout(callback, 100);
+        }, "wait"),
+        cancel: /* @__PURE__ */ __name((id) => clearTimeout(id), "cancel")
+      };
       this.stop = /* @__PURE__ */ __name(() => {
         try {
           if (this.replayer) {
@@ -29442,6 +29502,7 @@
         castedEvents: []
       };
       this.config = { ...this.config, ...config };
+      this.replayerListenersManager = new ReplayerListenersManager();
     }
     static {
       __name(this, "SessionReplayer");
@@ -29487,18 +29548,53 @@
         }
       });
     }
+    getCurrentTimestamp() {
+      try {
+        return this.replayer.getCurrentTime() + this.firstEvent.timestamp;
+      } catch (e2) {
+        return 0;
+      }
+    }
+    monitorTime(targetTime, onTargetHook, stepHandler = this.animationFrameStepHandler) {
+      const stopTimer = /* @__PURE__ */ __name(() => {
+        if (this.timer) {
+          stepHandler.cancel(this.timer);
+          this.timer = null;
+        }
+      }, "stopTimer");
+      stopTimer();
+      const update = /* @__PURE__ */ __name(() => {
+        const currentTime = this.replayer.getCurrentTime();
+        if (targetTime && currentTime >= targetTime) {
+          console.log(
+            `[SessionReplayer] achieved target time: ${targetTime} with current time ${currentTime}`,
+            Date.now()
+          );
+          onTargetHook();
+          stopTimer();
+          return;
+        } else {
+          console.log(
+            `[SessionReplayer] monitoring time, current: ${currentTime}; target: ${targetTime}...`
+          );
+        }
+        const meta = this.replayer.getMetaData();
+        if (currentTime < meta.totalTime) {
+          this.timer = stepHandler.wait(update);
+        }
+      }, "update");
+      this.timer = stepHandler.wait(update);
+    }
     seek(ts, pause = true) {
       return new Promise((resolve2) => {
         const delta = ts - this.firstEvent.timestamp;
-        this.replayer.play(delta);
-        if (pause) {
-          setTimeout(() => {
-            this.replayer?.pause();
-            resolve2();
-          }, 0);
-        } else {
+        this.monitorTime(delta, () => {
+          if (pause) {
+            this.replayer.pause();
+          }
           resolve2();
-        }
+        });
+        this.replayer.play(delta);
       });
     }
     start(options, castedEvents = []) {
@@ -29509,9 +29605,9 @@
         if (this.config.onlyLive) {
           this.makeReplayer([], { baselineTime: events[0].timestamp });
         } else {
-          this.eventsBuffer.push(...events);
-          if (this.eventsBuffer.length > 2) {
-            this.makeReplayer(this.eventsBuffer);
+          this.initialEventsBuffer.push(...events);
+          if (this.initialEventsBuffer.length >= 2) {
+            this.makeReplayer(this.initialEventsBuffer);
           } else {
             return;
           }
@@ -29538,16 +29634,22 @@
       return promise;
     }
     async goLive() {
-      await this.seek(this.lastEvent.timestamp, false);
-      await (0, import_await_sleep3.default)(1e3);
+      await this.replayerListenersManager.wrapWithLoadingState(async () => {
+        await this.seek(this.lastEvent.timestamp, false);
+        await (0, import_await_sleep3.default)(1e3);
+      });
     }
     async goBack(timestamp, {
       sleepAfter = 1e3,
       beforeTimestamp = false,
       includeAllMatchingTimestamps = false
     } = {}) {
-      await this.seek(timestamp, true);
-      await (0, import_await_sleep3.default)(1e3);
+      await this.replayerListenersManager.wrapWithLoadingState(async () => {
+        await this.seek(timestamp, true);
+        if (sleepAfter) {
+          await (0, import_await_sleep3.default)(sleepAfter);
+        }
+      });
     }
     storeEvent(event) {
       if (!this.debugData.active) {
@@ -29565,7 +29667,7 @@
       this.debugData.active = true;
       window.__chkreplayer = {
         events: /* @__PURE__ */ __name(() => this.debugData.events, "events"),
-        back: /* @__PURE__ */ __name((ts) => this.goBack(ts, {}), "back"),
+        back: /* @__PURE__ */ __name((ts) => this.goBack(ts), "back"),
         currentTime: /* @__PURE__ */ __name(() => this.replayer.getCurrentTime(), "currentTime"),
         castedEvents: /* @__PURE__ */ __name(() => this.debugData.castedEvents, "castedEvents")
       };
@@ -30691,12 +30793,6 @@
       this.observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((addedNode) => {
-            if (addedNode.querySelector) {
-              const ifr = addedNode.querySelector("iframe");
-              if (ifr) {
-                console.log("FFF", ifr);
-              }
-            }
             if (addedNode.nodeType !== Node.ELEMENT_NODE) {
               return;
             }
@@ -32409,7 +32505,7 @@
 
   // ../js-lib/src/helpers/helpers.ts
   var awaitSleep = /* @__PURE__ */ __name((ms) => new Promise((resolve2) => setTimeout(resolve2, ms)), "awaitSleep");
-  var guardReturn = /* @__PURE__ */ __name(async (promise, timeout = 1e3, errMessage = "guardReturnTimedOut") => {
+  var guardReturn = /* @__PURE__ */ __name(async (promise, timeout = 1e3, errMessage) => {
     if (timeout === null) {
       return promise;
     }
@@ -32420,7 +32516,10 @@
     }, "guard");
     const res = await Promise.race([promise, guard()]);
     if (typeof res === "string" && res === timeoutStringIdentifier) {
-      throw new Error(errMessage);
+      if (typeof errMessage === "function") {
+        throw new Error(errMessage());
+      }
+      throw new Error(errMessage ?? "guardReturnTimedOut");
     }
     return res;
   }, "guardReturn");
@@ -32516,6 +32615,7 @@
         this.expandCSSKeyFeatures(element, cssKeyElements);
       }
       while (element && element !== this.rootNode) {
+        await awaitSleep(0);
         const elementCandidates = this.getAllLocators(
           element,
           cssKeyElements,
@@ -32525,11 +32625,12 @@
           }
         );
         const validLocators = [];
-        const testCandidate = /* @__PURE__ */ __name((chain) => {
+        const testCandidate = /* @__PURE__ */ __name(async (chain) => {
           if (chain.hasDuplicateFilters()) {
             return;
           }
           try {
+            await awaitSleep(0);
             const { elements } = this.getLocatorBase(element).locator(
               chain.getSelector()
             );
@@ -32543,15 +32644,15 @@
           }
         }, "testCandidate");
         if (!locatorsChains.length) {
-          elementCandidates.forEach(
-            (ec) => testCandidate(new LocatorChain([ec]))
-          );
+          for (const ec of elementCandidates) {
+            await testCandidate(new LocatorChain([ec]));
+          }
         } else {
-          elementCandidates.forEach((ec) => {
-            locatorsChains.forEach(
-              (sc) => testCandidate(sc.cloneAndAddCandidate(ec))
-            );
-          });
+          for (const ec of elementCandidates) {
+            for (const sc of locatorsChains) {
+              await testCandidate(sc.cloneAndAddCandidate(ec));
+            }
+          }
         }
         if (validLocators.length === 0 && locatorsChains.length === 0) {
           const selector = element.tagName.toLowerCase();
@@ -32944,7 +33045,7 @@
      * @returns array of new candidates that return only one element
      */
     async reduceMultiCandidates(candidate) {
-      await awaitSleep(100);
+      await awaitSleep(0);
       const { elements } = candidate;
       const parts = candidate.getSelector().split(" >> ");
       const newCandidates = [];
@@ -33351,6 +33452,68 @@
   }
   __name(isInstanceOfHTMLElement, "isInstanceOfHTMLElement");
 
+  // ../browser-lib/src/helpers/dom/xpath.ts
+  function getRelativeXPath(element = document, child) {
+    try {
+      let getNodeIdentifier2 = function(node3) {
+        let identifier = node3.nodeName.toLowerCase();
+        let foundAttributeIdentifier = false;
+        ["name", "label", "aria-label", "data-testid", "role"].forEach((attr) => {
+          if (node3.hasAttribute(attr)) {
+            identifier += `[@${attr}="${node3.getAttribute(attr)}"]`;
+            foundAttributeIdentifier = true;
+          }
+        });
+        if (!foundAttributeIdentifier) {
+          let index2 = 1;
+          let sibling = node3.previousSibling;
+          while (sibling) {
+            if (sibling.nodeType === Node.ELEMENT_NODE && sibling.nodeName === node3.nodeName) {
+              index2++;
+            }
+            sibling = sibling.previousSibling;
+          }
+          if (index2 > 1) {
+            identifier += `[${index2}]`;
+          }
+        }
+        return identifier;
+      };
+      var getNodeIdentifier = getNodeIdentifier2;
+      __name(getNodeIdentifier2, "getNodeIdentifier");
+      if (!element || !child || !element.contains(child)) {
+        throw new Error("Child is not a descendant of the given element.");
+      }
+      let path = [];
+      let node2 = child;
+      while (node2 !== element) {
+        if (node2.nodeType === Node.ELEMENT_NODE) {
+          path.unshift(getNodeIdentifier2(node2));
+        }
+        node2 = node2.parentElement;
+      }
+      return path.join("/");
+    } catch (error) {
+      console.error("Failed to get relative xpath", error);
+      return;
+    }
+  }
+  __name(getRelativeXPath, "getRelativeXPath");
+  function findElementsByXPath(parentElement2, xpath) {
+    let evaluator = new XPathEvaluator();
+    let result2 = evaluator.evaluate(
+      xpath,
+      parentElement2,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    );
+    return [result2.singleNodeValue].filter(
+      (node2) => node2 instanceof HTMLElement
+    );
+  }
+  __name(findElementsByXPath, "findElementsByXPath");
+
   // src/lib/test-generator/selectors/compound-selector.ts
   var CLASS_IGNORE_LIST = [
     ":hover",
@@ -33441,7 +33604,7 @@
       const compoundSelector = {
         // generate selectors from the common root to the target element
         targetSelection: {
-          xpath: this.getRelativeXPath(commonRoot, targetElement.element),
+          xpath: getRelativeXPath(commonRoot, targetElement.element),
           cssSelectors: this.generateAllContextualSelectors(
             commonRoot,
             targetElement.element
@@ -33535,7 +33698,7 @@
       if (targetSelection.xpath) {
         try {
           addElementstoHistogram(
-            this.findElementsByXPath(commonParent, targetSelection.xpath)
+            findElementsByXPath(commonParent, targetSelection.xpath)
           );
         } catch (error) {
         }
@@ -33699,68 +33862,6 @@
       });
       return [...new Set(selectors)];
     }
-    /**
-     * Builds relative xpath from an element to its child
-     */
-    getRelativeXPath(element, child) {
-      try {
-        let getNodeIdentifier = function(node3) {
-          let identifier = node3.nodeName.toLowerCase();
-          let foundAttributeIdentifier = false;
-          ["name", "label", "aria-label", "data-testid", "role"].forEach(
-            (attr) => {
-              if (node3.hasAttribute(attr)) {
-                identifier += `[@${attr}="${node3.getAttribute(attr)}"]`;
-                foundAttributeIdentifier = true;
-              }
-            }
-          );
-          if (!foundAttributeIdentifier) {
-            let index2 = 1;
-            let sibling = node3.previousSibling;
-            while (sibling) {
-              if (sibling.nodeType === Node.ELEMENT_NODE && sibling.nodeName === node3.nodeName) {
-                index2++;
-              }
-              sibling = sibling.previousSibling;
-            }
-            if (index2 > 1) {
-              identifier += `[${index2}]`;
-            }
-          }
-          return identifier;
-        };
-        __name(getNodeIdentifier, "getNodeIdentifier");
-        if (!element || !child || !element.contains(child)) {
-          throw new Error("Child is not a descendant of the given element.");
-        }
-        let path = [];
-        let node2 = child;
-        while (node2 !== element) {
-          if (node2.nodeType === Node.ELEMENT_NODE) {
-            path.unshift(getNodeIdentifier(node2));
-          }
-          node2 = node2.parentElement;
-        }
-        return path.join("/");
-      } catch (error) {
-        console.error("Failed to get relative xpath", error);
-        return;
-      }
-    }
-    findElementsByXPath(parentElement2, xpath) {
-      let evaluator = new XPathEvaluator();
-      let result2 = evaluator.evaluate(
-        xpath,
-        parentElement2,
-        null,
-        XPathResult.FIRST_ORDERED_NODE_TYPE,
-        null
-      );
-      return [result2.singleNodeValue].filter(
-        (node2) => node2 instanceof HTMLElement
-      );
-    }
     /**
      * Create a contextual selector from the common root to the target element
      * We can play with the options to build various types of selectors which we could
@@ -33958,8 +34059,6 @@
           );
           attributeMaxSize = Math.max(attributeMaxSize - 10, 0);
         } while (rootClone.outerHTML.length > this.MAX_SNIPPET_SIZE && attributeMaxSize > 0);
-        rootClone.querySelectorAll("*").forEach((el) => {
-        });
         let htmlSnippet = serializeElement(rootClone, {
           limitAttributeLength: true
         });
@@ -34010,6 +34109,7 @@
       this.sessionMirror = sessionMirror;
     }
     // Get files for a specific input by rrwebId
+    // !! used in msg broker
     async getFilesByRrwebId(rrwebId) {
       const files = this.filesMap[rrwebId] ?? [];
       try {
@@ -34076,7 +34176,10 @@
           onBodyReady();
         }
       });
-      bodyObserver.observe(document2.documentElement, { childList: true });
+      bodyObserver.observe(document2.documentElement, {
+        childList: true,
+        subtree: true
+      });
     }
     // Cleanup the observer and remove event listeners
     cleanup() {
@@ -34600,7 +34703,6 @@ ${data.locator}`
           event.isCheckout = isCheckout;
           window.checksumSendBroadcastMessage?.("rrweb", [event]);
           this.lastRrwebEventTimestamp = event.timestamp;
-          console.log(event.timestamp);
         }, config.recordOptions);
       }
       if (initFilesObserver) {
@@ -35426,6 +35528,7 @@ ${data.locator}`
     constructor() {
       super({ enableInteract: true });
       this.shouldHandleEvents = true;
+      this.name = "timeMachine";
     }
     static {
       __name(this, "TimeMachine");
@@ -35457,7 +35560,7 @@ ${data.locator}`
       if (!timestamp) {
         return this.goLive();
       }
-      return this.sessionReplayer.goBack(timestamp, options);
+      return this.sessionReplayer.goBack(timestamp);
     }
     getElementByRRwebId(rrwebId) {
       return this.sessionReplayer.getNodeById(rrwebId);
@@ -35465,6 +35568,9 @@ ${data.locator}`
     goLive() {
       return this.sessionReplayer.goLive();
     }
+    getCurrentTimestamp() {
+      return this.sessionReplayer.getCurrentTimestamp();
+    }
   };
 
   // ../browser-lib/src/visual-test-generator/time-machine-event-handlers.ts
@@ -35750,7 +35856,8 @@ ${data.locator}`
                   selector: dropzoneSelector.playwrightSelector,
                   locator: dropzoneSelector.playwrightLocator,
                   parentFramesSelectors: dropzoneSelector.playwrightParentFramesSelectors,
-                  esraMetadata: dropzoneSelector.esraMetadata
+                  esraMetadata: dropzoneSelector.esraMetadata,
+                  rrwebId: dropzoneNodeId
                 }
               }
             )
@@ -35771,8 +35878,8 @@ ${data.locator}`
       window.parent.document.body.appendChild(liveTMDiv);
       this.sessionReplayer = new SessionReplayer({
         enableInteract: false,
-        root: liveTMDiv
-        // onlyLive: true,
+        root: liveTMDiv,
+        onlyLive: true
       });
       this.sessionReplayer.start({ firstEventTimestamp: Date.now() });
     }
@@ -36018,6 +36125,9 @@ ${data.locator}`
         pageId: void 0,
         timestamp: event.timestamp,
         id: data?.id || Date.now().toString(),
+        // @ts-ignore
+        rrwebId: event.data?.id,
+        // add rrwebId for services caching
         ...data
       };
     }