@checksum-ai/runtime 1.1.30 → 1.1.32

package/checksum-root/login.ts

@@ -1,9 +1,15 @@
-import { ChecksumConfig, IChecksumPage } from "@checksum-ai/runtime";
+import { 
+  ChecksumConfig, 
+  IChecksumPage,
+  ChecksumConfigEnvironment,
+  EnvironmentUser 
+} from "@checksum-ai/runtime";
 import { expect, request } from "@playwright/test";
 
 export default async function login(
   page: IChecksumPage,
-  config: ChecksumConfig
+  config: ChecksumConfig,
+  environmentInfo: { environment: ChecksumConfigEnvironment; user: EnvironmentUser }
 ) {
   /**
    * This code provides examples of how to write functions for different login scenarios.

package/checksumlib.js

@@ -9653,6 +9653,9 @@
     }
     getElementWindowPlaywright(node2) {
       const elementWindow = node2.ownerDocument.defaultView;
+      if (!elementWindow) {
+        return window.playwright;
+      }
       if (elementWindow !== window && !elementWindow.playwright) {
         elementWindow.playwright = window.playwright;
       }
@@ -9664,13 +9667,6 @@
           node2
         ).generateSelectorAndLocator(node2);
       } catch (error) {
-        console.log(
-          "get selector and locator error",
-          node2.nodeType,
-          node2,
-          "\n",
-          error
-        );
         if (retriesLeft > 0) {
           await (0, import_await_sleep.default)(500);
           return this.safeGetSelectorAndLocator(node2, {
@@ -29510,6 +29506,21 @@
       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 = [];
@@ -32631,6 +32642,7 @@
       this.MAX_TESTING_SELECTORS = 50;
       this.MAX_SINGLE_ELEMENT_SELECTORS = 5;
       this.MAX_PROCESSING_TIME = 15e3;
+      this.MAX_MULTICANDIDATE_PROCESSING = 5;
     }
     static {
       __name(this, "PlaywrightCustomLocatorGenerator");
@@ -32699,7 +32711,7 @@
                 selector,
                 locator: this.getSelectorLocator(selector),
                 elements: elements.filter(
-                  (el) => isInstanceOfHTMLElement(el)
+                  (el) => isInstanceOfHTMLElement(el) || el.constructor.name === this.targetElement.constructor.name
                 )
               });
             }
@@ -32748,21 +32760,20 @@
           }));
         }
       }
-      let filteredCandidated = [];
+      let filteredCandidates = [];
       try {
-        filteredCandidated = locatorsCandidates.reduce((acc, candidate) => {
+        for (const candidate of locatorsCandidates) {
           this.checkTimeout();
-          acc.push(
-            ...candidate.elements.length === 1 ? [candidate] : this.reduceMultiCandidates(candidate)
+          filteredCandidates.push(
+            ...candidate.elements.length === 1 ? [candidate] : await this.reduceMultiCandidates(candidate)
           );
-          return acc;
-        }, []);
+        }
       } catch (error) {
         if (error instanceof TimeoutError) {
           console.log("Timeout error");
         }
       }
-      if (!filteredCandidated?.length) {
+      if (!filteredCandidates?.length) {
         console.log("no single element selector found");
         if (!expandCSSKeyElements) {
           return this.generate(element, cssKeyElements, {
@@ -32777,19 +32788,26 @@
       if (addCSSSelectorGenerator) {
         const cssSelection = await this.addCSSSelectorGenerator();
         if (cssSelection) {
-          filteredCandidated.unshift(cssSelection);
+          filteredCandidates.unshift(cssSelection);
         }
       }
       if (this.rootNode === document && useTextContent) {
         const { selector, locator } = await new PlaywrightElementSelectorGenerator().getSelectorAndLocator(
           this.targetElement
         );
-        filteredCandidated.unshift({
+        filteredCandidates.unshift({
           selector,
           locator
         });
       }
-      return filteredCandidated.map(({ selector, locator }) => ({
+      filteredCandidates = filteredCandidates.concat(
+        await this.addOptionalParentSelector(
+          useTextContent,
+          addCSSSelectorGenerator,
+          expandCSSKeyElements
+        )
+      );
+      return filteredCandidates.map(({ selector, locator }) => ({
         selector,
         locator
       }));
@@ -32869,6 +32887,26 @@
         console.error("Error getting CSS selector", error);
       }
     }
+    /**
+     * 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) {
+      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, [], {
+          isPartOfListItem: false,
+          isForContextElement: false,
+          useTextContent,
+          addCSSSelectorGenerator,
+          expandCSSKeyElements
+        });
+      }
+      return [];
+    }
     /**
      * Add CSS key features to the element chain, based on attributes that are not covered by playwright selectors
      *
@@ -32885,25 +32923,33 @@
             ({ name, value }) => value.length < 30 && !COVERED_ATTRIBUTES.includes(name)
           );
           newFeatures.forEach((feature) => {
-            if (added.length > limit - 1) {
-              return;
-            }
-            const selector = `[${feature.name}${feature.value ? `="${feature.value}"` : ""}]`;
             try {
-              if (element.parentElement?.querySelectorAll(selector).length > 1) {
+              if (added.length > limit - 1) {
+                return;
+              }
+              const selector = `[${feature.name}${feature.value ? `="${feature.value}"` : ""}]`;
+              try {
+                if (!element.parentElement || element.parentElement.querySelectorAll(selector).length > 1) {
+                  return;
+                }
+              } catch (error) {
+                console.warn(`Error checking selector - ${selector}, continuing`);
                 return;
               }
+              if (!cssKeyElements.some((el) => el.selector.includes(selector)) && this.getLocatorBase(element).locator(selector).element === element) {
+                const newFeature = {
+                  element,
+                  selector
+                };
+                cssKeyElements.push(newFeature);
+                added.push(newFeature);
+              }
             } catch (error) {
-              console.warn(`Error checking selector - ${selector}, continuing`);
-              return;
-            }
-            if (!cssKeyElements.some((el) => el.selector.includes(selector)) && this.getLocatorBase(element).locator(selector).element === element) {
-              const newFeature = {
-                element,
-                selector
-              };
-              cssKeyElements.push(newFeature);
-              added.push(newFeature);
+              console.warn(
+                "Error processing css key feature",
+                { name: feature.name, value: feature.value },
+                error
+              );
             }
           });
           element = element.parentElement;
@@ -33061,22 +33107,23 @@
      *
      * @returns array of new candidates that return only one element
      */
-    reduceMultiCandidates(candidate) {
+    async reduceMultiCandidates(candidate) {
+      await awaitSleep(100);
       const { elements } = candidate;
       const parts = candidate.selector.split(" >> ");
       const newCandidates = [];
+      const locatorBase = this.getLocatorBase(this.targetElement);
       const addCandidateWithSelector = /* @__PURE__ */ __name((selector) => {
         try {
           newCandidates.push({
             selector,
             locator: this.getSelectorLocator(selector),
-            elements: this.getLocatorBase(this.targetElement).locator(selector, candidate.options).elements.filter(
-              (el) => isInstanceOfHTMLElement(el)
-            ),
             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
@@ -33086,6 +33133,12 @@
           this.targetElement.tagName.toLowerCase() + filter
         )}`
       )), "addCSSFilterToLocator");
+      const addIfSingularAndCheckLimit = /* @__PURE__ */ __name((selector) => {
+        if (locatorBase.locator(selector, candidate.options).elements.length === 1) {
+          return addCandidateWithSelector(selector);
+        }
+        return false;
+      }, "addIfSingularAndCheckLimit");
       if (elements.length < 5) {
         const index2 = elements.indexOf(this.targetElement);
         if (index2 !== -1) {
@@ -33098,41 +33151,38 @@
       )) {
         const index2 = Array.from(parent.children).indexOf(this.targetElement);
         if (index2 !== -1) {
-          addCandidateWithSelector(
-            addCSSFilterToLocator(`:nth-child(${index2 + 1})`)
-          );
+          const selector = addCSSFilterToLocator(`:nth-child(${index2 + 1})`);
+          if (addIfSingularAndCheckLimit(selector)) {
+            addCandidateWithSelector(selector);
+          }
         }
       }
-      Array.from(this.targetElement.classList).forEach((className) => {
+      for (const className of Array.from(this.targetElement.classList).filter(
+        (cls) => !CLASS_IGNORE_LIST.includes(cls)
+      )) {
         const selector = addCSSFilterToLocator(`.${escapeSelector(className)}`);
         try {
-          if (this.getLocatorBase(this.targetElement).locator(
-            selector,
-            candidate.options
-          ).elements.length === 1) {
-            addCandidateWithSelector(selector);
+          if (addIfSingularAndCheckLimit(selector)) {
+            return newCandidates;
           }
         } catch (error) {
           console.error(error);
         }
-      });
-      Array.from(this.targetElement.attributes).filter(
-        (attr) => !["class", "style", "id", "href", "src"].includes(attr.name)
-      ).forEach((attr) => {
+      }
+      for (const attr of Array.from(this.targetElement.attributes).filter(
+        (attr2) => !COVERED_ATTRIBUTES.includes(attr2.name)
+      )) {
         const selector = addCSSFilterToLocator(
           `[${attr.name}` + (attr.value ? `="${attr.value}"]` : "]")
         );
         try {
-          if (this.getLocatorBase(this.targetElement).locator(
-            selector,
-            candidate.options
-          ).elements.length === 1) {
-            addCandidateWithSelector(selector);
+          if (addIfSingularAndCheckLimit(selector)) {
+            return newCandidates;
           }
         } catch (error) {
           console.error(error);
         }
-      });
+      }
       return newCandidates;
     }
     getAllLocators(element, cssKeyElements, options = {}) {
@@ -33231,7 +33281,7 @@
         }
         return options.returnLocator ? `getByRole('${role}', { ${props.join(", ")} })` : `internal:role=${role}${props.map(([n2, v2]) => `[${n2}=${v2}]`).join("")}`;
       } catch (error) {
-        console.error("Error getting role locator", error);
+        console.error("Error getting role locator", error.message);
       }
     }
     getByTextLocator(element, options = {}) {
@@ -33370,7 +33420,14 @@
   __name(isInstanceOfHTMLElement, "isInstanceOfHTMLElement");
 
   // src/lib/test-generator/selectors/compound-selector.ts
-  var CLASS_IGNORE_LIST = [":hover", ":focus", ":active"];
+  var CLASS_IGNORE_LIST = [
+    ":hover",
+    ":focus",
+    ":active",
+    "\\:hover",
+    "\\:focus",
+    "\\:active"
+  ];
   var CompoundSelector = class {
     constructor(htmlReducer) {
       this.htmlReducer = htmlReducer;
@@ -33793,7 +33850,7 @@
       return path.join(" ").trim();
     }
     getSelectorPart(element, { useId = false, useClasses = true, useTag = true }) {
-      if (useId && element.id) {
+      if (useId && element.id && element.id.match(/^\D/)) {
         return `#${element.id}`;
       }
       let selector = useTag ? element.tagName.toLowerCase() : "";
@@ -34584,7 +34641,8 @@ ${data.locator}`
         this.initialized = true;
       }
       if (initSessionRecorder) {
-        this.sessionMirror = new SessionRecorder((event) => {
+        this.sessionMirror = new SessionRecorder((event, isCheckout) => {
+          event.isCheckout = isCheckout;
           window.checksumSendBroadcastMessage?.("rrweb", [event]);
           rrwebEventsStorageManager.onRRwebEvent(event);
         }, config.recordOptions);