ftmocks-utils 1.4.4 → 1.4.6

package/package.json

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

package/src/event-run-utils.js

@@ -8,18 +8,21 @@ const getLocator = async (page, event) => {
   if (event && event.target && typeof page !== "undefined" && page.locator) {
     let locator = null;
     while (!locator) {
-      const selector = event.target.startsWith("/")
-        ? `xpath=${event.target}`
-        : event.target;
+      const selector =
+        event.target.startsWith("/") || event.target.startsWith("(/")
+          ? `xpath=${event.target}`
+          : event.target;
       try {
         const count = await page.locator(selector).count();
         if (count === 1) {
           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 selector =
+              event.selectors[i].value.startsWith("/") ||
+              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;
@@ -37,51 +40,157 @@ const getLocator = async (page, event) => {
   return event.target;
 };
 
-const runEvent = async (page, event, delay = 0) => {
+const healSelector = async (page, event, selector, position) => {
+  console.log("➡ Healing selector for event", event);
+  let locator = selector;
+  if (locator.startsWith("/") || locator.startsWith("(/")) {
+    locator = `xpath=${locator}`;
+    try {
+      // INSERT_YOUR_CODE
+      // Get all elements that match the given locator
+      const elements = await page.locator(locator).elementHandles();
+      if (elements.length > 1) {
+        let index = 0;
+        for (let i = 0; i < elements.length; i++) {
+          const element = elements[i];
+          const currPosition = await element.boundingBox();
+          if (
+            currPosition.x >= position.x &&
+            currPosition.y >= position.y &&
+            currPosition.x + currPosition.width <=
+              position.x + position.width &&
+            currPosition.y + currPosition.height <= position.y + position.height
+          ) {
+            index = i;
+            break;
+          }
+        }
+        return {
+          value: `(${selector})[${index + 1}]`,
+          count: 1,
+        };
+      } else {
+        return {
+          value: selector,
+          count: elements.length,
+        };
+      }
+    } catch (error) {
+      console.error("Error getting locator", error, selector);
+    }
+  }
+  return {
+    value: selector,
+    count: 1,
+  };
+};
+
+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,
+  healSelectors = false,
+}) => {
   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,
+        });
+      }
+      if (healSelectors) {
+        const locator = await getLocator(page, event);
+        const position = await getSelectorPosition(page, locator);
+        const healedTarget = await healSelector(
+          page,
+          event,
+          event.target,
+          position
+        );
+        event.target = healedTarget.value;
+        const selectors = [];
+        const laterToBeAdded = [];
+        for (let i = 0; i < event.selectors.length; i++) {
+          const healedSelector = await healSelector(
+            page,
+            event,
+            event.selectors[i].value,
+            position
+          );
+          event.selectors[i].value = healedSelector.value;
+          if (healedSelector.count !== 1) {
+            laterToBeAdded.push(event.selectors[i]);
+          } else {
+            selectors.push(event.selectors[i]);
+          }
+        }
+        selectors.push(...laterToBeAdded);
+        if (healedTarget.count !== 1) {
+          event.target = selectors[0].value;
+        }
+        event.selectors = selectors;
+      }
+    };
     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:
@@ -129,9 +238,23 @@ const isValidEvent = (event) => {
   return false;
 };
 
-const runEvents = async (page, events, delay = 1000) => {
+const runEvents = async ({
+  page,
+  events,
+  delay = 1000,
+  screenshots = false,
+  screenshotsDir = null,
+  healSelectors = false,
+}) => {
   for (const event of events) {
-    await runEvent(page, event, delay);
+    await runEvent({
+      page,
+      event,
+      delay,
+      screenshots,
+      screenshotsDir,
+      healSelectors,
+    });
   }
 };
 
@@ -142,14 +265,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) => {
@@ -168,10 +289,10 @@ const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
       console.log("➡ No more events to run!");
       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;
@@ -206,7 +327,7 @@ const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
     });
   });
 
-  await runEvent(page, events[0]);
+  await runEvent({ page, event: events[0] });
 };
 
 const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
@@ -375,6 +496,15 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
       }
     };
 
+    const showNextEvent = async () => {
+      currentEventInfo = await window.getNextEvent();
+      if (currentEventInfo) {
+        showPopover(currentEventInfo);
+      } else {
+        hidePopover();
+      }
+    };
+
     const matchElement = (event, currentEventInfo) => {
       const inBoudingBox =
         currentEventInfo?.position?.x <= event.clientX &&
@@ -400,13 +530,7 @@ const runEventsInTrainingMode = async (page, ftmocksConifg, testName) => {
         matchElement(event, currentEventInfo)
       ) {
         console.log("➡ Click event triggered!", event);
-        currentEventInfo = await window.getNextEvent();
-        console.log("➡ Next event", currentEventInfo);
-        if (currentEventInfo) {
-          showPopover(currentEventInfo);
-        } else {
-          hidePopover();
-        }
+        showNextEvent();
       }
     });
     window.addEventListener("dblclick", async (event) => {
@@ -414,12 +538,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) => {
@@ -427,12 +546,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) => {
@@ -440,10 +554,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) => {
@@ -451,15 +562,53 @@ 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();
+};
+
+const runEventsForHealingSelectors = 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,
+    healSelectors: true,
+  });
+  fs.writeFileSync(eventsFile, JSON.stringify(events, null, 2));
+  await page.waitForTimeout(1000);
+  await page.close();
 };
 
 module.exports = {
@@ -467,5 +616,7 @@ module.exports = {
   runEventsForTest,
   runEventsInPresentationMode,
   runEventsInTrainingMode,
+  runEventsForScreenshots,
+  runEventsForHealingSelectors,
   runEvent,
 };

package/src/index.js

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