@humanjs/playwright 0.8.0 → 0.9.0

package/dist/{chunk-CCZEDNOF.js → chunk-3TXDODCO.js}

@@ -575,6 +575,51 @@ async function executeUpload(target, files, ctx) {
   }
   await locator.setInputFiles(files);
 }
+
+// src/internal/select-substring.ts
+function selectSubstringInElement(el, needleRaw) {
+  const needle = needleRaw.replace(/\s+/g, " ").trim();
+  if (!needle) return false;
+  const map = [];
+  let normalized = "";
+  let prevSpace = true;
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const text = node;
+    const data = text.data;
+    for (let i = 0; i < data.length; i++) {
+      const ch = data.charAt(i);
+      if (/\s/.test(ch)) {
+        if (!prevSpace) {
+          normalized += " ";
+          map.push([text, i]);
+        }
+        prevSpace = true;
+      } else {
+        normalized += ch;
+        map.push([text, i]);
+        prevSpace = false;
+      }
+    }
+  }
+  if (normalized.endsWith(" ")) {
+    normalized = normalized.slice(0, -1);
+    map.pop();
+  }
+  const start = normalized.indexOf(needle);
+  if (start === -1) return false;
+  const startPos = map[start];
+  const endPos = map[start + needle.length - 1];
+  if (!startPos || !endPos) return false;
+  const range = document.createRange();
+  range.setStart(startPos[0], startPos[1]);
+  range.setEnd(endPos[0], endPos[1] + 1);
+  const selection = window.getSelection();
+  if (!selection) return false;
+  selection.removeAllRanges();
+  selection.addRange(range);
+  return true;
+}
 async function executeType(target, value, ctx) {
   const locator = typeof target === "string" ? ctx.page.locator(target) : target;
   if (value.length === 0) {
@@ -691,6 +736,118 @@ function normalizeKey(key) {
 function isMac() {
   return process.platform === "darwin";
 }
+
+// src/mouse-helper/index.ts
+var CURSOR_PATH = "M 0 0 L 16 6 L 8 9.5 L 5 19 Z";
+var INSTALLED_FLAG = /* @__PURE__ */ Symbol.for("@humanjs/playwright:mouse-helper:installed");
+async function installMouseHelper(target, options = {}) {
+  const tagged = target;
+  if (tagged[INSTALLED_FLAG]) return;
+  tagged[INSTALLED_FLAG] = true;
+  const config = {
+    color: options.color ?? "#f5a55c",
+    stroke: "#020203",
+    size: options.size ?? 22,
+    showClicks: options.showClicks ?? true,
+    haloOpacity: options.haloOpacity ?? 0.18,
+    path: CURSOR_PATH
+  };
+  await target.addInitScript(installScript, config);
+  const attachPageHooks = (page) => {
+    page.on("domcontentloaded", () => {
+      page.evaluate(installScript, config).catch(() => void 0);
+    });
+  };
+  const pages = "pages" in target ? target.pages() : [target];
+  for (const page of pages) attachPageHooks(page);
+  if ("on" in target && "newPage" in target) {
+    target.on("page", attachPageHooks);
+  }
+  await Promise.all(
+    pages.map((page) => page.evaluate(installScript, config).catch(() => void 0))
+  );
+}
+function installScript(config) {
+  if (document.querySelector("[data-humanjs-cursor]")) return;
+  const attach = () => {
+    const cursor = document.createElement("div");
+    cursor.setAttribute("aria-hidden", "true");
+    cursor.setAttribute("data-humanjs-cursor", "true");
+    cursor.style.cssText = [
+      "position: fixed",
+      "left: 0",
+      "top: 0",
+      `width: ${config.size}px`,
+      `height: ${config.size + 4}px`,
+      "pointer-events: none",
+      "z-index: 2147483647",
+      // Start visible at (0, 0) so the cursor is on screen from the moment
+      // the page loads — without this the helper looks like nothing happened
+      // until the first mousemove arrives.
+      "opacity: 1",
+      "transform: translate(0px, 0px)",
+      // CSS interpolates between successive `mousemove` updates so the
+      // cursor reads as continuous motion instead of discrete hops. Slightly
+      // longer than the path-walker's typical step interval (~30–80ms) so
+      // each tween is still settling when the next move lands → no pauses.
+      "transition: transform 110ms ease-out, opacity 0.18s ease-out",
+      "will-change: transform"
+    ].join("; ");
+    const haloRadius = Math.round(config.size * 0.6);
+    cursor.innerHTML = `
+      <svg width="${config.size}" height="${config.size + 4}" viewBox="0 0 22 24" style="overflow: visible;">
+        <circle cx="0" cy="0" r="${haloRadius}" fill="${config.color}" opacity="${config.haloOpacity}" />
+        <path d="${config.path}" fill="${config.color}" stroke="${config.stroke}" stroke-width="0.7" stroke-linejoin="round" />
+      </svg>
+    `;
+    document.body.appendChild(cursor);
+    let lastX = 0;
+    let lastY = 0;
+    const onMove = (e) => {
+      lastX = e.clientX;
+      lastY = e.clientY;
+      cursor.style.transform = `translate(${lastX}px, ${lastY}px)`;
+      cursor.style.opacity = "1";
+    };
+    window.addEventListener("mousemove", onMove, { capture: true, passive: true });
+    document.addEventListener("mousemove", onMove, { capture: true, passive: true });
+    document.addEventListener(
+      "mouseleave",
+      () => {
+        cursor.style.opacity = "0";
+      },
+      { capture: true, passive: true }
+    );
+    if (config.showClicks) {
+      const styleEl = document.createElement("style");
+      styleEl.textContent = "@keyframes humanjs-ripple { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }";
+      document.head.appendChild(styleEl);
+      window.addEventListener(
+        "mousedown",
+        () => {
+          const ripple = document.createElement("div");
+          ripple.style.cssText = [
+            "position: fixed",
+            `left: ${lastX}px`,
+            `top: ${lastY}px`,
+            "width: 28px",
+            "height: 28px",
+            "border-radius: 50%",
+            `border: 1.5px solid ${config.color}`,
+            "pointer-events: none",
+            "z-index: 2147483646",
+            "animation: humanjs-ripple 0.45s ease-out forwards"
+          ].join("; ");
+          document.body.appendChild(ripple);
+          window.setTimeout(() => ripple.remove(), 500);
+        },
+        { capture: true, passive: true }
+      );
+    }
+  };
+  if (document.body) attach();
+  else document.addEventListener("DOMContentLoaded", attach, { once: true });
+}
 async function executeRead(target, ctx, options = {}) {
   let words = 0;
   let locator;
@@ -850,6 +1007,13 @@ function emitAction(e, opts = {}) {
       const { code } = targetArg(p.target);
       return `  await human.${e.type}(${code});`;
     }
+    case "selectText": {
+      const { code } = targetArg(p.target);
+      if (typeof p.text === "string" && p.text.length > 0) {
+        return `  await human.selectText(${code}, { text: ${q(p.text)} });`;
+      }
+      return `  await human.selectText(${code});`;
+    }
     case "selectOption": {
       const { code } = targetArg(p.target);
       return `  await human.selectOption(${code}, ${serializeSelectValues(p.values)});`;
@@ -899,6 +1063,14 @@ function emitAction(e, opts = {}) {
       return "  await human.goBack();";
     case "goForward":
       return "  await human.goForward();";
+    case "assert": {
+      const kind = String(p.kind ?? "visible");
+      if (kind === "url") return `  await expect(page).toHaveURL(${q(p.value)});`;
+      const { code } = targetArg(p.target);
+      if (kind === "text")
+        return `  await expect(page.locator(${code})).toHaveText(${q(p.value)});`;
+      return `  await expect(page.locator(${code})).toBeVisible();`;
+    }
     default:
       return `  // unsupported action: ${e.type}`;
   }
@@ -908,7 +1080,7 @@ function needsSleepImport(timeline) {
 }
 function generateHumanJS(timeline) {
   const imports = needsSleepImport(timeline) ? "import { chromium, createHuman, sleep } from '@humanjs/playwright';" : "import { chromium, createHuman } from '@humanjs/playwright';";
-  const body = timeline.events.map((e) => emitAction(e)).join("\n");
+  const body = timeline.events.filter((e) => e.type !== "assert").map((e) => emitAction(e)).join("\n");
   return `${imports}
 
 async function main() {
@@ -1430,120 +1602,6 @@ async function startCapture(page, options = {}) {
     }
   };
 }
-
-// src/mouse-helper/index.ts
-var CURSOR_PATH = "M 0 0 L 16 6 L 8 9.5 L 5 19 Z";
-var INSTALLED_FLAG = /* @__PURE__ */ Symbol.for("@humanjs/playwright:mouse-helper:installed");
-async function installMouseHelper(target, options = {}) {
-  const tagged = target;
-  if (tagged[INSTALLED_FLAG]) return;
-  tagged[INSTALLED_FLAG] = true;
-  const config = {
-    color: options.color ?? "#f5a55c",
-    stroke: "#020203",
-    size: options.size ?? 22,
-    showClicks: options.showClicks ?? true,
-    haloOpacity: options.haloOpacity ?? 0.18,
-    path: CURSOR_PATH
-  };
-  await target.addInitScript(installScript, config);
-  const attachPageHooks = (page) => {
-    page.on("domcontentloaded", () => {
-      page.evaluate(installScript, config).catch(() => void 0);
-    });
-  };
-  const pages = "pages" in target ? target.pages() : [target];
-  for (const page of pages) attachPageHooks(page);
-  if ("on" in target && "newPage" in target) {
-    target.on("page", attachPageHooks);
-  }
-  await Promise.all(
-    pages.map((page) => page.evaluate(installScript, config).catch(() => void 0))
-  );
-}
-function installScript(config) {
-  if (document.querySelector("[data-humanjs-cursor]")) return;
-  const attach = () => {
-    const cursor = document.createElement("div");
-    cursor.setAttribute("aria-hidden", "true");
-    cursor.setAttribute("data-humanjs-cursor", "true");
-    cursor.style.cssText = [
-      "position: fixed",
-      "left: 0",
-      "top: 0",
-      `width: ${config.size}px`,
-      `height: ${config.size + 4}px`,
-      "pointer-events: none",
-      "z-index: 2147483647",
-      // Start visible at (0, 0) so the cursor is on screen from the moment
-      // the page loads — without this the helper looks like nothing happened
-      // until the first mousemove arrives.
-      "opacity: 1",
-      "transform: translate(0px, 0px)",
-      // CSS interpolates between successive `mousemove` updates so the
-      // cursor reads as continuous motion instead of discrete hops. Slightly
-      // longer than the path-walker's typical step interval (~30–80ms) so
-      // each tween is still settling when the next move lands → no pauses.
-      "transition: transform 110ms ease-out, opacity 0.18s ease-out",
-      "will-change: transform"
-    ].join("; ");
-    const haloRadius = Math.round(config.size * 0.6);
-    cursor.innerHTML = `
-      <svg width="${config.size}" height="${config.size + 4}" viewBox="0 0 22 24" style="overflow: visible;">
-        <circle cx="0" cy="0" r="${haloRadius}" fill="${config.color}" opacity="${config.haloOpacity}" />
-        <path d="${config.path}" fill="${config.color}" stroke="${config.stroke}" stroke-width="0.7" stroke-linejoin="round" />
-      </svg>
-    `;
-    document.body.appendChild(cursor);
-    let lastX = 0;
-    let lastY = 0;
-    const onMove = (e) => {
-      lastX = e.clientX;
-      lastY = e.clientY;
-      cursor.style.transform = `translate(${lastX}px, ${lastY}px)`;
-      cursor.style.opacity = "1";
-    };
-    window.addEventListener("mousemove", onMove, { capture: true, passive: true });
-    document.addEventListener("mousemove", onMove, { capture: true, passive: true });
-    document.addEventListener(
-      "mouseleave",
-      () => {
-        cursor.style.opacity = "0";
-      },
-      { capture: true, passive: true }
-    );
-    if (config.showClicks) {
-      const styleEl = document.createElement("style");
-      styleEl.textContent = "@keyframes humanjs-ripple { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }";
-      document.head.appendChild(styleEl);
-      window.addEventListener(
-        "mousedown",
-        () => {
-          const ripple = document.createElement("div");
-          ripple.style.cssText = [
-            "position: fixed",
-            `left: ${lastX}px`,
-            `top: ${lastY}px`,
-            "width: 28px",
-            "height: 28px",
-            "border-radius: 50%",
-            `border: 1.5px solid ${config.color}`,
-            "pointer-events: none",
-            "z-index: 2147483646",
-            "animation: humanjs-ripple 0.45s ease-out forwards"
-          ].join("; ");
-          document.body.appendChild(ripple);
-          window.setTimeout(() => ripple.remove(), 500);
-        },
-        { capture: true, passive: true }
-      );
-    }
-  };
-  if (document.body) attach();
-  else document.addEventListener("DOMContentLoaded", attach, { once: true });
-}
-
-// src/index.ts
 async function createHuman(page, options = {}) {
   const personality = resolvePersonality(options.personality ?? "careful");
   const rng = createRng(options.seed);
@@ -1553,6 +1611,9 @@ async function createHuman(page, options = {}) {
   for (const plugin of plugins) {
     await plugin.install?.(context);
   }
+  if (options.cursor !== false && typeof page.addInitScript === "function") {
+    await installMouseHelper(page, typeof options.cursor === "object" ? options.cursor : {});
+  }
   let hasRecorded = false;
   let activeRecordingEvents = null;
   let activeRecordingStartMs = 0;
@@ -1735,6 +1796,27 @@ async function createHuman(page, options = {}) {
         () => executeSelectOption(target, values, mouseCtx())
       );
     },
+    async selectText(target, options2) {
+      const text = options2?.text;
+      await performAction(
+        {
+          type: "selectText",
+          params: { target: describeMouseTarget(target), ...text !== void 0 ? { text } : {} }
+        },
+        async () => {
+          if (speed !== "instant") {
+            await executeMove(target, mouseCtx());
+          }
+          const locator = typeof target === "string" ? page.locator(target) : target;
+          if (text === void 0) {
+            await locator.selectText();
+            return;
+          }
+          const found = await locator.evaluate(selectSubstringInElement, text);
+          if (!found) await locator.selectText();
+        }
+      );
+    },
     async upload(target, files) {
       await performAction(
         {
@@ -1910,6 +1992,6 @@ function describeReadTarget(target) {
   return target.toString?.() ?? "locator";
 }
 
-export { Recording, createHuman, installMouseHelper };
-//# sourceMappingURL=chunk-CCZEDNOF.js.map
-//# sourceMappingURL=chunk-CCZEDNOF.js.map
+export { Recording, createHuman, generateHumanJS, generatePlaywrightTest, installMouseHelper };
+//# sourceMappingURL=chunk-3TXDODCO.js.map
+//# sourceMappingURL=chunk-3TXDODCO.js.map