ftmocks-utils 1.3.8 → 1.4.0

package/package.json

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

package/src/event-run-utils.js

@@ -0,0 +1,140 @@
+const path = require("path");
+const fs = require("fs");
+const { getMockDir, nameToFolder } = require("./common-utils");
+
+const getLocator = async (page, event) => {
+  // Check if the event.target exists on the page before returning it.
+  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();
+        if (count === 1) {
+          return event.selectors[i].value;
+        }
+      }
+    }
+  }
+  return event.target;
+};
+
+const runEvent = async (page, event, delay = 0) => {
+  try {
+    console.log("➡ Running event", event);
+    switch (event.type) {
+      case "url":
+        await page.goto(event.value);
+        break;
+      case "click":
+        await page.waitForTimeout(delay);
+        await page.click(await getLocator(page, event));
+        break;
+      case "input":
+        await page.waitForTimeout(delay);
+        await page.fill(await getLocator(page, event), event.value);
+        break;
+      case "keypress":
+        await page.waitForTimeout(delay);
+        await page.keyboard.press(await getLocator(page, event), event.key);
+        break;
+      case "change":
+        await page.waitForTimeout(delay);
+        await page.select(await getLocator(page, event), event.value);
+        break;
+      case "url":
+        await page.waitForTimeout(delay);
+        await page.goto(await getLocator(page, event), event.value);
+        break;
+      case "dblclick":
+        await page.waitForTimeout(delay);
+        await page.dblclick(await getLocator(page, event));
+        break;
+      case "contextmenu":
+        await page.waitForTimeout(delay);
+        await page.contextmenu(await getLocator(page, event));
+        break;
+      case "hover":
+        await page.waitForTimeout(delay);
+        await page.hover(await getLocator(page, event));
+        break;
+      case "keydown":
+        await page.waitForTimeout(delay);
+        await page.keyboard.down(await getLocator(page, event), event.key);
+        break;
+      case "keyup":
+        await page.waitForTimeout(delay);
+        await page.keyboard.up(await getLocator(page, event), event.key);
+        break;
+      default:
+        return "Unsupported event type";
+    }
+  } catch (error) {
+    console.error("Error running event", {
+      error: error.message,
+      stack: error.stack,
+    });
+  }
+};
+
+const runEvents = async (page, events, delay = 1000) => {
+  for (const event of events) {
+    await runEvent(page, event, delay);
+  }
+};
+
+const runEventsForTest = 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, ftmocksConifg.delay || 1000);
+};
+
+const runEventsInPresentationMode = async (page, ftmocksConifg, testName) => {
+  let currentEventIndex = 1;
+  const eventsFile = path.join(
+    getMockDir(ftmocksConifg),
+    `test_${nameToFolder(testName)}`,
+    `_events.json`
+  );
+  const events = JSON.parse(fs.readFileSync(eventsFile, "utf8"));
+
+  // Expose Node function
+  await page.exposeFunction("nextEvent", async () => {
+    console.log("➡ Next event triggered!");
+    if (currentEventIndex === events.length) {
+      console.log("➡ No more events to run!");
+      return;
+    }
+    let result = await runEvent(page, events[currentEventIndex]);
+    while (result === "Unsupported event type") {
+      currentEventIndex = currentEventIndex + 1;
+      result = await runEvent(page, events[currentEventIndex]);
+    }
+    currentEventIndex = currentEventIndex + 1;
+  });
+
+  // Inject keyboard listener into browser
+  await page.addInitScript(() => {
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowRight") {
+        console.log("➡ ArrowRight key pressed!");
+        window.nextEvent();
+      }
+    });
+  });
+
+  await runEvent(page, events[0]);
+};
+
+module.exports = {
+  runEvents,
+  runEventsForTest,
+  runEventsInPresentationMode,
+  runEvent,
+};

package/src/event-utils.js

@@ -24,8 +24,31 @@ const injectEventRecordingScript = async (
       fs.writeFileSync(eventsFile, JSON.stringify([], null, 2));
     }
 
