ftmocks-utils 1.5.3 → 1.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ftmocks-utils",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "Util functions for FtMocks",
   "main": "src/index.js",
   "scripts": {

package/src/event-run-utils.js

@@ -20,7 +20,7 @@ const createDiffImage = async (img1, img2, diffPath) => {
       threshold: 0.1, // sensitivity
       diffColor: [255, 0, 0], // highlight color (red)
       diffMask: false,
-    }
+    },
   );
 
   fs.writeFileSync(diffPath, PNG.sync.write(diff));
@@ -58,7 +58,7 @@ const matchAndReplaceScreenshot = async (page, event, screenshotsDir) => {
     await createDiffImage(
       img1,
       img2,
-      path.join(screenshotsDir, `diff_${event.id}.png`)
+      path.join(screenshotsDir, `diff_${event.id}.png`),
     );
     return {
       replaced: true,
@@ -170,6 +170,8 @@ const runEvent = async ({
   screenshots = false,
   screenshotsDir = null,
   healSelectors = false,
+  eventsFile = null,
+  allEvents = null,
 }) => {
   try {
     const beforeEvent = async () => {
@@ -178,7 +180,7 @@ const runEvent = async ({
         const res = await matchAndReplaceScreenshot(
           page,
           event,
-          screenshotsDir
+          screenshotsDir,
         );
         if (res.replaced) {
           const locator = await getLocator(page, event);
@@ -200,7 +202,7 @@ const runEvent = async ({
           page,
           event,
           event.target,
-          position
+          position,
         );
         event.target = healedTarget.value;
         const selectors = [];
@@ -210,7 +212,7 @@ const runEvent = async ({
             page,
             event,
             event.selectors[i].value,
-            position
+            position,
           );
           event.selectors[i].value = healedSelector.value;
           if (healedSelector.count !== 1) {
@@ -273,6 +275,10 @@ const runEvent = async ({
       default:
         return "Unsupported event type";
     }
+    if (eventsFile && allEvents) {
+      allEvents.find((e) => e.id === event.id).executed = true;
+      fs.writeFileSync(eventsFile, JSON.stringify(allEvents, null, 2));
+    }
   } catch (error) {
     console.error("Error running event", {
       error: error.message,
@@ -321,6 +327,8 @@ const runEvents = async ({
   screenshots = false,
   screenshotsDir = null,
   healSelectors = false,
+  eventsFile = null,
+  allEvents = null,
 }) => {
   for (const event of events) {
     await runEvent({
@@ -330,6 +338,8 @@ const runEvents = async ({
       screenshots,
       screenshotsDir,
       healSelectors,
+      eventsFile,
+      allEvents,
     });
   }
 };
@@ -338,14 +348,19 @@ const runEventsForTest = async (page, ftmocksConifg, testName) => {
   const eventsFile = path.join(
     getMockDir(ftmocksConifg),
     `test_${nameToFolder(testName)}`,
-    `_events.json`
+    `_events.json`,
   );
   const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
+  events.forEach((event) => {
+    event.executed = false;
+  });
   await runEvents({
     page,
     events,
     delay: ftmocksConifg.delay || 1000,
     screenshots: false,
+    eventsFile,
+    allEvents: events,
   });
 };
 
@@ -354,19 +369,32 @@ const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
   const eventsFile = path.join(
     getMockDir(ftmocksConifg),
     `test_${nameToFolder(testName)}`,
-    `_events.json`
+    `_events.json`,
   );
   const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
+  events.forEach((event) => {
+    event.executed = false;
+  });
 
   // Expose Node function
   await page.exposeFunction("nextEvent", async () => {
     if (currentEventIndex === events.length) {
       return false;
     }
-    let result = await runEvent({ page, event: events[currentEventIndex] });
+    let result = await runEvent({
+      page,
+      event: events[currentEventIndex],
+      eventsFile,
+      allEvents: events,
+    });
     while (result === "Unsupported event type") {
       currentEventIndex = currentEventIndex + 1;
-      result = await runEvent({ page, event: events[currentEventIndex] });
+      result = await runEvent({
+        page,
+        event: events[currentEventIndex],
+        eventsFile,
+        allEvents: events,
+      });
     }
     currentEventIndex = currentEventIndex + 1;
     return true;
@@ -401,7 +429,7 @@ const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
     });
   });
 
-  await runEvent({ page, event: events[0] });
+  await runEvent({ page, event: events[0], eventsFile, allEvents: events });
 };
 
 const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
@@ -409,15 +437,17 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
   const eventsFile = path.join(
     getMockDir(ftmocksConifg),
     `test_${nameToFolder(testName)}`,
-    `_events.json`
+    `_events.json`,
   );
   const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
-
+  events.forEach((event) => {
+    event.executed = false;
+  });
   // Expose Node function
   await page.exposeFunction("getNextEvent", async () => {
     let result = false;
     let nonExecutedEvents = events.filter(
-      (event) => !executedEvents.includes(event?.id)
+      (event) => !executedEvents.includes(event?.id),
     );
     let currentEventIndex = -1;
     while (!result) {
@@ -431,11 +461,11 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
     if (nonExecutedEvents[currentEventIndex]) {
       console.log(
         "➡ Getting locator for event",
-        nonExecutedEvents[currentEventIndex]
+        nonExecutedEvents[currentEventIndex],
       );
       const selector = await getLocator(
         page,
-        nonExecutedEvents[currentEventIndex]
+        nonExecutedEvents[currentEventIndex],
       );
       const position = await getSelectorPosition(page, selector);
       const element = await page.locator(selector).elementHandle();
@@ -641,16 +671,19 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
     });
   });
 
-  await runEvent({ page, event: events[0] });
+  await runEvent({ page, event: events[0], eventsFile, allEvents: events });
 };
 
 const runEventsForScreenshots = async (page, ftmocksConifg, testName) => {
   const eventsFile = path.join(
     getMockDir(ftmocksConifg),
     `test_${nameToFolder(testName)}`,
-    `_events.json`
+    `_events.json`,
   );
   const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
+  events.forEach((event) => {
+    event.executed = false;
+  });
   await runEvents({
     page,
     events,
@@ -659,8 +692,10 @@ const runEventsForScreenshots = async (page, ftmocksConifg, testName) => {
     screenshotsDir: path.join(
       getMockDir(ftmocksConifg),
       `test_${nameToFolder(testName)}`,
-      `screenshots`
+      `screenshots`,
     ),
+    eventsFile,
+    allEvents: events,
   });
   fs.writeFileSync(eventsFile, JSON.stringify(events, null, 2));
   await page.waitForTimeout(1000);
@@ -671,14 +706,19 @@ const runEventsForHealingSelectors = async (page, ftmocksConifg, testName) => {
   const eventsFile = path.join(
     getMockDir(ftmocksConifg),
     `test_${nameToFolder(testName)}`,
-    `_events.json`
+    `_events.json`,
   );
   const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
+  events.forEach((event) => {
+    event.executed = false;
+  });
   await runEvents({
     page,
     events,
     delay: ftmocksConifg.delay || 1000,
     healSelectors: true,
+    eventsFile,
+    allEvents: events,
   });
   fs.writeFileSync(eventsFile, JSON.stringify(events, null, 2));
   await page.waitForTimeout(1000);

package/src/event-utils.js

@@ -6,14 +6,15 @@ const injectEventRecordingScript = async (
   page,
   url,
   ftmocksConifg,
-  testName
+  testName,
+  continueRecordEvents = false,
 ) => {
   console.log("calling injectEventRecordingScript");
   try {
     const eventsFile = path.join(
       getMockDir(ftmocksConifg),
       `test_${nameToFolder(testName)}`,
-      `_events.json`
+      `_events.json`,
     );
     if (!fs.existsSync(eventsFile)) {
       // Ensure the directory exists before writing the eventsFile
@@ -32,7 +33,7 @@ const injectEventRecordingScript = async (
       const screenshotsDir = path.join(
         getMockDir(ftmocksConifg),
         `test_${nameToFolder(testName)}`,
-        "screenshots"
+        "screenshots",
       );
       if (!fs.existsSync(screenshotsDir)) {
         fs.mkdirSync(screenshotsDir, { recursive: true });
@@ -41,7 +42,7 @@ const injectEventRecordingScript = async (
         getMockDir(ftmocksConifg),
         `test_${nameToFolder(testName)}`,
         "screenshots",
-        `screenshot_${imgOptions.name}.png`
+        `screenshot_${imgOptions.name}.png`,
       );
       fs.writeFileSync(screenshotFile, screenshot);
       return screenshotFile;
@@ -72,10 +73,23 @@ const injectEventRecordingScript = async (
       fs.writeFileSync(eventsFile, JSON.stringify(events, null, 2));
     });
 
+    let existingEvents = [];
+    // Read events from events file, if it exists
+    if (continueRecordEvents && fs.existsSync(eventsFile)) {
+      try {
+        const data = fs.readFileSync(eventsFile, "utf8");
+        existingEvents = JSON.parse(data);
+      } catch (err) {
+        console.error("Failed to read events file:", err);
+        existingEvents = [];
+      }
+    }
+
     fs.writeFileSync(
       eventsFile,
       JSON.stringify(
         [
+          ...existingEvents,
           {
             id: crypto.randomUUID(),
             type: "url",
@@ -85,8 +99,8 @@ const injectEventRecordingScript = async (
           },
         ],
         null,
-        2
-      )
+        2,
+      ),
     );
     await page.addInitScript(() => {
       console.log("calling addInitScript");
@@ -149,7 +163,7 @@ const injectEventRecordingScript = async (
             doc,
             null,
             XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
-            null
+            null,
           );
           const elements = [];
           for (let i = 0; i < snapshot.snapshotLength; i++) {
@@ -224,7 +238,7 @@ const injectEventRecordingScript = async (
             document,
             null,
             XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
-            null
+            null,
           );
           return elements.snapshotLength === 1;
         } catch (error) {
@@ -238,7 +252,7 @@ const injectEventRecordingScript = async (
       const getUniqueXpath = (xpath, mainElement) => {
         const prevElements = filterXpathElementsFromHtml(
           prevEventSnapshot,
-          xpath
+          xpath,
         );
         if (prevElements.snapshotLength > 1 && mainElement) {
           return `(${xpath})[${
@@ -251,7 +265,7 @@ const injectEventRecordingScript = async (
       const getUniqueElementSelectorNth = (selector, mainElement) => {
         const prevElements = filterElementsFromHtml(
           prevEventSnapshot,
-          selector
+          selector,
         );
         if (prevElements.length > 1) {
           return getElementsByRank(prevElements, mainElement)[0].index + 1;
@@ -264,11 +278,11 @@ const injectEventRecordingScript = async (
           if (selector.value.startsWith("/")) {
             const prevElements = filterXpathElementsFromHtml(
               prevEventSnapshot,
-              selector.value
+              selector.value,
             );
             const nextElements = filterXpathElementsFromHtml(
               currentEventSnapshot,
-              selector.value
+              selector.value,
             );
             return {
               selector: selector.value,
@@ -278,11 +292,11 @@ const injectEventRecordingScript = async (
           } else {
             const prevElements = filterElementsFromHtml(
               prevEventSnapshot,
-              selector.value
+              selector.value,
             );
             const nextElements = filterElementsFromHtml(
               currentEventSnapshot,
-              selector.value
+              selector.value,
             );
             return {
               selector: selector.value,
@@ -313,13 +327,13 @@ const injectEventRecordingScript = async (
             selectors.push({
               type: "locator",
               value: `${tagName}[data-testid='${element.getAttribute(
-                "data-testid"
+                "data-testid",
               )}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[data-testid='${element.getAttribute(
-                  "data-testid"
+                  "data-testid",
                 )}']`,
-                element
+                element,
               ),
             });
           }
@@ -329,7 +343,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[data-id='${element.getAttribute("data-id")}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[data-id='${element.getAttribute("data-id")}']`,
-                element
+                element,
               ),
             });
           }
@@ -337,13 +351,13 @@ const injectEventRecordingScript = async (
             selectors.push({
               type: "locator",
               value: `${tagName}[data-action='${element.getAttribute(
-                "data-action"
+                "data-action",
               )}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[data-action='${element.getAttribute(
-                  "data-action"
+                  "data-action",
                 )}']`,
-                element
+                element,
               ),
             });
           }
@@ -353,7 +367,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[data-cy='${element.getAttribute("data-cy")}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[data-cy='${element.getAttribute("data-cy")}']`,
-                element
+                element,
               ),
             });
           }
@@ -367,7 +381,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[name='${element.name}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[name='${element.name}']`,
-                element
+                element,
               ),
             });
           } else if (
@@ -380,7 +394,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[name='${element.name}'][value='${element.value}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[name='${element.name}'][value='${element.value}']`,
-                element
+                element,
               ),
             });
           }
@@ -390,7 +404,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[aria-label='${element.ariaLabel}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[aria-label='${element.ariaLabel}']`,
-                element
+                element,
               ),
             });
           }
@@ -400,7 +414,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[role='${element.role}'][name='${element.name}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[role='${element.role}'][name='${element.name}']`,
-                element
+                element,
               ),
             });
           }
@@ -410,7 +424,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[src='${element.getAttribute("src")}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[src='${element.getAttribute("src")}']`,
-                element
+                element,
               ),
             });
           }
