@checksum-ai/runtime 1.1.33 → 1.1.35

package/checksumlib.js

@@ -9714,9 +9714,6 @@
         this.restoreNodeAttributes(node2, removedAttributes);
         const result2 = await this.getElementWindowPlaywright(node2).$(selector);
         if (result2 !== node2) {
-          console.log(
-            `Selector ${selector} is not valid, trying to generate new one`
-          );
           ({ selector, locator } = await this.safeGetSelectorAndLocator(
             nodeHTML
           ));
@@ -29390,8 +29387,9 @@
   var SessionReplayer = class {
     constructor(config = {}) {
       this.events = [];
-      this.castedEvents = [];
+      this.numberOfCastedEvents = 0;
       this.isLive = true;
+      this.liveEvents = [];
       // private currentTraveledTimestamp: number = undefined;
       this.currentTraveledNumberOfEvents = void 0;
       this.config = {
@@ -29420,8 +29418,8 @@
         this.events = [...this.events, ...sortedNewEvents];
         const promise = new Promise((resolve2) => {
           this.onEventCast = (event) => {
-            this.castedEvents.push(event);
-            if (this.castedEvents.length === this.events.length) {
+            this.numberOfCastedEvents++;
+            if (this.numberOfCastedEvents === this.events.length) {
               this.onEventCast = void 0;
               resolve2();
             }
@@ -29438,6 +29436,20 @@
       this.getOriginalTimestamp = /* @__PURE__ */ __name((event) => {
         return event.originalTimestamp ?? event.timestamp;
       }, "getOriginalTimestamp");
+      this.trimEventsToLastCheckout = /* @__PURE__ */ __name((events) => {
+        const lastCheckoutEventIndex = events.reduce(
+          (lastCheckoutEventIndex2, event, index2) => {
+            return event.isCheckout && event.type === EventType.Meta ? index2 : lastCheckoutEventIndex2;
+          },
+          void 0
+        );
+        let trimmedEvents = events;
+        if (lastCheckoutEventIndex !== void 0) {
+          trimmedEvents = events.slice(lastCheckoutEventIndex);
+        }
+        const castedEvents = lastCheckoutEventIndex !== void 0 ? this.liveEvents.slice(0, lastCheckoutEventIndex) : [];
+        return { trimmedEvents, castedEvents, lastCheckoutEventIndex };
+      }, "trimEventsToLastCheckout");
       this.getNodeById = /* @__PURE__ */ __name((id) => {
         return this.replayer.getMirror().getNode(id);
       }, "getNodeById");
@@ -29445,36 +29457,49 @@
         return this.replayer.getMirror().getMeta(node2);
       }, "getMeta");
       this.config = { ...this.config, ...config };
+      this.goBackWithEvents = this.goBackWithEvents_native;
     }
     static {
       __name(this, "SessionReplayer");
     }
-    start(options) {
-      this.startOptions = options;
-      const {
-        firstEventTimestamp,
-        speed = 8,
-        useTimestampCompression = true
-      } = options;
+    makeReplayerConfig(live, { speed = 8 } = {}) {
       const playerConfig = {
         mouseTail: false,
         pauseAnimation: false,
         speed,
         triggerFocus: true,
         UNSAFE_replayCanvas: true,
-        liveMode: true,
+        liveMode: live,
         showDebug: false,
-        skipInactive: true
+        skipInactive: true,
+        inactivePeriodThreshold: 100
       };
       if (this.config.root) {
         playerConfig.root = this.config.root;
       }
-      this.replayer = new Replayer([], playerConfig);
+      return playerConfig;
+    }
+    makeReplayer(events, live, { speed = 8 } = {}) {
+      this.replayer = new Replayer(
+        events,
+        this.makeReplayerConfig(live, { speed })
+      );
       if (this.config.enableInteract) {
         this.replayer.enableInteract();
       } else {
         this.replayer.disableInteract();
       }
+    }
+    start(options, castedEvents = []) {
+      this.startOptions = options;
+      const {
+        firstEventTimestamp,
+        speed = 8,
+        useTimestampCompression = true
+      } = options;
+      this.events = castedEvents;
+      this.numberOfCastedEvents = castedEvents.length;
+      this.makeReplayer([], true, { speed });
       this.useTimestampCompression = useTimestampCompression;
       this.replayer.startLive(
         this.useTimestampCompression ? Date.now() : firstEventTimestamp
@@ -29485,20 +29510,23 @@
         }
       });
     }
-    getCurrentReplayPoint() {
-      return this.isLive ? this.events.length : this.currentTraveledNumberOfEvents;
-    }
-    // private beforeGoBack() {
-    //   if (this.isLive) {
-    //     this.liveEvents = this.events;
-    //   }
-    //   this.stop();
-    //   this.events = [];
-    //   this.castedEvents = [];
-    //   this.start(this.startOptions);
-    //   this.isLive = false;
-    // }
-    async goBackWithEvents(getEvents2, { sleepAfter = 1e3 }) {
+    async goLive(sleepAfter = 1e3) {
+      if (this.isLive) {
+        return;
+      }
+      this.stop();
+      this.currentTraveledNumberOfEvents = void 0;
+      const { trimmedEvents, castedEvents } = this.trimEventsToLastCheckout(
+        this.liveEvents
+      );
+      this.start(this.startOptions, castedEvents);
+      this.isLive = true;
+      await this.fastForward(trimmedEvents);
+      if (sleepAfter) {
+        await (0, import_await_sleep3.default)(sleepAfter);
+      }
+    }
+    async goBackWithEvents_native(getEvents2, { sleepAfter = 1e3 }) {
       if (this.isLive) {
         this.liveEvents = this.events;
       }
@@ -29506,38 +29534,65 @@
       if (events.length === this.currentTraveledNumberOfEvents) {
         return;
       }
-      const lastCheckoutEventIndex = events.reduce(
-        (lastCheckoutEventIndex2, event, index2) => {
-          return event.isCheckout && event.type === EventType.Meta ? index2 : lastCheckoutEventIndex2;
-        },
-        void 0
-      );
-      if (lastCheckoutEventIndex !== void 0) {
-        console.log(
-          "lastCheckoutEventIndex:",
-          lastCheckoutEventIndex,
-          "number of events to render:",
-          events.length - lastCheckoutEventIndex
-        );
-        events.splice(lastCheckoutEventIndex);
-      }
       this.stop();
       this.events = [];
-      this.castedEvents = [];
-      this.start(this.startOptions);
+      this.numberOfCastedEvents = 0;
       this.isLive = false;
       this.currentTraveledNumberOfEvents = events.length;
-      await this.fastForward(events, true);
+      const { trimmedEvents } = this.trimEventsToLastCheckout(events);
+      this.makeReplayer(trimmedEvents, false, { speed: 360 });
+      this.replayer.play(trimmedEvents[trimmedEvents.length - 1].timestamp);
       if (sleepAfter) {
         await (0, import_await_sleep3.default)(sleepAfter);
       }
     }
-    async goBackToReplayPoint(replayPoint, {
-      sleepAfter = 1e3
-    } = {}) {
-      return this.goBackWithEvents(() => this.liveEvents.slice(0, replayPoint), {
-        sleepAfter
-      });
+    async goBackWithEvents_native2(getEvents2, { sleepAfter = 1e3 }) {
+      try {
+        const events = getEvents2();
+        const targetTimestamp = events[events.length - 1]?.timestamp ?? 0;
+        const getTimeForPause = /* @__PURE__ */ __name(() => {
+          return targetTimestamp - (this.events[0].timestamp ?? 0);
+        }, "getTimeForPause");
+        if (!this.isLive && targetTimestamp <= this.events[this.events.length - 1].timestamp) {
+          const timeForPause2 = getTimeForPause();
+          this.replayer.pause(timeForPause2);
+          return;
+        }
+        if (this.isLive) {
+          this.liveEvents = this.events;
+        }
+        this.stop();
+        this.events = this.liveEvents;
+        this.numberOfCastedEvents = this.liveEvents.length;
+        this.isLive = false;
+        this.makeReplayer(this.events, false, { speed: 360 });
+        const timeForPause = getTimeForPause();
+        this.replayer.pause(timeForPause);
+      } finally {
+        if (sleepAfter) {
+          await (0, import_await_sleep3.default)(sleepAfter);
+        }
+      }
+    }
+    async goBackWithEvents_FFwd(getEvents2, { sleepAfter = 1e3 }) {
+      if (this.isLive) {
+        this.liveEvents = this.events;
+      }
+      const events = getEvents2();
+      if (events.length === this.currentTraveledNumberOfEvents) {
+        return;
+      }
+      this.currentTraveledNumberOfEvents = events.length;
+      this.stop();
+      const { trimmedEvents, castedEvents } = this.trimEventsToLastCheckout(
+        this.liveEvents
+      );
+      this.start(this.startOptions, castedEvents);
+      this.isLive = false;
+      await this.fastForward(trimmedEvents, true);
+      if (sleepAfter) {
+        await (0, import_await_sleep3.default)(sleepAfter);
+      }
     }
     async goBack(timestamp, {
       sleepAfter = 1e3,
@@ -29577,28 +29632,24 @@
         sleepAfter
       });
     }
-    async goLive(sleepAfter = 1e3) {
-      if (this.isLive) {
-        return;
-      }
-      this.stop();
-      this.currentTraveledNumberOfEvents = void 0;
-      this.events = [];
-      this.castedEvents = [];
-      this.start(this.startOptions);
-      this.isLive = true;
-      await this.fastForward(this.liveEvents);
-      if (sleepAfter) {
-        await (0, import_await_sleep3.default)(sleepAfter);
-      }
-    }
-    getLastEventTimestamps() {
-      const lastEvent = this.events[this.events.length - 1];
+    async getLastEventTimestamps(snapshot2 = false) {
+      const lastEvent = snapshot2 ? await this.findLastFullSnapshotEvent() : this.events[this.events.length - 1];
       return {
         timestamp: lastEvent?.timestamp,
         originalTimestamp: lastEvent?.originalTimestamp
       };
     }
+    async findLastFullSnapshotEvent() {
+      const event = this.events.reduce((snapshotEvent, event2) => {
+        return event2.type === EventType.FullSnapshot ? event2 : snapshotEvent;
+      }, void 0);
+      if (event) {
+        return event;
+      }
+      console.log("waiting for full snapshot event...");
+      await (0, import_await_sleep3.default)(1e3);
+      return this.findLastFullSnapshotEvent();
+    }
   };
 
   // ../browser-lib/src/session-record-replay/events-streamer.ts
@@ -31533,7 +31584,8 @@
       clear = true,
       shouldFlipHighlightTextOutsideViewport = true,
       pointerEvents,
-      classNames = []
+      classNames = [],
+      renderDocument
     } = {}) {
       if (clear) {
         this.clearHighlights();
@@ -31541,16 +31593,30 @@
       if (!element) {
         return;
       }
-      const elementDocument = element.ownerDocument;
+      const iframeOffset = { left: 0, top: 0, right: 0, bottom: 0 };
+      if (renderDocument !== element.ownerDocument) {
+        let iframe = element.ownerDocument.defaultView?.frameElement;
+        while (iframe) {
+          const iframeRect = iframe.getBoundingClientRect();
+          iframeOffset.left += iframeRect.left;
+          iframeOffset.top += iframeRect.top;
+          iframe = iframe.ownerDocument.defaultView?.frameElement;
+        }
+      }
+      const elementDocument = renderDocument ?? element.ownerDocument;
       const isFixed = isAncestorOrSelfFixed(element);
-      const rect = element.getBoundingClientRect();
+      const elementBoundingBox = element.getBoundingClientRect();
+      const elementPositionWithOffset = {
+        top: elementBoundingBox.top + iframeOffset.top,
+        left: elementBoundingBox.left + iframeOffset.left
+      };
       const newElement = elementDocument.createElement("div");
       newElement.style.outline = "2px dashed rgba(255,0,0,.75)";
       newElement.style.position = isFixed ? "fixed" : "absolute";
-      newElement.style.left = rect.left + "px";
-      newElement.style.top = rect.top + "px";
-      newElement.style.width = rect.right - rect.left + "px";
-      newElement.style.height = rect.bottom - rect.top + "px";
+      newElement.style.left = elementPositionWithOffset.left + "px";
+      newElement.style.top = elementPositionWithOffset.top + "px";
+      newElement.style.width = elementBoundingBox.width + "px";
+      newElement.style.height = elementBoundingBox.height + "px";
       newElement.style.pointerEvents = pointerEvents ?? "none";
       newElement.style.zIndex = "2147483647";
       newElement.className = ["checksum-dom-cache-ignore", ...classNames].join(
@@ -31586,7 +31652,7 @@
         );
         hoverTextEl.innerText = text;
         hoverTextEl.style.fontSize = "12px";
-        hoverTextEl.style.width = textWidthType === "rect" ? `${rect.width}px` : "auto";
+        hoverTextEl.style.width = textWidthType === "rect" ? `${elementBoundingBox.width}px` : "auto";
         hoverTextEl.style.background = "#000000a1";
         hoverTextEl.style.color = "white";
         hoverTextEl.style.padding = "5px";
@@ -31594,9 +31660,9 @@
         hoverTextEl.style.pointerEvents = "none";
         hoverTextEl.style.userSelect = "none";
         if (textPosition === "above") {
-          hoverTextEl.style.bottom = `${rect.height}px`;
+          hoverTextEl.style.bottom = `${elementBoundingBox.height}px`;
         } else if (textPosition === "below") {
-          hoverTextEl.style.top = `${rect.height}px`;
+          hoverTextEl.style.top = `${elementBoundingBox.height}px`;
         }
         this.mergeStyle(hoverTextEl, textStyle);
         newElement.appendChild(hoverTextEl);
@@ -31614,17 +31680,17 @@
       elementDocument.body.appendChild(newElement);
       if (textPosition === "above" && getHeightOfCroppedElementAboveViewport(hoverTextEl) > 0) {
         hoverTextEl.style.bottom = "initial";
-        hoverTextEl.style.top = `${rect.height}px`;
+        hoverTextEl.style.top = `${elementBoundingBox.height}px`;
       } else if (textPosition === "below" && getHeightsOfCroppedElementBelowViewport(hoverTextEl) > 0) {
         hoverTextEl.style.top = "initial";
-        hoverTextEl.style.bottom = `${rect.height}px`;
+        hoverTextEl.style.bottom = `${elementBoundingBox.height}px`;
       }
       this.lastHighlights.push(newElement);
       if (shouldFlipHighlightTextOutsideViewport) {
         this.flipHighlightTextPositionOutsideViewport(
           hoverTextEl,
           textPosition,
-          rect.height
+          elementBoundingBox.height
         );
       }
     }
@@ -34231,7 +34297,7 @@
             return;
           }
         }
-        if (target instanceof this.defaultView.HTMLIFrameElement) {
+        if (isNodeInstanceOf(target, "HTMLIFrameElement")) {
           this.handleSubDocument(
             target.contentDocument,
             target.contentDocument.defaultView
@@ -34241,10 +34307,11 @@
         if (this.subDocumentInspector) {
           this.stopSubDocumentInspector(true);
         }
-        if (!(target instanceof this.defaultView.Element)) {
+        if (!isNodeInstanceOf(target, "HTMLElement")) {
           return;
         }
-        if (target === this.hoveredElement || target.matches(".element-inspector-ignore")) {
+        const targetElement = target;
+        if (targetElement === this.hoveredElement || targetElement.matches(".element-inspector-ignore")) {
           return;
         }
         elementHighlighter.clearHighlights();
@@ -34254,14 +34321,15 @@
           });
         }
         const { locator, selector, parentFramesSelectors } = await this.playwrightElementSelectorGenerator.getSelectorAndLocator(
-          target
+          targetElement
         );
-        elementHighlighter.highlightElement(target, {
+        elementHighlighter.highlightElement(targetElement, {
           text: locator.replace("frameLocator('iframe').", ""),
           textPosition: "below",
           textWidthType: "auto",
           pointerEvents: "none",
-          classNames: ["element-inspector-ignore"]
+          classNames: ["element-inspector-ignore"],
+          renderDocument: this.defaultView.top.document
         });
         const elementByLocator = await this.playwrightElementSelectorGenerator.selector(
           selector,
@@ -34272,10 +34340,11 @@
             // highlightStyle: { outlineColor: "blue" },
             clear: false,
             pointerEvents: "none",
-            classNames: ["element-inspector-ignore"]
+            classNames: ["element-inspector-ignore"],
+            renderDocument: this.defaultView.top.document
           });
         }
-        this.hoveredElement = target;
+        this.hoveredElement = targetElement;
         this.hoveredElementSelection = { locator, selector, parentFramesSelectors };
         this.wasHoveredElementSelected = false;
         target.addEventListener("click", this.onClick, {
@@ -34431,16 +34500,14 @@ ${data.locator}`
         }
         this.sessionRecorder.addCustomEvent("assertion" /* Assertion */, {
           matcher: `toHaveText("${result2}")`,
-          locator: data.locator,
-          thought: `Element should have text: ${result2}`
+          locator: data.locator
         });
       }, "toHaveTextHandler");
       this.toBeVisibleHandler = /* @__PURE__ */ __name(() => (messageEvent) => {
         const data = messageEvent?.data?.data;
         this.sessionRecorder.addCustomEvent("assertion" /* Assertion */, {
           matcher: `toBeVisible()`,
-          locator: data.locator,
-          thought: `Element ${data.locator} should be visible`
+          locator: data.locator
         });
       }, "toBeVisibleHandler");
       this.sessionRecorder = sessionRecorder;
@@ -35517,8 +35584,8 @@ ${data.locator}`
     goLive() {
       return this.sessionReplayer.goLive();
     }
-    getLastEventTimestamps() {
-      return this.sessionReplayer.getLastEventTimestamps();
+    getLastEventTimestamps(snapshot2 = false) {
+      return this.sessionReplayer.getLastEventTimestamps(snapshot2);
     }
   };