+    const takeScreenshot = async (imgOptions) => {
+      if (!ftmocksConifg.recordScreenshots) {
+        return;
+      }
+      const screenshot = await page.screenshot({ fullPage: false });
+      const screenshotsDir = path.join(
+        getMockDir(ftmocksConifg),
+        `test_${nameToFolder(testName)}`,
+        "screenshots"
+      );
+      if (!fs.existsSync(screenshotsDir)) {
+        fs.mkdirSync(screenshotsDir, { recursive: true });
+      }
+      const screenshotFile = path.join(
+        getMockDir(ftmocksConifg),
+        `test_${nameToFolder(testName)}`,
+        "screenshots",
+        `screenshot_${imgOptions.name}.png`
+      );
+      fs.writeFileSync(screenshotFile, screenshot);
+      return screenshotFile;
+    };
+
     // Expose a function to receive click info from the browser
-    await page.exposeFunction("saveEventForTest", (event) => {
+    await page.exposeFunction("saveEventForTest", async (event) => {
       event.id = crypto.randomUUID();
       if (!fs.existsSync(eventsFile)) {
         // Ensure the directory exists before writing the eventsFile
@@ -41,8 +64,10 @@ const injectEventRecordingScript = async (
         events[events.length - 1]?.type === "input"
       ) {
         events[events.length - 1].value = event.value;
+        await takeScreenshot({ name: events[events.length - 1].id });
       } else {
         events.push(event);
+        await takeScreenshot({ name: event.id });
       }
       fs.writeFileSync(eventsFile, JSON.stringify(events, null, 2));
     });
@@ -399,25 +424,30 @@ const injectEventRecordingScript = async (
               ),
             });
           }
-          const escapedText = element.textContent.replace(/"/g, '\\"');
+          const escapedText = element.textContent
+            .replace(/'/g, "\\'")
+            .replace(/\s+/g, " ")
+            .trim();
           if (element.role && element.textContent) {
             selectors.push({
               type: "locator",
-              value: `${tagName}[role='${element.role}'][contains(text(), '${escapedText}')]`,
-              nth: getUniqueElementSelectorNth(
-                `${tagName}[role='${element.role}'][contains(text(), '${escapedText}')]`,
+              value: getUniqueXpath(
+                `//${tagName}[@role='${element.role}' and normalize-space(.) = '${escapedText}']`,
                 element
               ),
             });
           }
-          if (event?.target?.textContent?.length > 0) {
+          if (
+            event?.target?.textContent?.length > 0 &&
+            event?.target?.textContent?.length < 200
+          ) {
             selectors.push({
               type: "locator",
               value: getUniqueXpath(
-                `//*[contains(text(), '${event.target.textContent.replace(
-                  /"/g,
-                  '\\"'
-                )}')]`,
+                `//*[normalize-space(.)='${event.target.textContent
+                  .replace(/'/g, "\\'")
+                  .replace(/\s+/g, " ")
+                  .trim()}']`,
                 event.target
               ),
             });
@@ -590,7 +620,7 @@ const injectEventRecordingScript = async (
         return {
           tagName: target.tagName,
           textContent:
-            target.textContent?.length > 0 && target.textContent?.length < 100
+            target.textContent?.length > 0 && target.textContent?.length < 200
               ? target.textContent
               : null,
           id: target.id,

package/src/index.js

@@ -22,6 +22,11 @@ const {
 } = require("./playwright-utils");
 const { saveSnap, deleteAllSnaps } = require("./snap-utils");
 const { injectEventRecordingScript } = require("./event-utils");
+const {
+  runEventsForTest,
+  runEvent,
+  runEventsInPresentationMode,
+} = require("./event-run-utils");
 
 // Export functions as a module
 module.exports = {
@@ -44,4 +49,7 @@ module.exports = {
   initiateJestEventSnaps,
   recordPlaywrightRoutes,
   injectEventRecordingScript,
+  runEventsForTest,
+  runEvent,
+  runEventsInPresentationMode,
 };