@piwitests/reporter 0.45.0 → 0.47.0

package/dist/internal/capture/capture-fixtures.js

@@ -63,6 +63,8 @@ var import_node_zlib2 = require("zlib");
 // ../picker-dom/src/probe.ts
 function probeElementAttrs(el, arg) {
   const { keep, tagRoles, inputRoles, roleSources, includeStructural } = arg;
+  const countMatches = arg.countMatches !== false;
+  const testIdAttr = arg.testIdAttribute || "data-testid";
   const FIELD_TAGS = ["input", "select", "textarea"];
   const textWithout = (root, skip) => {
     if (root === skip) return "";
@@ -87,42 +89,45 @@ function probeElementAttrs(el, arg) {
     }
   };
   const attrMap = {};
-  for (const key of keep) {
+  const keys = arg.testIdAttribute && keep.indexOf(arg.testIdAttribute) === -1 ? [...keep, arg.testIdAttribute] : keep;
+  for (const key of keys) {
     const v = el.getAttribute(key) ?? el[key];
     attrMap[key] = typeof v === "string" ? v.slice(0, 200) : v ? String(v).slice(0, 200) : null;
   }
   const r = el.getBoundingClientRect();
   const selectorCounts = {};
-  try {
-    const doc = el.ownerDocument;
-    const cssEsc = (s) => doc.defaultView.CSS.escape(s);
-    const count = (sel) => {
-      try {
-        return doc.querySelectorAll(sel).length;
-      } catch {
-        return void 0;
+  if (countMatches) {
+    try {
+      const doc = el.ownerDocument;
+      const cssEsc = (s) => doc.defaultView.CSS.escape(s);
+      const count = (sel) => {
+        try {
+          return doc.querySelectorAll(sel).length;
+        } catch {
+          return void 0;
+        }
+      };
+      if (attrMap[testIdAttr]) {
+        selectorCounts.testId = count(`[${testIdAttr}=${JSON.stringify(attrMap[testIdAttr])}]`);
       }
-    };
-    if (attrMap["data-testid"]) {
-      selectorCounts.testId = count(`[data-testid=${JSON.stringify(attrMap["data-testid"])}]`);
-    }
-    if (attrMap["id"]) selectorCounts.id = count(`#${cssEsc(attrMap["id"])}`);
-    if (attrMap["name"]) selectorCounts.name = count(`[name=${JSON.stringify(attrMap["name"])}]`);
-    if (attrMap["placeholder"]) {
-      selectorCounts.placeholder = count(`[placeholder=${JSON.stringify(attrMap["placeholder"])}]`);
-    }
-    if (attrMap["alt"]) selectorCounts.alt = count(`[alt=${JSON.stringify(attrMap["alt"])}]`);
-    if (attrMap["title"]) selectorCounts.title = count(`[title=${JSON.stringify(attrMap["title"])}]`);
-    const classList = (attrMap["class"] || "").split(/\s+/).filter((c) => c.length > 1).slice(0, 10);
-    if (classList.length > 0) {
-      const classCounts = {};
-      for (const cls of classList) {
-        const n = count(`.${cssEsc(cls)}`);
-        if (n !== void 0) classCounts[cls] = n;
+      if (attrMap["id"]) selectorCounts.id = count(`#${cssEsc(attrMap["id"])}`);
+      if (attrMap["name"]) selectorCounts.name = count(`[name=${JSON.stringify(attrMap["name"])}]`);
+      if (attrMap["placeholder"]) {
+        selectorCounts.placeholder = count(`[placeholder=${JSON.stringify(attrMap["placeholder"])}]`);
+      }
+      if (attrMap["alt"]) selectorCounts.alt = count(`[alt=${JSON.stringify(attrMap["alt"])}]`);
+      if (attrMap["title"]) selectorCounts.title = count(`[title=${JSON.stringify(attrMap["title"])}]`);
+      const classList = (attrMap["class"] || "").split(/\s+/).filter((c) => c.length > 1).slice(0, 10);
+      if (classList.length > 0) {
+        const classCounts = {};
+        for (const cls of classList) {
+          const n = count(`.${cssEsc(cls)}`);
+          if (n !== void 0) classCounts[cls] = n;
+        }
+        selectorCounts.classes = classCounts;
       }
-      selectorCounts.classes = classCounts;
+    } catch {
     }
-  } catch {
   }
   let rolePosition = null;
   const ancestors = [];
@@ -211,8 +216,8 @@ function probeElementAttrs(el, arg) {
         }
         return total;
       };
-      const nodes = doc.querySelectorAll(roleSources);
-      const nodesUsable = nodes.length <= 4e3;
+      const nodes = countMatches ? doc.querySelectorAll(roleSources) : [];
+      const nodesUsable = countMatches && nodes.length <= 4e3;
       const rolesUsable = !!targetRole && nodesUsable;
       if (rolesUsable) {
         let roleCountAll = 0;
@@ -246,17 +251,18 @@ function probeElementAttrs(el, arg) {
           };
         }
       }
-      if (textNeedle) {
+      if (textNeedle && countMatches) {
         const textCount = countTextOwners(doc.body || doc.documentElement, 4e3);
         if (textCount >= 0) selectorCounts.text = textCount;
       }
-      if (rolesUsable || textNeedle) {
+      if (rolesUsable || textNeedle || !countMatches) {
         const CONTAINER_TAGS = ["form", "nav", "main", "article", "section", "dialog", "table", "li", "tr"];
         const NOISY_DATA_ATTR = /^data-(v-[0-9a-f]+|reactid|react-checksum|svelte-\w+|ng-\w+|ember\w*)$/i;
         const POSITIONAL_DATA_ATTR = /^data-(index|idx|i|key|row|rownum|col|column|position|pos|order|sort|offset|page)$/i;
         const TEST_DATA_ATTRS2 = ["data-test", "data-test-id", "data-qa", "data-qa-id", "data-cy", "data-e2e"];
+        const testIdName = testIdAttr.toLowerCase();
         const usableDataAttr = (name, value) => {
-          if (!name || name.slice(0, 5) !== "data-" || name === "data-testid") return false;
+          if (!name || name.slice(0, 5) !== "data-" || name.toLowerCase() === testIdName) return false;
           if (NOISY_DATA_ATTR.test(name) || POSITIONAL_DATA_ATTR.test(name)) return false;
           return !!value && value.length <= 120;
         };
@@ -286,7 +292,13 @@ function probeElementAttrs(el, arg) {
           return digits <= letters;
         };
         const usableDiscriminator = (t) => !!t && t.length <= 60 && t !== targetText && namesRatherThanReports(t);
+        const hasAtMost = (root, cap) => {
+          const walker = doc.createTreeWalker(root, 1);
+          for (let n = 0; walker.nextNode(); n++) if (n >= cap) return false;
+          return true;
+        };
         const discriminatingText = (anc) => {
+          if (!countMatches && !hasAtMost(anc, 200)) return null;
           const heading = anc.querySelector('h1,h2,h3,h4,h5,h6,[role="heading"]');
           if (heading) {
             const t = rawText(heading);
@@ -318,7 +330,7 @@ function probeElementAttrs(el, arg) {
           depth++;
           const tag = (node.tagName || "").toLowerCase();
           if (tag === "body" || tag === "html") break;
-          const testId = node.getAttribute("data-testid");
+          const testId = node.getAttribute(testIdAttr);
           const id = node.getAttribute("id");
           const explicitRole = node.getAttribute("role");
           const ariaLabel = node.getAttribute("aria-label");
@@ -338,10 +350,10 @@ function probeElementAttrs(el, arg) {
                 }
               }
             }
-            const scopedTextCount = countTextOwners(node, 2e3);
+            const scopedTextCount = countMatches ? countTextOwners(node, 2e3) : -1;
             let filterText = null;
             try {
-              if (anchorRole && nodesUsable) filterText = discriminatingText(node);
+              if (anchorRole && (nodesUsable || !countMatches)) filterText = discriminatingText(node);
             } catch {
               filterText = null;
             }
@@ -354,11 +366,13 @@ function probeElementAttrs(el, arg) {
               ariaLabel: ariaLabel || null,
               ...scopedRoleCount >= 0 ? { scopedRoleCount } : {},
               ...scopedTextCount >= 0 ? { scopedTextCount } : {},
-              ...testId ? { testIdCount: count(`[data-testid=${JSON.stringify(testId)}]`) } : {},
-              ...id ? { idCount: count(`#${cssEsc(id)}`) } : {},
+              ...testId && countMatches ? { testIdCount: count(`[${testIdAttr}=${JSON.stringify(testId)}]`) } : {},
+              ...id && countMatches ? { idCount: count(`#${cssEsc(id)}`) } : {},
               ...anchorRole && nodesUsable ? { roleCount: docRoleCount(anchorRole) } : {},
-              ...filterText ? { filterText, filterRoleCount: filterMatchCount(anchorRole, filterText) } : {},
-              ...dataAttr ? { dataAttr, dataAttrCount: count(`[${dataAttr.name}=${JSON.stringify(dataAttr.value)}]`) } : {}
+              ...filterText ? { filterText } : {},
+              ...filterText && countMatches ? { filterRoleCount: filterMatchCount(anchorRole, filterText) } : {},
+              ...dataAttr ? { dataAttr } : {},
+              ...dataAttr && countMatches ? { dataAttrCount: count(`[${dataAttr.name}=${JSON.stringify(dataAttr.value)}]`) } : {}
             });
           }
           node = node.parentElement;
@@ -396,6 +410,17 @@ function installPickerOverlay(arg) {
     return;
   }
   const Z = 2147483600;
+  const testIdAttr = arg.testIdAttribute || "data-testid";
+  const words = {
+    banner: "Piwi inspector \u2014 click any element to generate locators for it",
+    keys: "\u2191 parent \xB7 \u2193 child \xB7 Esc skip",
+    keysHovering: "click to pick \xB7 \u2191 parent \xB7 \u2193 child \xB7 Esc skip",
+    analyzing: "Analyzing element\u2026"
+  };
+  for (const key of Object.keys(words)) {
+    const given = arg.strings?.[key];
+    if (typeof given === "string" && given) words[key] = given;
+  }
   const highlight = doc.createElement("div");
   highlight.id = "__piwi_picker_highlight";
   highlight.style.cssText = `position:fixed;pointer-events:none;z-index:${Z};display:none;box-sizing:border-box;border:2px solid #a855f7;background:rgba(168,85,247,.14);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 3px rgba(59,7,100,.55),inset 0 0 0 1px rgba(255,255,255,.5);`;
@@ -420,27 +445,53 @@ function installPickerOverlay(arg) {
   const MONO = "ui-monospace,SFMono-Regular,Menlo,Consolas,monospace";
   const hlLocator = (expr) => `<code style="font-family:${MONO}">${hlTokens(expr)}</code>`;
   const head = doc.createElement("div");
-  head.innerHTML = arg.transport === "postMessage" ? "Click an element to generate locators" : arg.failing ? `Piwi locator picker \u2014 click the element that should replace ${hlLocator(arg.failing)}` : "Piwi inspector \u2014 click any element to generate locators for it";
+  if (arg.transport === "postMessage") head.textContent = "Click an element to generate locators";
+  else if (arg.failing)
+    head.innerHTML = `Piwi locator picker \u2014 click the element that should replace ${hlLocator(arg.failing)}`;
+  else head.textContent = words.banner;
   const locatorLine = doc.createElement("div");
   locatorLine.id = "__piwi_picker_locator";
   locatorLine.style.cssText = `display:none;margin-top:7px;padding:5px 9px;border-radius:7px;background:#0b1120;border:1px solid #4c1d95;font:13.5px/1.55 ${MONO};word-break:break-word;overflow-wrap:anywhere;`;
   const foot = doc.createElement("div");
   foot.id = "__piwi_picker_foot";
   foot.style.cssText = "color:#9ca3af;margin-top:6px;font-size:12px;";
-  foot.textContent = "\u2191 parent \xB7 \u2193 child \xB7 Esc skip";
+  foot.textContent = words.keys;
   banner.appendChild(head);
   banner.appendChild(locatorLine);
   banner.appendChild(foot);
   const label = doc.createElement("div");
   label.id = "__piwi_picker_label";
   label.style.cssText = `position:fixed;pointer-events:none;z-index:${Z + 1};display:none;box-sizing:border-box;max-width:min(620px,92vw);background:#0b1120;color:#f9fafb;border:1px solid #7c3aed;border-radius:7px;padding:4px 8px;font:12.5px/1.45 ${MONO};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 18px rgba(0,0,0,.5);`;
-  doc.body.appendChild(highlight);
-  doc.body.appendChild(label);
-  doc.body.appendChild(banner);
+  const mountParent = () => {
+    let modal = null;
+    try {
+      modal = doc.querySelector("dialog:modal");
+    } catch {
+      modal = null;
+    }
+    if (!modal) return doc.body;
+    const s = g.getComputedStyle(modal);
+    const holdsFixed = s.transform !== "none" || s.perspective !== "none" || s.filter !== "none" || /\b(paint|layout|strict|content)\b/.test(s.contain) || /\b(transform|perspective|filter)\b/.test(s.willChange);
+    return holdsFixed ? doc.body : modal;
+  };
+  const mount = (...nodes) => {
+    const parent = mountParent();
+    for (const node of nodes) parent.appendChild(node);
+    if (parent !== doc.body) {
+      parent.addEventListener(
+        "close",
+        () => {
+          for (const node of nodes) if (node.parentNode === parent) doc.body.appendChild(node);
+        },
+        { once: true }
+      );
+    }
+  };
+  mount(highlight, label, banner);
   const escJs = (s) => s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
   const describe = (el) => {
     const tag = (el.tagName || "?").toLowerCase();
-    const testId = el.getAttribute && el.getAttribute("data-testid");
+    const testId = el.getAttribute && el.getAttribute(testIdAttr);
     if (testId) return `getByTestId('${escJs(testId)}')`;
     if (el.labels && el.labels.length > 0) {
       const labelText = (el.labels[0].textContent || "").replace(/\s+/g, " ").trim().slice(0, 80);
@@ -475,7 +526,7 @@ function installPickerOverlay(arg) {
       const el = chain2[i];
       const tag = (el.tagName || "").toLowerCase();
       if (ACTIONABLE_TAGS.includes(tag)) return i;
-      if (el.getAttribute && (el.getAttribute("role") || el.getAttribute("data-testid"))) return i;
+      if (el.getAttribute && (el.getAttribute("role") || el.getAttribute(testIdAttr))) return i;
     }
     return 0;
   };
@@ -531,7 +582,7 @@ function installPickerOverlay(arg) {
       locatorLine.style.display = "block";
     }
     placeLabel(r);
-    foot.textContent = "click to pick \xB7 \u2191 parent \xB7 \u2193 child \xB7 Esc skip";
+    foot.textContent = words.keysHovering;
   };
   const redescribe = () => {
     labeled = null;
@@ -594,6 +645,13 @@ function installPickerOverlay(arg) {
     banner.remove();
     if (g.__piwiRedescribe === redescribe) delete g.__piwiRedescribe;
   };
+  const teardown = () => {
+    removePickingListeners();
+    removeSuppressed();
+    doc.removeEventListener("click", stop, true);
+    doc.removeEventListener("keydown", stop, true);
+    cleanup();
+  };
   const reportPicked = (el) => {
     removePickingListeners();
     highlight.style.display = "none";
@@ -604,13 +662,13 @@ function installPickerOverlay(arg) {
       g.__piwiSnapshotExtras?.onPick?.();
       doc.addEventListener("click", stop, true);
       doc.addEventListener("keydown", stop, true);
-      foot.textContent = "Analyzing element\u2026";
+      foot.textContent = words.analyzing;
       g.parent.postMessage({ type: "elementPicked", attrs }, "*");
     } else {
       removeSuppressed();
       g.__piwiPickedElement = el;
       g.__piwiPickState = "picked";
-      foot.textContent = "Analyzing element\u2026";
+      foot.textContent = words.analyzing;
     }
   };
   const reportSkipped = () => {
@@ -658,7 +716,7 @@ function installPickerOverlay(arg) {
       }
     });
   };
-  g.__piwiPickCleanup = cleanup;
+  g.__piwiPickCleanup = teardown;
   doc.addEventListener("mousemove", onMove, true);
   doc.addEventListener("click", onClick, true);
   doc.addEventListener("keydown", onKey, true);
@@ -680,6 +738,26 @@ function showAnchorPicker(arg) {
   }
   const Z = 2147483600;
   const { tagRoles, inputRoles, roleSources, leafRole, leafLevel, leafTestId } = arg;
+  const testIdAttr = arg.testIdAttribute || "data-testid";
+  const words = {
+    title: "Scope to stable parents (optional)",
+    hint: "Pick one or more parents to anchor the locator to. Hover a row to see the parent.",
+    noneSelected: "No parents selected \u2014 standard alternatives only.",
+    matchesOne: "\u2713 Selection matches exactly 1 element",
+    matchesMany: "\u2717 Selection matches {count} elements",
+    countUnavailable: "Match count unavailable",
+    containsOne: "contains exactly 1 matching element",
+    containsMany: "contains {count} matching elements",
+    needsTestId: `add a ${testIdAttr} to make this usable`,
+    noHook: "no stable hook",
+    use: "Use selected parents",
+    skip: "Skip (Esc)"
+  };
+  for (const key of Object.keys(words)) {
+    const given = arg.strings?.[key];
+    if (typeof given === "string" && given) words[key] = given;
+  }
+  const counted = (template, n) => template.replace("{count}", String(n));
   const roleOf2 = (n) => {
     const explicit = n.getAttribute && n.getAttribute("role");
     if (explicit) return explicit;
@@ -695,9 +773,11 @@ function showAnchorPicker(arg) {
     const al = n.getAttribute && n.getAttribute("aria-level");
     return al && /^\d+$/.test(al) ? Number(al) : null;
   };
+  const leafCountable = !!leafTestId || roleOf2(el) === leafRole;
   const leafMatches = (scope) => {
     try {
-      if (leafTestId) return scope.querySelectorAll(`[data-testid=${JSON.stringify(leafTestId)}]`).length;
+      if (leafTestId) return scope.querySelectorAll(`[${testIdAttr}=${JSON.stringify(leafTestId)}]`).length;
+      if (!leafCountable) return -1;
       const nodes = scope.querySelectorAll(roleSources);
       if (nodes.length > 2e3) return -1;
       let matched = 0;
@@ -733,12 +813,12 @@ function showAnchorPicker(arg) {
     depth++;
     const tag = (node.tagName || "").toLowerCase();
     if (tag === "body" || tag === "html") break;
-    const testId = node.getAttribute("data-testid");
+    const testId = node.getAttribute(testIdAttr);
     const id = node.getAttribute("id");
     const ariaLabel = node.getAttribute("aria-label");
     const role = roleOf2(node);
     const info = { tag, depth, testId: testId || null, id: id || null, ariaLabel: ariaLabel || null, role };
-    if (testId) info.testIdCount = count(`[data-testid=${JSON.stringify(testId)}]`);
+    if (testId) info.testIdCount = count(`[${testIdAttr}=${JSON.stringify(testId)}]`);
     if (id) {
       try {
         info.idCount = count(`#${doc.defaultView.CSS.escape(id)}`);
@@ -757,7 +837,7 @@ function showAnchorPicker(arg) {
       if (ariaLabel) info.labeledRoleCount = labeledCount;
     }
     info.scopedLeafCount = leafMatches(node);
-    const hookLabel = testId ? `data-testid="${testId}"` : id ? `#${id}` : ariaLabel && role ? `${role} "${ariaLabel}"` : role ? `role ${role}` : "no stable hook";
+    const hookLabel = testId ? `${testIdAttr}="${testId}"` : id ? `#${id}` : ariaLabel && role ? `${role} "${ariaLabel}"` : role ? `role ${role}` : words.noHook;
     rows.push({
       node,
       info,
@@ -779,13 +859,13 @@ function showAnchorPicker(arg) {
   const pr = el.getBoundingClientRect();
   pickedOutline.style.cssText = `position:fixed;pointer-events:none;z-index:${Z};box-sizing:border-box;border:2px solid #a855f7;background:rgba(168,85,247,.14);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 3px rgba(59,7,100,.55);left:${pr.left}px;top:${pr.top}px;width:${pr.width}px;height:${pr.height}px;`;
   const panel = doc.createElement("div");
-  panel.style.cssText = `position:fixed;top:12px;right:12px;z-index:${Z + 3};width:340px;max-height:82vh;overflow:auto;background:#111827;color:#f9fafb;border-radius:10px;padding:16px;font:12px/1.5 system-ui,sans-serif;box-shadow:0 8px 40px rgba(0,0,0,.5);`;
+  panel.style.cssText = `position:fixed;top:12px;right:12px;z-index:${Z + 3};width:min(340px,calc(100vw - 56px));max-height:82vh;overflow:auto;background:#111827;color:#f9fafb;border-radius:10px;padding:16px;font:12px/1.5 system-ui,sans-serif;box-shadow:0 8px 40px rgba(0,0,0,.5);`;
   const title = doc.createElement("div");
   title.style.cssText = "font-weight:600;font-size:13px;margin-bottom:2px;";
-  title.textContent = "Scope to stable parents (optional)";
+  title.textContent = words.title;
   const sub = doc.createElement("div");
   sub.style.cssText = "color:#9ca3af;margin-bottom:10px;";
-  sub.textContent = "Pick one or more parents to anchor the locator to. Hover a row to see the parent.";
+  sub.textContent = words.hint;
   panel.appendChild(title);
   panel.appendChild(sub);
   const selected = /* @__PURE__ */ new Set();
@@ -793,7 +873,7 @@ function showAnchorPicker(arg) {
   footer.style.cssText = "margin:10px 0;font-weight:600;";
   const segMatches = (scope, info) => {
     try {
-      if (info.testId) return Array.from(scope.querySelectorAll(`[data-testid=${JSON.stringify(info.testId)}]`));
+      if (info.testId) return Array.from(scope.querySelectorAll(`[${testIdAttr}=${JSON.stringify(info.testId)}]`));
       if (info.id) return Array.from(scope.querySelectorAll(`#${doc.defaultView.CSS.escape(info.id)}`));
       const nodes = Array.from(scope.querySelectorAll(roleSources));
       if (nodes.length > 2e3) return [];
@@ -817,14 +897,15 @@ function showAnchorPicker(arg) {
     let total = 0;
     for (const s of scopes) {
       const c = leafMatches(s);
-      if (c > 0) total += c;
+      if (c < 0) return -1;
+      total += c;
       if (total > 50) return total;
     }
     return total;
   };
   const refreshFooter = () => {
     if (selected.size === 0) {
-      footer.textContent = "No parents selected \u2014 standard alternatives only.";
+      footer.textContent = words.noneSelected;
       footer.style.color = "#9ca3af";
       g.__piwiPickChainCount = void 0;
       return;
@@ -832,10 +913,10 @@ function showAnchorPicker(arg) {
     const c = chainCount();
     g.__piwiPickChainCount = c;
     if (c === 1) {
-      footer.textContent = "\u2713 Selection matches exactly 1 element";
+      footer.textContent = words.matchesOne;
       footer.style.color = "#4ade80";
     } else {
-      footer.textContent = c < 0 ? "Match count unavailable" : `\u2717 Selection matches ${c} elements`;
+      footer.textContent = c < 0 ? words.countUnavailable : counted(words.matchesMany, c);
       footer.style.color = "#fbbf24";
     }
   };
@@ -852,7 +933,8 @@ function showAnchorPicker(arg) {
     code.textContent = `<${row.info.tag}> ${row.hookLabel}`;
     const hint = doc.createElement("span");
     hint.style.cssText = "color:#9ca3af;";
-    hint.textContent = row.selectable ? row.info.scopedLeafCount === 1 ? "contains exactly 1 matching element" : `contains ${row.info.scopedLeafCount ?? "?"} matching elements` : "add a data-testid to make this usable";
+    const inside = row.info.scopedLeafCount ?? -1;
+    hint.textContent = row.selectable ? inside === 1 ? words.containsOne : inside < 0 ? words.countUnavailable : counted(words.containsMany, inside) : words.needsTestId;
     text.appendChild(code);
     text.appendChild(hint);
     line.appendChild(box);
@@ -890,6 +972,7 @@ function showAnchorPicker(arg) {
     outline.remove();
     outlineLabel.remove();
     pickedOutline.remove();
+    if (g.__piwiAnchorCleanup === cleanup) delete g.__piwiAnchorCleanup;
   };
   const done = (state) => {
     g.__piwiPickAnchors = state === "done" ? rows.filter((_, i) => selected.has(i)).map((r) => r.info) : [];
@@ -906,7 +989,7 @@ function showAnchorPicker(arg) {
   buttonRow.style.cssText = "display:flex;gap:8px;margin-top:4px;";
   const useBtn = doc.createElement("button");
   useBtn.style.cssText = "flex:1;background:#7c3aed;color:#fff;border:none;border-radius:6px;padding:8px;cursor:pointer;font:600 12px system-ui;";
-  useBtn.textContent = "Use selected parents";
+  useBtn.textContent = words.use;
   useBtn.addEventListener("click", (e) => {
     e.preventDefault();
     e.stopImmediatePropagation();
@@ -914,7 +997,7 @@ function showAnchorPicker(arg) {
   });
   const skipBtn = doc.createElement("button");
   skipBtn.style.cssText = "background:none;border:1px solid #374151;color:#9ca3af;border-radius:6px;padding:8px 10px;cursor:pointer;font:12px system-ui;";
-  skipBtn.textContent = "Skip (Esc)";
+  skipBtn.textContent = words.skip;
   skipBtn.addEventListener("click", (e) => {
     e.preventDefault();
     e.stopImmediatePropagation();
@@ -926,10 +1009,32 @@ function showAnchorPicker(arg) {
   refreshFooter();
   g.__piwiAnchorCleanup = cleanup;
   doc.addEventListener("keydown", onKey, true);
-  doc.body.appendChild(pickedOutline);
-  doc.body.appendChild(outline);
-  doc.body.appendChild(outlineLabel);
-  doc.body.appendChild(panel);
+  const mountParent = () => {
+    let modal = null;
+    try {
+      modal = doc.querySelector("dialog:modal");
+    } catch {
+      modal = null;
+    }
+    if (!modal) return doc.body;
+    const s = g.getComputedStyle(modal);
+    const holdsFixed = s.transform !== "none" || s.perspective !== "none" || s.filter !== "none" || /\b(paint|layout|strict|content)\b/.test(s.contain) || /\b(transform|perspective|filter)\b/.test(s.willChange);
+    return holdsFixed ? doc.body : modal;
+  };
+  const mount = (...nodes) => {
+    const parent = mountParent();
+    for (const node2 of nodes) parent.appendChild(node2);
+    if (parent !== doc.body) {
+      parent.addEventListener(
+        "close",
+        () => {
+          for (const node2 of nodes) if (node2.parentNode === parent) doc.body.appendChild(node2);
+        },
+        { once: true }
+      );
+    }
+  };
+  mount(pickedOutline, outline, outlineLabel, panel);
 }
 
 // ../picker-dom/src/overlay-confirm.ts
@@ -1145,7 +1250,7 @@ function isAutoGenerated(value) {
   return false;
 }
 var TEST_DATA_ATTRS = /* @__PURE__ */ new Set(["data-test", "data-test-id", "data-qa", "data-qa-id", "data-cy", "data-e2e"]);
-function generateAlternatives(attrs) {
+function generateAlternatives(attrs, options = {}) {
   const alts = [];
   const seen = /* @__PURE__ */ new Set();
   const add = (loc) => {
@@ -1156,12 +1261,14 @@ function generateAlternatives(attrs) {
   };
   const { accessibleName } = attrs;
   const tag = attrs.tagName;
-  const role = resolveAriaRole(attrs);
+  const role = options.role !== void 0 ? options.role : resolveAriaRole(attrs);
   const counts = attrs.selectorCounts;
   const isUnique = (n) => n == null || n <= 1;
   const ambiguityPenalty = (n) => n != null && n > 1 ? 45 : 0;
   const text = attrs.textContent ? attrs.textContent.replace(/\s+/g, " ").trim() : null;
-  const testId = attr(attrs, "data-testid");
+  const testIdAttribute = options.testIdAttribute || "data-testid";
+  const selectable = (name2) => name2.toLowerCase() !== testIdAttribute.toLowerCase();
+  const testId = attr(attrs, testIdAttribute);
   if (testId && isUnique(counts?.testId)) {
     add({
       locator: `getByTestId('${esc(testId)}')`,
@@ -1220,7 +1327,7 @@ function generateAlternatives(attrs) {
     });
   }
   const id = attr(attrs, "id");
-  if (id && !isAutoGenerated(id) && isUnique(counts?.id)) {
+  if (id && selectable("id") && !isAutoGenerated(id) && isUnique(counts?.id)) {
     const selector = isCssSafeId(id) ? `#${id}` : `[id="${escCssAttrValue(id)}"]`;
     add({
       locator: `locator('${esc(selector)}')`,
@@ -1230,7 +1337,7 @@ function generateAlternatives(attrs) {
     });
   }
   const name = attr(attrs, "name");
-  if (name && isUnique(counts?.name)) {
+  if (name && selectable("name") && isUnique(counts?.name)) {
     const selector = `[name="${escCssAttrValue(name)}"]`;
     add({
       locator: `locator('${esc(selector)}')`,
@@ -1275,7 +1382,7 @@ function generateAlternatives(attrs) {
           score: scores.testId
         });
       }
-      if (!idAnchorDone && anc.id && !isAutoGenerated(anc.id) && anc.idCount === 1) {
+      if (!idAnchorDone && anc.id && selectable("id") && !isAutoGenerated(anc.id) && anc.idCount === 1) {
         idAnchorDone = true;
         const anchorSelector = isCssSafeId(anc.id) ? `#${anc.id}` : `[id="${escCssAttrValue(anc.id)}"]`;
         add({
@@ -1285,7 +1392,7 @@ function generateAlternatives(attrs) {
           score: scores.id
         });
       }
-      if (!dataAnchorDone && anc.dataAttr && anc.dataAttrCount === 1) {
+      if (!dataAnchorDone && anc.dataAttr && selectable(anc.dataAttr.name) && anc.dataAttrCount === 1) {
         dataAnchorDone = true;
         const { name: name2, value } = anc.dataAttr;
         const anchorSelector = `[${name2}="${escCssAttrValue(value)}"]`;
@@ -2049,6 +2156,7 @@ var DEFAULTS = {
   sampleAriaOnPass: true,
   uploadManifest: true,
   defaultCapture: true,
+  checkBaseUrl: false,
   streaming: true,
   streamingBatchSize: 5,
   streamingBatchDelay: 2e3,
@@ -2091,6 +2199,7 @@ var PIWI_ENV_KEYS = {
   sampleAriaOnPass: "PIWI_SAMPLE_ARIA_ON_PASS",
   uploadManifest: "PIWI_UPLOAD_MANIFEST",
   defaultCapture: "PIWI_DEFAULT_CAPTURE",
+  checkBaseUrl: "PIWI_CHECK_BASE_URL",
   inspectOnFailure: "PIWI_INSPECT_ON_FAIL",
   pickLocatorOnFailure: "PIWI_PICK_LOCATOR_ON_FAIL",
   outputFile: "PIWI_OUTPUT_FILE",
@@ -2143,6 +2252,7 @@ var ENV_FALLBACK_SPECS = [
   { option: "sampleAriaOnPass", env: PIWI_ENV_KEYS.sampleAriaOnPass, kind: "bool" },
   { option: "uploadManifest", env: PIWI_ENV_KEYS.uploadManifest, kind: "bool" },
   { option: "defaultCapture", env: PIWI_ENV_KEYS.defaultCapture, kind: "bool" },
+  { option: "checkBaseUrl", env: PIWI_ENV_KEYS.checkBaseUrl, kind: "bool" },
   { option: "inspectOnFailure", env: PIWI_ENV_KEYS.inspectOnFailure, kind: "bool" },
   { option: "pickLocatorOnFailure", env: PIWI_ENV_KEYS.pickLocatorOnFailure, kind: "bool" },
   { option: "outputFile", env: PIWI_ENV_KEYS.outputFile, kind: "string" }

package/dist/internal/capture/locator-healing.js

@@ -264,7 +264,7 @@ function isAutoGenerated(value) {
   return false;
 }
 var TEST_DATA_ATTRS = /* @__PURE__ */ new Set(["data-test", "data-test-id", "data-qa", "data-qa-id", "data-cy", "data-e2e"]);
-function generateAlternatives(attrs) {
+function generateAlternatives(attrs, options = {}) {
   const alts = [];
   const seen = /* @__PURE__ */ new Set();
   const add = (loc) => {
@@ -275,12 +275,14 @@ function generateAlternatives(attrs) {
   };
   const { accessibleName } = attrs;
   const tag = attrs.tagName;
-  const role = resolveAriaRole(attrs);
+  const role = options.role !== void 0 ? options.role : resolveAriaRole(attrs);
   const counts = attrs.selectorCounts;
   const isUnique = (n) => n == null || n <= 1;
   const ambiguityPenalty = (n) => n != null && n > 1 ? 45 : 0;
   const text = attrs.textContent ? attrs.textContent.replace(/\s+/g, " ").trim() : null;
-  const testId = attr(attrs, "data-testid");
+  const testIdAttribute = options.testIdAttribute || "data-testid";
+  const selectable = (name2) => name2.toLowerCase() !== testIdAttribute.toLowerCase();
+  const testId = attr(attrs, testIdAttribute);
   if (testId && isUnique(counts?.testId)) {
     add({
       locator: `getByTestId('${esc(testId)}')`,
@@ -339,7 +341,7 @@ function generateAlternatives(attrs) {
     });
   }
   const id = attr(attrs, "id");
-  if (id && !isAutoGenerated(id) && isUnique(counts?.id)) {
+  if (id && selectable("id") && !isAutoGenerated(id) && isUnique(counts?.id)) {
     const selector = isCssSafeId(id) ? `#${id}` : `[id="${escCssAttrValue(id)}"]`;
     add({
       locator: `locator('${esc(selector)}')`,
@@ -349,7 +351,7 @@ function generateAlternatives(attrs) {
     });
   }
   const name = attr(attrs, "name");
-  if (name && isUnique(counts?.name)) {
+  if (name && selectable("name") && isUnique(counts?.name)) {
     const selector = `[name="${escCssAttrValue(name)}"]`;
     add({
       locator: `locator('${esc(selector)}')`,
@@ -394,7 +396,7 @@ function generateAlternatives(attrs) {
           score: scores.testId
         });
       }
-      if (!idAnchorDone && anc.id && !isAutoGenerated(anc.id) && anc.idCount === 1) {
+      if (!idAnchorDone && anc.id && selectable("id") && !isAutoGenerated(anc.id) && anc.idCount === 1) {
         idAnchorDone = true;
         const anchorSelector = isCssSafeId(anc.id) ? `#${anc.id}` : `[id="${escCssAttrValue(anc.id)}"]`;
         add({
@@ -404,7 +406,7 @@ function generateAlternatives(attrs) {
           score: scores.id
         });
       }
-      if (!dataAnchorDone && anc.dataAttr && anc.dataAttrCount === 1) {
+      if (!dataAnchorDone && anc.dataAttr && selectable(anc.dataAttr.name) && anc.dataAttrCount === 1) {
         dataAnchorDone = true;
         const { name: name2, value } = anc.dataAttr;
         const anchorSelector = `[${name2}="${escCssAttrValue(value)}"]`;