ftmocks-utils 1.4.3 → 1.4.5

package/package.json

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

package/src/event-run-utils.js

@@ -4,68 +4,112 @@ const { getMockDir, nameToFolder } = require("./common-utils");
 
 const getLocator = async (page, event) => {
   // Check if the event.target exists on the page before returning it.
+  console.log("➡ Getting locator for event", event);
   if (event && event.target && typeof page !== "undefined" && page.locator) {
-    const count = await page.locator(event.target).count();
-    if (count === 1) {
-      return event.target;
-    } else {
-      await page.waitForTimeout(1000);
-      for (let i = 0; i < event.selectors.length; i++) {
-        const count = await page.locator(event.selectors[i].value).count();
+    let locator = null;
+    while (!locator) {
+      const selector = event.target.startsWith("/")
+        ? `xpath=${event.target}`
+        : event.target;
+      try {
+        const count = await page.locator(selector).count();
         if (count === 1) {
-          return event.selectors[i].value;
+          locator = selector;
+        } else {
+          for (let i = 0; i < event.selectors.length; i++) {
+            const selector = event.selectors[i].value.startsWith("/")
+              ? `xpath=${event.selectors[i].value}`
+              : event.selectors[i].value;
+            const count = await page.locator(selector).count();
+            if (count === 1) {
+              locator = selector;
+            }
+          }
         }
+      } catch (error) {
+        console.error("Error getting locator", error, selector);
       }
+      console.log("➡ Waiting for locator", event);
+      await page.waitForTimeout(500);
     }
+    return locator;
   }
   return event.target;
 };
 
-const runEvent = async (page, event, delay = 0) => {
+const getSelectorPosition = async (page, selector) => {
+  const element = await page.locator(selector).elementHandle();
+  const position = await element.boundingBox();
+  console.log("position", position);
+  return position;
+};
+
+const runEvent = async ({
+  page,
+  event,
+  delay = 0,
+  screenshots = false,
+  screenshotsDir = null,
+}) => {
   try {
     console.log("➡ Running event", event);
+    const beforeEvent = async () => {
+      await page.waitForTimeout(delay);
+      if (screenshots) {
+        const locator = await getLocator(page, event);
+        const position = await getSelectorPosition(page, locator);
+        event.screenshotInfo = {
+          name: `${event.id}.png`,
+          position,
+        };
+        await page.screenshot({
+          path: path.join(screenshotsDir, `${event.id}.png`),
+          fullPage: false,
+        });
+      }
+    };
     switch (event.type) {
       case "url":
         await page.goto(event.value);
         break;
       case "click":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.click(await getLocator(page, event));
         break;
       case "input":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.fill(await getLocator(page, event), event.value);
         break;
       case "keypress":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.keyboard.press(await getLocator(page, event), event.key);
         break;
       case "change":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.select(await getLocator(page, event), event.value);
         break;
       case "url":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.goto(await getLocator(page, event), event.value);
         break;
       case "dblclick":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.dblclick(await getLocator(page, event));
         break;
       case "contextmenu":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.contextmenu(await getLocator(page, event));
         break;
       case "hover":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.hover(await getLocator(page, event));
         break;
       case "keydown":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.keyboard.down(await getLocator(page, event), event.key);
         break;
       case "keyup":
-        await page.waitForTimeout(delay);
+        await beforeEvent();
         await page.keyboard.up(await getLocator(page, event), event.key);
         break;
       default:
@@ -83,8 +127,6 @@ const isValidEvent = (event) => {
   try {
     console.log("➡ Validating event", event);
     switch (event?.type) {
-      case "url":
-        return true;
       case "click":
         return true;
       case "input":
@@ -115,9 +157,15 @@ const isValidEvent = (event) => {
   return false;
 };
 
-const runEvents = async (page, events, delay = 1000) => {
+const runEvents = async ({
+  page,
+  events,
+  delay = 1000,
+  screenshots = false,
+  screenshotsDir = null,
+}) => {
   for (const event of events) {
-    await runEvent(page, event, delay);
+    await runEvent({ page, event, delay, screenshots, screenshotsDir });
   }
 };
 
@@ -128,14 +176,12 @@ const runEventsForTest = async (page, ftmocksConifg, testName) => {
     `_events.json`
   );
   const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
-  await runEvents(page, events, ftmocksConifg.delay || 1000);
-};
-
-const getSelectorPosition = async (page, selector) => {
-  const element = await page.locator(selector).elementHandle();
-  const position = await element.boundingBox();
-  console.log("position", position);
-  return position;
+  await runEvents({
+    page,
+    events,
+    delay: ftmocksConifg.delay || 1000,
+    screenshots: false,
+  });
 };
 
 const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
@@ -152,20 +198,25 @@ const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
     console.log("➡ Next event triggered!");
     if (currentEventIndex === events.length) {
       console.log("➡ No more events to run!");
-      return;
+      return false;
     }
-    let result = await runEvent(page, events[currentEventIndex]);
+    let result = await runEvent({ page, event: events[currentEventIndex] });
     while (result === "Unsupported event type") {
       currentEventIndex = currentEventIndex + 1;
-      result = await runEvent(page, events[currentEventIndex]);
+      result = await runEvent({ page, event: events[currentEventIndex] });
     }
     currentEventIndex = currentEventIndex + 1;
+    return true;
   });
 
   await page.exposeFunction("focusOnBodyForPresentationMode", async () => {
     await page.bringToFront();
   });
 
+  await page.exposeFunction("playwrightPageClose", async () => {
+    await page.close();
+  });
+
   // Inject keyboard listener into browser
   await page.addInitScript(() => {
     window.addEventListener("load", async () => {
@@ -174,20 +225,24 @@ const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
       window.focus();
       document.body.focus();
     });
-    window.addEventListener("keydown", (e) => {
+    window.addEventListener("keydown", async (e) => {
       console.log("➡ keydown event triggered!", e);
       if (e.key === "Shift" && !e.repeat) {
         e.preventDefault();
-        window.nextEvent();
+        const result = await window.nextEvent();
+        if (!result) {
+          console.log("➡ No more events to run!");
+          await window.playwrightPageClose();
+        }
       }
     });
   });
 
-  await runEvent(page, events[0]);
+  await runEvent({ page, event: events[0] });
 };
 
 const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
-  let currentEventIndex = 0;
+  const executedEvents = [];
   const eventsFile = path.join(
     getMockDir(ftmocksConifg),
     `test_${nameToFolder(testName)}`,
@@ -198,20 +253,31 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
   // Expose Node function
   await page.exposeFunction("getNextEvent", async () => {
     let result = false;
+    let nonExecutedEvents = events.filter(
+      (event) => !executedEvents.includes(event?.id)
+    );
+    let currentEventIndex = -1;
     while (!result) {
       currentEventIndex = currentEventIndex + 1;
-      if (currentEventIndex === events.length) {
+      if (currentEventIndex === nonExecutedEvents.length) {
         console.log("➡ No more events to validate!");
         return;
       }
-      result = isValidEvent(events[currentEventIndex]);
+      result = isValidEvent(nonExecutedEvents[currentEventIndex]);
     }
-    if (events[currentEventIndex]) {
-      const selector = await getLocator(page, events[currentEventIndex]);
+    if (nonExecutedEvents[currentEventIndex]) {
+      console.log(
+        "➡ Getting locator for event",
+        nonExecutedEvents[currentEventIndex]
+      );
+      const selector = await getLocator(
+        page,
+        nonExecutedEvents[currentEventIndex]
+      );
       const position = await getSelectorPosition(page, selector);
       const element = await page.locator(selector).elementHandle();
       return {
-        event: events[currentEventIndex],
+        event: nonExecutedEvents[currentEventIndex],
         selector,
         position,
         element,
@@ -220,6 +286,14 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
     return null;
   });
 
+  await page.exposeFunction("addExecutedEvent", (eventId) => {
+    executedEvents.push(eventId);
+  });
+
+  await page.exposeFunction("playwrightPageClose", async () => {
+    await page.close();
+  });
+
   // Inject keyboard listener into browser
   await page.addInitScript(async () => {
     let currentEventInfo = null;
@@ -243,6 +317,44 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
     popover.style.borderRadius = "8px";
     popover.style.boxShadow = "0 2px 12px rgba(0,0,0,0.25)";
 
+    // Success Training Popover
+    const successPopover = document.createElement("div");
+    successPopover.id = "ftmocks-success-popover-training-mode";
+    successPopover.style.position = "fixed";
+    successPopover.style.top = "32px";
+    successPopover.style.left = "50%";
+    successPopover.style.transform = "translateX(-50%)";
+    successPopover.style.minWidth = "120px";
+    successPopover.style.height = "46px";
+    successPopover.style.background = "rgba(60,180,75,0.98)";
+    successPopover.style.color = "#fff";
+    successPopover.style.display = "none";
+    successPopover.style.zIndex = "100000";
+    successPopover.style.fontFamily = "sans-serif";
+    successPopover.style.fontSize = "16px";
+    successPopover.style.textAlign = "center";
+    successPopover.style.lineHeight = "1.4";
+    successPopover.style.padding = "12px 32px";
+    successPopover.style.borderRadius = "8px";
+    successPopover.style.boxShadow = "0 2px 12px rgba(0,0,0,0.20)";
+    successPopover.textContent = "✅ Training Success!";
+
+    // Utility to show the success popover for a short period
+    function showSuccessPopover(message = "✅ Training Success!") {
+      successPopover.textContent = message;
+      if (!document.getElementById("ftmocks-success-popover-training-mode")) {
+        document.body.appendChild(successPopover);
+      }
+      successPopover.style.display = "block";
+      setTimeout(() => {
+        successPopover.style.display = "none";
+        document
+          .getElementById("ftmocks-success-popover-training-mode")
+          ?.remove();
+        window.playwrightPageClose();
+      }, 3000);
+    }
+
     const highlighter = document.createElement("div");
     highlighter.id = "ftmocks-highlighter-training-mode";
     highlighter.style.position = "absolute";
@@ -254,8 +366,11 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
     highlighter.style.border = "2px solid #3fa9f5";
     highlighter.style.display = "none";
     highlighter.style.pointerEvents = "none";
+    highlighter.style.zIndex = "99999";
 
     function showPopover(eventInfo) {
+      console.log("➡ Showing popover", eventInfo);
+      window.addExecutedEvent(eventInfo.event.id);
       if (!document.getElementById("ftmocks-popover-training-mode")) {
         document.body.appendChild(popover);
       }
@@ -279,6 +394,10 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
 
     function hidePopover() {
       popover.style.display = "none";
+      highlighter.style.display = "none";
+      document.getElementById("ftmocks-popover-training-mode")?.remove();
+      document.getElementById("ftmocks-highlighter-training-mode")?.remove();
+      showSuccessPopover("✅ Training Success!");
     }
 
     const initialEventRun = async () => {
@@ -288,16 +407,28 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
       }
     };
 
+    const showNextEvent = async () => {
+      currentEventInfo = await window.getNextEvent();
+      if (currentEventInfo) {
+        showPopover(currentEventInfo);
+      } else {
+        hidePopover();
+      }
+    };
+
     const matchElement = (event, currentEventInfo) => {
-      console.log(
-        "➡ Matching element!",
-        event.target.isEqualNode(currentEventInfo?.element),
-        currentEventInfo?.element?.contains(event.target)
-      );
-      return (
-        event.target.isEqualNode(currentEventInfo?.element) ||
-        currentEventInfo?.element?.contains(event.target)
-      );
+      const inBoudingBox =
+        currentEventInfo?.position?.x <= event.clientX &&
+        currentEventInfo?.position?.x + currentEventInfo?.position?.width >=
+          event.clientX &&
+        currentEventInfo?.position?.y <= event.clientY &&
+        currentEventInfo?.position?.y + currentEventInfo?.position?.height >=
+          event.clientY;
+      console.log("➡ In bounding box?", inBoudingBox);
+      const matchingElement =
+        currentEventInfo?.element?.isEqualNode(event.target) ||
+        currentEventInfo?.element?.contains(event.target);
+      return inBoudingBox || matchingElement;
     };
 
     window.addEventListener("load", async () => {
@@ -305,21 +436,12 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
     });
 
     window.addEventListener("click", async (event) => {
-      console.log(
-        "➡ Click event triggered!",
-        event.target.isEqualNode(currentEventInfo?.element),
-        currentEventInfo?.element?.contains(event.target)
-      );
       if (
         currentEventInfo?.event?.type === "click" &&
         matchElement(event, currentEventInfo)
       ) {
-        currentEventInfo = await window.getNextEvent();
-        if (currentEventInfo) {
-          showPopover(currentEventInfo);
-        } else {
-          hidePopover();
-        }
+        console.log("➡ Click event triggered!", event);
+        showNextEvent();
       }
     });
     window.addEventListener("dblclick", async (event) => {
@@ -327,12 +449,7 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
         currentEventInfo?.event?.type === "dblclick" &&
         matchElement(event, currentEventInfo)
       ) {
-        currentEventInfo = await window.getNextEvent();
-        if (currentEventInfo) {
-          showPopover(currentEventInfo);
-        } else {
-          hidePopover();
-        }
+        showNextEvent();
       }
     });
     window.addEventListener("contextmenu", async (event) => {
@@ -340,12 +457,7 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
         currentEventInfo?.event?.type === "contextmenu" &&
         matchElement(event, currentEventInfo)
       ) {
-        currentEventInfo = await window.getNextEvent();
-        if (currentEventInfo) {
-          showPopover(currentEventInfo);
-        } else {
-          hidePopover();
-        }
+        showNextEvent();
       }
     });
     window.addEventListener("input", async (event) => {
@@ -353,10 +465,7 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
         currentEventInfo?.event?.type === "input" &&
         matchElement(event, currentEventInfo)
       ) {
-        currentEventInfo = await window.getNextEvent();
-        if (currentEventInfo) {
-          showPopover(currentEventInfo);
-        }
+        showNextEvent();
       }
     });
     window.addEventListener("keypress", async (event) => {
@@ -364,15 +473,35 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
         currentEventInfo?.event?.type === "keypress" &&
         matchElement(event, currentEventInfo)
       ) {
-        currentEventInfo = await window.getNextEvent();
-        if (currentEventInfo) {
-          showPopover(currentEventInfo);
-        }
+        showNextEvent();
       }
     });
   });
 
-  await runEvent(page, events[0]);
+  await runEvent({ page, event: events[0] });
+};
+
+const runEventsForScreenshots = async (page, ftmocksConifg, testName) => {
+  const eventsFile = path.join(
+    getMockDir(ftmocksConifg),
+    `test_${nameToFolder(testName)}`,
+    `_events.json`
+  );
+  const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
+  await runEvents({
+    page,
+    events,
+    delay: ftmocksConifg.delay || 1000,
+    screenshots: true,
+    screenshotsDir: path.join(
+      getMockDir(ftmocksConifg),
+      `test_${nameToFolder(testName)}`,
+      `screenshots`
+    ),
+  });
+  fs.writeFileSync(eventsFile, JSON.stringify(events, null, 2));
+  await page.waitForTimeout(1000);
+  await page.close();
 };
 
 module.exports = {
@@ -380,5 +509,6 @@ module.exports = {
   runEventsForTest,
   runEventsInPresentationMode,
   runEventsInTrainingMode,
+  runEventsForScreenshots,
   runEvent,
 };

package/src/index.js

@@ -27,6 +27,7 @@ const {
   runEvent,
   runEventsInPresentationMode,
   runEventsInTrainingMode,
+  runEventsForScreenshots,
 } = require("./event-run-utils");
 
 // Export functions as a module
@@ -54,4 +55,5 @@ module.exports = {
   runEvent,
   runEventsInPresentationMode,
   runEventsInTrainingMode,
+  runEventsForScreenshots,
 };