@checksum-ai/runtime 1.1.53-beta → 1.1.54-beta

package/checksumlib.js

@@ -34267,6 +34267,7 @@
       this.singleSelection = true;
       this.subDocumentInspector = null;
       this.listening = false;
+      this.locatorCache = InspectedElementCache.getInstance();
       this.onMouseOut = /* @__PURE__ */ __name((event) => {
         elementHighlighter.clearHighlights();
       }, "onMouseOut");
@@ -34302,13 +34303,7 @@
             capture: true
           });
         }
-        const { locator, selector, parentFramesSelectors } = await this.playwrightElementSelectorGenerator.getSelectorAndLocator(targetElement).catch((error) => {
-          return {
-            locator: "",
-            selector: "",
-            parentFramesSelectors: []
-          };
-        });
+        const { locator, selector, parentFramesSelectors, locatorRrwebId } = await this.getInspectedElementSelection(targetElement);
         elementHighlighter.highlightElement(targetElement, {
           text: locator.replace("frameLocator('iframe').", ""),
           textPosition: "below",
@@ -34317,15 +34312,17 @@
           classNames: ["element-inspector-ignore"],
           renderDocument: this.getRenderDocument(this.defaultView)
         });
-        const elementByLocator = await this.playwrightElementSelectorGenerator.selector(selector, parentFramesSelectors).catch(() => targetElement);
-        if (elementByLocator !== target) {
-          elementHighlighter.highlightElement(elementByLocator, {
-            // highlightStyle: { outlineColor: "blue" },
-            clear: false,
-            pointerEvents: "none",
-            classNames: ["element-inspector-ignore"],
-            renderDocument: this.getRenderDocument(this.defaultView)
-          });
+        if (locatorRrwebId) {
+          const element = window.checksum.timeMachine.sessionReplayer.getNodeById(locatorRrwebId);
+          if (element) {
+            elementHighlighter.highlightElement(element, {
+              // highlightStyle: { outlineColor: "blue" },
+              clear: false,
+              pointerEvents: "none",
+              classNames: ["element-inspector-ignore"],
+              renderDocument: this.getRenderDocument(this.defaultView)
+            });
+          }
         }
         this.hoveredElement = targetElement;
         this.hoveredElementSelection = { locator, selector, parentFramesSelectors };
@@ -34366,7 +34363,10 @@
           topLevelInspector: this.topLevelInspector ?? this,
           getRenderDocument: this.getRenderDocument
         });
-        this.subDocumentInspector.start(this.singleSelection);
+        this.subDocumentInspector.start({
+          singleSelection: this.singleSelection,
+          timestamp: this.currentTimestamp
+        });
         return true;
       }, "handleSubDocument");
       this.stopSubDocumentInspector = /* @__PURE__ */ __name((clean) => {
@@ -34387,8 +34387,15 @@
     getDefaultView() {
       return this.rootDocument.nodeType === Node.DOCUMENT_NODE ? this.rootDocument.defaultView : window;
     }
-    start(singleSelection = true) {
+    start({
+      singleSelection,
+      timestamp
+    } = {
+      singleSelection: true
+    }) {
       this.singleSelection = singleSelection;
+      this.locatorCache.setTimestamp(timestamp);
+      this.currentTimestamp = timestamp;
       this.stop();
       this.cleanSelection();
       this.rootDocument.addEventListener("mouseover", this.onMouseOver);
@@ -34409,6 +34416,7 @@
           capture: true
         });
       }
+      this.currentTimestamp = void 0;
       this.hoveredElement = null;
       this.wasHoveredElementSelected = false;
       this.rootDocument.removeEventListener("mouseover", this.onMouseOver);
@@ -34430,7 +34438,78 @@
       this.cleanSelection();
       return selected;
     }
+    /**
+     * Gets selection data for element.
+     * Tried to fetch from cache first, if not found, generates new data, saves it to cache and returns it.
+     */
+    async getInspectedElementSelection(element) {
+      let cache = this.locatorCache.getCachedLocatorForElement(element);
+      if (!cache) {
+        const { locator, selector, parentFramesSelectors } = await this.playwrightElementSelectorGenerator.getSelectorAndLocator(element).catch((error) => {
+          return {
+            locator: "",
+            selector: "",
+            parentFramesSelectors: []
+          };
+        });
+        const locatorElement = await this.playwrightElementSelectorGenerator.selector(selector, parentFramesSelectors).catch(() => element);
+        const locatorRrwebId = locatorElement !== element ? getNodeRrwebId(locatorElement) : void 0;
+        cache = {
+          locator,
+          selector,
+          parentFramesSelectors,
+          locatorRrwebId
+        };
+        this.locatorCache.setCachedLocatorForElement(element, cache);
+      }
+      return cache;
+    }
   };
+  var InspectedElementCache = class _InspectedElementCache {
+    constructor() {
+      this.locatorCache = /* @__PURE__ */ new Map();
+    }
+    static {
+      __name(this, "InspectedElementCache");
+    }
+    // key - rrwebid_timestamp
+    static getInstance() {
+      if (!_InspectedElementCache.instance) {
+        _InspectedElementCache.instance = new _InspectedElementCache();
+      }
+      return _InspectedElementCache.instance;
+    }
+    setTimestamp(timestamp) {
+      this.currentTimestamp = timestamp;
+    }
+    getCachedLocatorForElement(element) {
+      try {
+        if (!this.currentTimestamp) {
+          return;
+        }
+        return this.locatorCache.get(this.getKeyForElement(element));
+      } catch (e2) {
+        return;
+      }
+    }
+    setCachedLocatorForElement(element, cache) {
+      if (!this.currentTimestamp) {
+        return;
+      }
+      this.locatorCache.set(this.getKeyForElement(element), cache);
+    }
+    getKeyForElement(element) {
+      const rrwebId = getNodeRrwebId(element);
+      if (!rrwebId) {
+        throw new Error("Can't find rrwebId for element");
+      }
+      return `${rrwebId}_${this.currentTimestamp}`;
+    }
+  };
+  function getNodeRrwebId(node2) {
+    return window.checksum.timeMachine.sessionReplayer.getMeta(node2)?.id;
+  }
+  __name(getNodeRrwebId, "getNodeRrwebId");
 
   // src/lib/test-generator/assertions-observer/keybindings-manager.ts
   var import_mousetrap = __toESM(require_mousetrap());
@@ -36216,7 +36295,11 @@ ${data.locator}`
     setSendRecordedSteps(sendRecordedSteps) {
       this.sendRecordedSteps = sendRecordedSteps;
     }
-    startInspector(singleSelection = true, rootDocument) {
+    startInspector({
+      singleSelection = true,
+      rootDocument,
+      timestamp
+    } = {}) {
       this.stopInspector();
       const getRenderDocument = /* @__PURE__ */ __name((defaultView) => {
         return defaultView.top.document.querySelector(
@@ -36227,7 +36310,7 @@ ${data.locator}`
         rootDocument: rootDocument ?? this.getRRwebReplayerDocument(),
         getRenderDocument
       });
-      this.elementInspector.start(singleSelection);
+      this.elementInspector.start({ singleSelection, timestamp });
     }
     getRRwebReplayerDocument() {
       return document.querySelector(".replayer-wrapper > iframe").contentDocument;