@@ -420,7 +434,7 @@ const injectEventRecordingScript = async (
               value: `${tagName}[href='${element.getAttribute("href")}']`,
               nth: getUniqueElementSelectorNth(
                 `${tagName}[href='${element.getAttribute("href")}']`,
-                element
+                element,
               ),
             });
           }
@@ -433,7 +447,7 @@ const injectEventRecordingScript = async (
               type: "locator",
               value: getUniqueXpath(
                 `//${tagName}[@role='${element.role}' and normalize-space(.) = '${escapedText}']`,
-                element
+                element,
               ),
             });
           }
@@ -448,7 +462,7 @@ const injectEventRecordingScript = async (
                   .replace(/'/g, "\\'")
                   .replace(/\s+/g, " ")
                   .trim()}']`,
-                event.target
+                event.target,
               ),
             });
           }
@@ -604,7 +618,7 @@ const injectEventRecordingScript = async (
             target.getAttribute(`on${eventType}`) ||
             target.getAttribute(`${eventType}`) ||
             target.getAttribute(
-              `${eventType.charAt(0).toUpperCase() + eventType.slice(1)}`
+              `${eventType.charAt(0).toUpperCase() + eventType.slice(1)}`,
             )
           ) {
             return target;
@@ -677,7 +691,7 @@ const injectEventRecordingScript = async (
         currentEventSnapshot = document.documentElement.innerHTML;
         const currentTarget = getParentElementWithEventOrId(
           event,
-          "ondblclick"
+          "ondblclick",
         );
         const selectors = getBestSelectors(currentTarget, event);
         getXpathsIncluded(selectors, currentTarget, event);
@@ -699,7 +713,7 @@ const injectEventRecordingScript = async (
         currentEventSnapshot = document.documentElement.innerHTML;
         const currentTarget = getParentElementWithEventOrId(
           event,
-          "oncontextmenu"
+          "oncontextmenu",
         );
         const selectors = getBestSelectors(currentTarget, event);
         getXpathsIncluded(selectors, currentTarget, event);