@checksum-ai/runtime 1.1.49 → 1.1.50-beta

package/checksumlib.js

@@ -7509,6 +7509,9 @@
     return null;
   }, "closestExtended");
   var childNodesExtended = /* @__PURE__ */ __name((node2, { flattenShadowRootChildren = false } = {}) => {
+    if (!node2) {
+      return [];
+    }
     let childNodes2 = Array.from(node2.childNodes);
     if (node2.nodeType === Node.ELEMENT_NODE) {
       const element = node2;
@@ -7579,7 +7582,12 @@
     }
     return null;
   }, "parentElementExtended");
-  var serializeElement = /* @__PURE__ */ __name((element, { includeComments = true, includeCDATA = true, trim = true } = {}) => {
+  var serializeElement = /* @__PURE__ */ __name((element, {
+    includeComments = true,
+    includeCDATA = true,
+    trim = true,
+    limitAttributeLength = false
+  } = {}) => {
     if (!element) {
       return "";
     }
@@ -7588,7 +7596,7 @@
         case Node.ELEMENT_NODE:
           return serializeElementNode2(node2);
         case Node.TEXT_NODE:
-          return trim ? node2.nodeValue.trim() : node2.nodeValue;
+          return node2.nodeValue;
         case Node.CDATA_SECTION_NODE:
           return includeCDATA ? `<![CDATA[${node2.nodeValue}]]>` : "";
         case Node.COMMENT_NODE:
@@ -7615,7 +7623,11 @@
       let tagName = element2.tagName.toLowerCase();
       let serialized = `<${tagName}`;
       Array.from(element2.attributes).forEach((attr) => {
-        serialized += ` ${attr.name}="${attr.value}"`;
+        const attributeValue = attr.value.slice(
+          0,
+          limitAttributeLength ? 100 : void 0
+        );
+        serialized += ` ${attr.name}="${attributeValue}"`;
       });
       serialized += ">";
       if (element2.shadowRoot) {
@@ -32744,6 +32756,39 @@
 
   // src/lib/test-generator/selectors/pw-custom-locator-generator.ts
   var DEBUG_MODE = false;
+  var LocatorChain = class _LocatorChain {
+    constructor(locators) {
+      this.locators = [];
+      this.elements = [];
+      this.locators = locators;
+    }
+    static {
+      __name(this, "LocatorChain");
+    }
+    /**
+     * Check if any of the locators have the same filter values
+     * For now, we only check for hasText filter
+     */
+    hasDuplicateFilters() {
+      const hasTextFilters = this.locators.map((l2) => l2.options?.hasText).filter((value) => value);
+      return hasTextFilters.length !== new Set(hasTextFilters).size;
+    }
+    cloneAndAddCandidate(candidate) {
+      return new _LocatorChain([candidate, ...this.locators.slice()]);
+    }
+    toLocatorCandidate() {
+      return {
+        selector: this.getSelector(),
+        locator: this.getLocator()
+      };
+    }
+    getSelector() {
+      return this.locators.map((l2) => l2.selector).join(" >> ");
+    }
+    getLocator() {
+      return this.locators.map((l2) => l2.locator).join(".");
+    }
+  };
   var PlaywrightCustomLocatorGenerator = class _PlaywrightCustomLocatorGenerator {
     constructor(rootNode = document) {
       this.rootNode = rootNode;
@@ -32763,29 +32808,23 @@
      * @param cssKeyElements array of css key elements to use as selectors
      * @param options
      */
-    async generate(element, cssKeyElements = [], {
-      /**
-       * if element is part of a list - don't limit to 1 element,
-       * but verify that all returned elements are part of the same list
-       */
-      isPartOfListItem = false,
-      /**
-       * Generate a selector for context element.
-       * For context elements we should generate a simplistic selector that will not include text context from the page.
-       * For that reason we should not bubble up the DOM tree to find the best selector, but rather use the element itself.
-       * It can also return multiple elements.
-       */
-      isForContextElement = false,
-      /**
-       * Whether to use text content to generate selectors
-       * Useful to turn off when wanting to avoid page context in selectors like user data
-       **/
-      useTextContent = true,
-      /* Whether to add CSS selector from the css-selector-generator library */
-      addCSSSelectorGenerator = true,
-      /* Whether to heuristiically expand CSS key elements to include more selectors */
-      expandCSSKeyElements = true
-    } = {}) {
+    async generate(element, cssKeyElements = [], options = {}) {
+      const {
+        isPartOfListItem,
+        isForContextElement,
+        useTextContent,
+        addCSSSelectorGenerator,
+        expandCSSKeyElements,
+        bruteForceMode
+      } = {
+        isPartOfListItem: false,
+        isForContextElement: false,
+        useTextContent: true,
+        addCSSSelectorGenerator: true,
+        expandCSSKeyElements: true,
+        bruteForceMode: false,
+        ...options
+      };
       if (isNodeInstanceOf(element, "HTMLOptionElement")) {
         const select = element.closest("select");
         if (select) {
@@ -32794,10 +32833,9 @@
           });
         }
       }
-      this.usedFilters = { hasText: [], has: [] };
       this.targetElement = element;
       this.startTimestamp = Date.now();
-      const locatorsCandidates = [];
+      const locatorsChains = [];
       cssKeyElements = cssKeyElements.filter(
         (featureElement) => Array.from(document.querySelectorAll(featureElement.selector)).includes(
           featureElement.element
@@ -32807,70 +32845,78 @@
         this.expandCSSKeyFeatures(element, cssKeyElements);
       }
       while (element && element !== this.rootNode) {
-        const elementSelectors = this.getAllLocators(element, cssKeyElements, {
-          useTextContent
-        });
+        const elementCandidates = this.getAllLocators(
+          element,
+          cssKeyElements,
+          {
+            useTextContent,
+            bruteForceMode
+          }
+        );
         const validLocators = [];
-        const testSelector2 = /* @__PURE__ */ __name((selector) => {
+        const testCandidate = /* @__PURE__ */ __name((chain) => {
+          if (chain.hasDuplicateFilters()) {
+            return;
+          }
           try {
-            const { elements } = this.getLocatorBase(element).locator(selector);
-            if (elements.some((e2) => e2 === this.targetElement)) {
-              validLocators.push({
-                selector,
-                locator: this.getSelectorLocator(selector),
-                elements: elements.filter(
-                  (el) => isInstanceOfHTMLElement(el) || el.constructor.name === this.targetElement.constructor.name
-                )
-              });
+            const { elements } = this.getLocatorBase(element).locator(
+              chain.getSelector()
+            );
+            if (elements?.some((e2) => e2 === this.targetElement)) {
+              chain.elements = elements.filter(
+                (el) => isInstanceOfHTMLElement(el) || el.constructor.name === this.targetElement.constructor.name
+              ), validLocators.push(chain);
             }
           } catch (error) {
-            console.log(error);
+            console.log(error, chain.getSelector());
           }
-        }, "testSelector");
-        if (!locatorsCandidates.length) {
-          elementSelectors.forEach((selector) => testSelector2(selector));
+        }, "testCandidate");
+        if (!locatorsChains.length) {
+          elementCandidates.forEach(
+            (ec) => testCandidate(new LocatorChain([ec]))
+          );
         } else {
-          elementSelectors.forEach((elementSelector) => {
-            locatorsCandidates.forEach(
-              (sc) => testSelector2(`${elementSelector} >> ${sc.selector}`)
+          elementCandidates.forEach((ec) => {
+            locatorsChains.forEach(
+              (sc) => testCandidate(sc.cloneAndAddCandidate(ec))
             );
           });
         }
-        if (validLocators.length === 0 && locatorsCandidates.length === 0) {
+        if (validLocators.length === 0 && locatorsChains.length === 0) {
           const selector = element.tagName.toLowerCase();
-          locatorsCandidates.push({
-            selector,
-            locator: this.getSelectorLocator(selector),
-            elements: this.getLocatorBase(element).locator(element.tagName.toLowerCase()).elements.filter(
-              (el) => isInstanceOfHTMLElement(el)
-            )
-          });
+          locatorsChains.push(
+            new LocatorChain([
+              {
+                selector,
+                locator: this.getSelectorLocator(selector),
+                elements: this.getLocatorBase(element).locator(element.tagName.toLowerCase()).elements.filter(
+                  (el) => isInstanceOfHTMLElement(el)
+                )
+              }
+            ])
+          );
         }
-        locatorsCandidates.push(...validLocators);
+        locatorsChains.push(...validLocators);
         if (isForContextElement) {
-          return locatorsCandidates.map(({ selector, locator }) => ({
-            selector,
-            locator
-          }));
+          return locatorsChains.map((chain) => chain.toLocatorCandidate());
         }
-        if (locatorsCandidates.length > this.MAX_TESTING_SELECTORS || locatorsCandidates.filter((sc) => sc.elements.length === 1).length > this.MAX_SINGLE_ELEMENT_SELECTORS || this.checkTimeout(false)) {
+        if (locatorsChains.length > this.MAX_TESTING_SELECTORS || locatorsChains.filter((sc) => sc.elements.length === 1).length > this.MAX_SINGLE_ELEMENT_SELECTORS || this.checkTimeout(false)) {
           break;
         }
         element = element.parentElement;
       }
       if (isPartOfListItem) {
-        const listItemsCandidates = this.filterListItemsSelectors(locatorsCandidates);
+        const listItemsCandidates = this.filterListItemsSelectors(locatorsChains);
         if (listItemsCandidates?.length) {
-          return listItemsCandidates.map(({ selector, locator }) => ({
-            selector,
-            locator,
+          return listItemsCandidates.map((lic) => ({
+            ...lic.toLocatorCandidate(),
             isListSelector: true
           }));
         }
       }
       let filteredCandidates = [];
       try {
-        for (const candidate of locatorsCandidates) {
+        for (const candidate of locatorsChains) {
           this.checkTimeout();
           filteredCandidates.push(
             ...candidate.elements.length === 1 ? [candidate] : await this.reduceMultiCandidates(candidate)
@@ -32903,10 +32949,7 @@
         const { selector, locator } = await new PlaywrightElementSelectorGenerator().getSelectorAndLocator(
           this.targetElement
         );
-        filteredCandidates.unshift({
-          selector,
-          locator
-        });
+        filteredCandidates.unshift(new LocatorChain([{ selector, locator }]));
       }
       filteredCandidates = filteredCandidates.concat(
         await this.addOptionalParentSelector(
@@ -32915,10 +32958,14 @@
           expandCSSKeyElements
         )
       );
-      return filteredCandidates.map(({ selector, locator }) => ({
-        selector,
-        locator
-      }));
+      return Array.from(
+        new Map(
+          filteredCandidates.map((fc) => [
+            fc.toLocatorCandidate().selector,
+            fc.toLocatorCandidate()
+          ])
+        ).values()
+      );
     }
     /**
      * Test if a selector can locate an element
@@ -32986,10 +33033,12 @@
           2e3
         );
         if (selector.length < 50) {
-          return {
-            selector,
-            locator: `locator('${selector}')`
-          };
+          return new LocatorChain([
+            {
+              selector,
+              locator: `locator('${selector}')`
+            }
+          ]);
         }
       } catch (error) {
         console.error("Error getting CSS selector", error);
@@ -32999,20 +33048,22 @@
      * If playwright selector for element points at a different element - generate selectors for that element as well
      * i.e - playwright can point at a parent button if element is a child of it
      */
-    addOptionalParentSelector(useTextContent, addCSSSelectorGenerator, expandCSSKeyElements) {
+    async addOptionalParentSelector(useTextContent, addCSSSelectorGenerator, expandCSSKeyElements) {
       try {
         const playwright = getElementWindowPlaywright(this.targetElement);
         const playwrightTargetElement = playwright.locator(
           playwright.selector(this.targetElement)
         ).element;
         if (playwrightTargetElement !== this.targetElement && playwrightTargetElement?.contains(this.targetElement)) {
-          return this.generate(playwrightTargetElement, [], {
+          return (await this.generate(playwrightTargetElement, [], {
             isPartOfListItem: false,
             isForContextElement: false,
             useTextContent,
             addCSSSelectorGenerator,
             expandCSSKeyElements
-          });
+          })).map(
+            ({ selector, locator }) => new LocatorChain([{ selector, locator }])
+          );
         }
       } finally {
         return [];
@@ -33221,23 +33272,27 @@
     async reduceMultiCandidates(candidate) {
       await awaitSleep(100);
       const { elements } = candidate;
-      const parts = candidate.selector.split(" >> ");
+      const parts = candidate.getSelector().split(" >> ");
       const newCandidates = [];
       const locatorBase = this.getLocatorBase(this.targetElement);
       const addCandidateWithSelector = /* @__PURE__ */ __name((selector) => {
         try {
-          newCandidates.push({
-            selector,
-            locator: this.getSelectorLocator(selector),
-            options: candidate.options
-          });
+          newCandidates.push(
+            new LocatorChain([
+              {
+                selector,
+                locator: this.getSelectorLocator(selector)
+                //   options: candidate.options,
+              }
+            ])
+          );
           return newCandidates.length >= this.MAX_MULTICANDIDATE_PROCESSING;
         } catch (error) {
           console.error(error);
           return false;
         }
       }, "addCandidateWithSelector");
-      const addCSSFilterToLocator = /* @__PURE__ */ __name((filter) => candidate.selector + // if we used css selector with tag name - concatentate it with the filter
+      const addCSSFilterToLocator = /* @__PURE__ */ __name((filter) => candidate.getSelector() + // if we used css selector with tag name - concatentate it with the filter
       (parts[parts.length - 1] === this.targetElement.tagName.toLowerCase() ? filter : (
         // else - add as a new part
         ` >> internal:and=${escapeForAndLocator(
@@ -33245,7 +33300,7 @@
         )}`
       )), "addCSSFilterToLocator");
       const addIfSingularAndCheckLimit = /* @__PURE__ */ __name((selector) => {
-        if (locatorBase.locator(selector, candidate.options).elements.length === 1) {
+        if (locatorBase.locator(selector).elements.length === 1) {
           return addCandidateWithSelector(selector);
         }
         return false;
@@ -33253,7 +33308,7 @@
       if (elements.length < 5) {
         const index2 = elements.indexOf(this.targetElement);
         if (index2 !== -1) {
-          addCandidateWithSelector(candidate.selector + ` >> nth=${index2}`);
+          addCandidateWithSelector(candidate.getSelector() + ` >> nth=${index2}`);
         }
       }
       const parent = this.targetElement.parentElement;
@@ -33298,12 +33353,11 @@
     }
     getAllLocators(element, cssKeyElements, options = {}) {
       options = {
-        returnLocator: false,
         exact: true,
         useTextContent: true,
         ...options
       };
-      return [
+      const locators = [
         this.getByRoleLocator(element, options),
         options.useTextContent ? this.getByTextLocator(element, options) : null,
         this.getByLabelLocator(element, options),
@@ -33311,26 +33365,80 @@
         this.getByTitleLocator(element, options),
         this.getByAltLocator(element, options),
         this.getTestIdLocator(element, options),
-        ...element === this.targetElement ? [this.getInnerFeaturesLocator(element, options)] : [],
-        ...cssKeyElements.filter((el) => el.element === element).map((el) => el.selector)
+        ...element === this.targetElement ? [this.getInnerFeaturesLocator(element)] : [],
+        ...cssKeyElements.filter((el) => el.element === element).map((el) => ({
+          selector: el.selector,
+          locator: this.getSelectorLocator(el.selector)
+        }))
       ].filter((locator) => locator);
+      if (!locators.length && options.bruteForceMode) {
+        return locators.concat(this.findUniqueCSSLocatorForElement(element));
+      }
+      return locators;
+    }
+    /**
+     * Used when in brute force mode to find unique CSS locator for the element
+     */
+    findUniqueCSSLocatorForElement(element, maxCandidates = 5) {
+      const candidates = [];
+      const addCandidate = /* @__PURE__ */ __name((selector) => {
+        candidates.push([
+          {
+            selector,
+            locator: `locator('${selector}')`
+          }
+        ]);
+        return candidates.length >= maxCandidates;
+      }, "addCandidate");
+      for (const attribute of Array.from(element.attributes).filter(
+        ({ name, value }) => value.length < 30 && !COVERED_ATTRIBUTES.includes(name)
+      )) {
+        try {
+          const selector = `[${attribute.name}${attribute.value ? `="${attribute.value}"` : ""}]`;
+          if (element.ownerDocument.querySelectorAll(selector).length === 1) {
+            if (addCandidate(selector)) {
+              return candidates;
+            }
+          }
+        } catch (error) {
+        }
+      }
+      for (const className of Array.from(element.classList).filter(
+        (cls) => !CLASS_IGNORE_LIST.includes(cls)
+      )) {
+        try {
+          const selector = `.${escapeSelector(className)}`;
+          if (element.ownerDocument.querySelectorAll(selector).length === 1) {
+            if (addCandidate(selector)) {
+              return candidates;
+            }
+          }
+        } catch (error) {
+        }
+      }
+      return candidates;
     }
-    getInnerFeaturesLocator(element, options) {
+    getInnerFeaturesLocator(element) {
       const tag = element.tagName.toLowerCase();
       if (!isInstanceOfHTMLElement(element) || ["html", "body", "div"].includes(tag)) {
         return;
       }
-      const innerFeatures = new InnerFeaturesExtractor().extract(element).filter((f2) => !f2.isRoot).slice(0, 4).map((feature) => getFeatureSelector(feature));
+      const innerFeatures = new InnerFeaturesExtractor().extract(element).filter((f2) => !f2.isRoot).slice(0, 4).map((feature) => getFeatureSelector(feature).pop());
       if (innerFeatures.length < 2) {
         return;
       }
-      return options.returnLocator ? `locator('${tag}', {has: page.locator('${innerFeatures.join("")}')})` : tag + innerFeatures.map((feature) => `:has(${feature})`).join("");
+      const selector = tag + innerFeatures.map((feature) => `:has(${feature})`).join("");
+      return {
+        selector,
+        locator: `locator('${tag}', {has: page.locator('${selector}')})`
+      };
     }
     getByRoleLocator(element, options = {}) {
       try {
         if (!isInstanceOfHTMLElement(element)) {
           throw new Error("Provided element is not an HTMLElement");
         }
+        const usedFilters = {};
         const roleMappings = {
           button: "button",
           input: /* @__PURE__ */ __name((el) => el.type === "checkbox" ? "checkbox" : el.type === "radio" ? "radio" : "textbox", "input"),
@@ -33348,7 +33456,8 @@
           table: "table",
           tr: "row",
           th: "columnheader",
-          td: "cell"
+          td: "cell",
+          img: "img"
         };
         const tagName = element.tagName.toLowerCase();
         const role = element.getAttribute("role") || (roleMappings[tagName] instanceof Function ? roleMappings[tagName](element) : roleMappings[tagName]);
@@ -33375,22 +33484,35 @@
           if (attributeVal) {
             return normalize(attributeVal);
           }
-          const text = normalizeWhiteSpace(elementText(element).full);
+          const injText = elementText(element);
+          const text = normalizeWhiteSpace(injText.full);
           if (!text?.length) {
             return none;
           }
           const textVal = normalize(text);
-          if (this.usedFilters.hasText.includes(textVal.text)) {
-            return none;
-          }
-          this.usedFilters.hasText.push(textVal.text);
+          usedFilters.hasText = textVal.text;
           return textVal;
         }, "getAccessibleName");
         const { text: name, exact } = getAccessibleName();
         if (name && name.length > 0 && name.length < 30) {
           props.push(["name", escapeForAttributeSelector(name, exact)]);
         }
-        return options.returnLocator ? `getByRole('${role}', { ${props.join(", ")} })` : `internal:role=${role}${props.map(([n2, v2]) => `[${n2}=${v2}]`).join("")}`;
+        const getSelection = /* @__PURE__ */ __name(() => {
+          return {
+            locator: `getByRole('${role}', { ${props.join(", ")} })`,
+            selector: `internal:role=${role}${props.map(([n2, v2]) => `[${n2}=${v2}]`).join("")}`,
+            options: usedFilters
+          };
+        }, "getSelection");
+        let selection = getSelection();
+        if (name?.length && exact && !this.getLocatorBase(element).locator(selection.selector).elements.includes(element)) {
+          props.find((p) => p[0] === "name")[1] = escapeForAttributeSelector(
+            name,
+            false
+          );
+          selection = getSelection();
+        }
+        return selection;
       } catch (error) {
         console.error("Error getting role locator", error.message);
       }
@@ -33404,20 +33526,36 @@
         if (!text?.length || text.length > 100) {
           return;
         }
+        const usedFilters = {};
         if (Array.from(element.children).filter((el) => isInstanceOfHTMLElement(el)).some(
           (child) => normalizeWhiteSpace(elementText(child).full) === text
         )) {
-          if (!this.usedFilters.hasText.includes(text)) {
-            this.usedFilters.hasText.push(text);
-            return `${element.tagName.toLowerCase()} >> internal:has-text=${escapeForTextSelector(
-              text,
-              false
-            )}`;
-          }
-          return;
+          usedFilters.hasText = text;
+          const selector = `${element.tagName.toLowerCase()} >> internal:has-text=${escapeForTextSelector(
+            text,
+            false
+          )}`;
+          return {
+            selector,
+            locator: this.getSelectorLocator(selector),
+            options: usedFilters
+          };
+        }
+        const getSelection = /* @__PURE__ */ __name((exact) => {
+          const escapedText = escapeForTextSelector(text, exact);
+          const selector = "internal:text=" + escapedText;
+          return {
+            selector,
+            locator: this.getSelectorLocator(selector),
+            options: usedFilters
+          };
+        }, "getSelection");
+        let selection = getSelection(options.exact);
+        if (options.exact && !this.getLocatorBase(element).locator(selection.selector).elements.includes(element)) {
+          selection = getSelection(false);
+          4;
         }
-        const escapedText = escapeForTextSelector(text, options.exact);
-        return options.returnLocator ? `getByText('${escapedText}')` : "internal:text=" + escapedText;
+        return selection;
       } catch (error) {
       }
     }
@@ -33430,7 +33568,13 @@
           return;
         }
         const respond = /* @__PURE__ */ __name((label) => {
-          return options.returnLocator ? `getByLabel('${label}')` : `internal:label=${escapeForTextSelector(label, options.exact)}`;
+          return {
+            selector: `internal:label=${escapeForTextSelector(
+              label,
+              options.exact
+            )}`,
+            locator: `getByLabel('${label}')`
+          };
         }, "respond");
         const ariaLabel = element.getAttribute("aria-label");
         if (ariaLabel) {
@@ -33485,10 +33629,13 @@
         }
         const attributeVal = element.getAttribute(attribute);
         if (attributeVal) {
-          return options.returnLocator ? `getBy${attribute.charAt(0).toUpperCase() + attribute.slice(1)}('${attributeVal}')` : `internal:attr=[${attribute}=${escapeForAttributeSelector(
-            attributeVal,
-            options.exact
-          )}]`;
+          return {
+            selector: `internal:attr=[${attribute}=${escapeForAttributeSelector(
+              attributeVal,
+              options.exact
+            )}]`,
+            locator: `getBy${attribute.charAt(0).toUpperCase() + attribute.slice(1)}('${attributeVal}')`
+          };
         }
       } catch (error) {
       }
@@ -34050,7 +34197,10 @@
     static {
       __name(this, "ParentChainReducer");
     }
-    async reduce(element, options = { useLionTail: true }) {
+    async reduce(element, options = {
+      useLionTail: true,
+      useChecksumIds: true
+    }) {
       console.log("[ParentChainReducer] will reduce", element);
       if (!isNodeInstanceOf(element, "HTMLElement") && !isNodeInstanceOf(element, "SVGElement")) {
         throw new Error("Element is not an HTMLElement");
@@ -34073,7 +34223,7 @@
      * @param useLionTail whether to use LionTail to get the full dom tree close to the edge
      * @returns string
      */
-    getAncestorsHTMLSnippet(element, { useLionTail = true } = {}) {
+    getAncestorsHTMLSnippet(element, { useLionTail = true, useChecksumIds = true } = {}) {
       this.elementsInSimplifiedDomByChecksumId = {};
       let lionTailMaxOuterHTMLLength = this.MAX_LIONTAIL_SIZE;
       let attributeMaxSize = this.MAX_ATTRIBUTE_SIZE;
@@ -34104,11 +34254,15 @@
         do {
           rootClone = ancestors[0].cloneNode(false);
           let currentClone = rootClone;
+          const rootCloneSerialized = serializeElement(rootClone);
           for (let i2 = 1; i2 < ancestors.length; i2++) {
             if (useLionTail) {
               const lionTailSize = serializeElement(ancestors[i2]).length;
-              if (lionTailSize <= lionTailMaxOuterHTMLLength && serializeElement(rootClone).length + lionTailSize <= this.MAX_SNIPPET_SIZE) {
-                let newClone2 = this.deepCloneNode(ancestors[i2], counter);
+              if (lionTailSize <= lionTailMaxOuterHTMLLength && rootCloneSerialized.length + lionTailSize <= this.MAX_SNIPPET_SIZE) {
+                let newClone2 = this.deepCloneNode(
+                  ancestors[i2],
+                  useChecksumIds ? counter : void 0
+                );
                 currentClone.appendChild(newClone2);
                 break;
               }
@@ -34116,9 +34270,11 @@
             let newClone = normalizeNode(
               ancestors[i2].cloneNode(ancestors[i2] === element)
             );
-            const id = counter.getAndIncrement();
-            newClone.setAttribute("checksumid", id);
-            this.elementsInSimplifiedDomByChecksumId[id] = ancestors[i2];
+            if (useChecksumIds) {
+              const id = counter.getAndIncrement();
+              newClone.setAttribute("checksumid", id);
+              this.elementsInSimplifiedDomByChecksumId[id] = ancestors[i2];
+            }
             currentClone.appendChild(newClone);
             currentClone = newClone;
           }
@@ -34130,7 +34286,9 @@
         } while (rootClone.outerHTML.length > this.MAX_SNIPPET_SIZE && attributeMaxSize > 0);
         rootClone.querySelectorAll("*").forEach((el) => {
         });
-        let htmlSnippet = serializeElement(rootClone);
+        let htmlSnippet = serializeElement(rootClone, {
+          limitAttributeLength: true
+        });
         return htmlSnippet;
       } catch (e2) {
         console.error("Error while getting ancestors HTML snippet", e2);
@@ -34153,7 +34311,7 @@
           const child = currentNode.childNodes[i2];
           const childClone = child.cloneNode(false);
           currentClone.appendChild(childClone);
-          if (isNodeInstanceOf(child, "HTMLElement")) {
+          if (counter && isNodeInstanceOf(child, "HTMLElement")) {
             const id = counter.getAndIncrement();
             childClone.setAttribute("checksumid", id);
             this.elementsInSimplifiedDomByChecksumId[id] = child;
@@ -34417,7 +34575,6 @@
           },
           "*"
         );
-        console.log("selected", this.selected);
       }, "onClick");
       this.handleSubDocument = /* @__PURE__ */ __name((newRootDocument, defaultView) => {
         if (this.subDocumentInspector) {
@@ -34716,14 +34873,14 @@ ${data.locator}`
      * Tests a selector for a given element.
      */
     testElementSelector(selector, element, testVariables, testUniqueness = true) {
-      if (typeof element === "string") {
-        element = this.htmlReducer.getElementForChecksumId(
-          element
-        );
+      const testElement = typeof element === "string" ? this.htmlReducer.getElementForChecksumId(element) : element;
+      if (!testElement) {
+        console.error("Element not found", element);
+        return { valid: false, error: "Element not found" };
       }
       return new PlaywrightCustomLocatorGenerator().testSelector(
         selector,
-        element,
+        testElement,
         testVariables,
         testUniqueness
       );
@@ -34735,16 +34892,18 @@ ${data.locator}`
      * @param useLionTail whether to use the lion tail for the parent chain.
      *                    Lion tail means that we include the closest HTML surrounding of the element
      *                    to add more context to the parent chain and the target element.
+     * @param useChecksumIds whether to use checksumIds in the reduced HTML
      * @returns
      */
-    async getParentChainHTML(element, useLionTail = true) {
+    async getParentChainHTML(element, useLionTail = true, useChecksumIds = true) {
       if (typeof element === "string") {
         element = this.htmlReducer.getElementForChecksumId(
           element
         );
       }
       const response = await this.parentChainReducer.reduce(element, {
-        useLionTail
+        useLionTail,
+        useChecksumIds
       });
       return response.reducedHTML;
     }