@usercase/mcp 0.2.4-next.5 → 0.2.4-next.7

package/mcp/path.js

@@ -37,8 +37,33 @@ const pathOnly = (u) => {
  * 요소 하나를 SDK 가 맞출 수 있는 모양으로. 브라우저 안에서 돈다.
  * XPath 는 SDK main/utils.ts getElementXPath 와 같은 방식(같은 이름 형제 사이 순번, svg 는 name())
  */
-function describeInPage(n, pickSel) {
-  const pick = (n.closest && n.closest(pickSel)) || n;
+function describeInPage(n, { sel: pickSel, lift = false }) {
+  /**
+   * onClick 달린 div 로 만든 버튼은 태그로 안 잡힌다. 그러면 누른 조각(글자 span)만 기록돼, 같은 버튼의 아이콘을
+   * 누른 참여자는 다른 길로 갔다고 나왔다(10/27 bluetags: "Save" 글자 대 북마크 아이콘). 클릭을 받는 요소까지 올린다:
+   * React 가 onClick 을 붙인 가장 가까운 것, 없으면 손가락 커서가 이어지는 데까지. 둘 다 조작을 하나 더 품거나
+   * 처음 것보다 훨씬 크면(카드 전체) 멈춘다 — 아무 데나 눌러도 맞게 되면 안 된다
+   */
+  const liftInPage = (e) => {
+    const area = (x) => {
+      const r = x.getBoundingClientRect();
+      return r.width * r.height;
+    };
+    const base = Math.max(area(e), 1);
+    const fits = (x) => area(x) <= base * 6 && !Array.from(x.querySelectorAll(pickSel)).some((c) => !c.contains(e) && !e.contains(c));
+    const reactClick = (x) => {
+      for (const k in x) if (k.startsWith("__reactProps") && x[k] && typeof x[k].onClick === "function") return true;
+      return false;
+    };
+    for (let x = e; x && x !== document.body; x = x.parentElement) {
+      if (reactClick(x)) return fits(x) ? x : e;
+    }
+    let top = e;
+    for (let x = e.parentElement; x && x !== document.body && getComputedStyle(x).cursor === "pointer" && fits(x); x = x.parentElement) top = x;
+    return top;
+  };
+  const hit = n.closest && n.closest(pickSel);
+  const pick = hit || (lift ? liftInPage(n) : n);
   const xp = (e) => {
     const parts = [];
     while (e && e.nodeType === 1) {
@@ -215,15 +240,16 @@ class PathRecorder {
       return this.screen(
         `Not pressed — ${blocked}. If this is where the participant's task ends (e.g. the final "Pay" or "Submit" button), call path_click again with press=false: it is recorded as the final click without pressing it.`,
       );
-    const pickH = await el.evaluateHandle((n, sel) => (n.closest && n.closest(sel)) || n, PICK_SEL);
-    const info = await el.evaluate(describeInPage, PICK_SEL);
+    const info = await el.evaluate(describeInPage, { sel: PICK_SEL, lift: true });
     if (!info.xpath) return this.screen(`Could not work out where [${index}] is in the page. Try another element.`);
+    // 기록한 XPath 로 다시 찾은 것을 찍고 누른다 — SDK 가 참여자 화면에서 찾을 바로 그 요소다
+    const pickH = (await c.page.evaluateHandle(byXPathInPage, info.xpath)).asElement() || el;
     const at = pathOnly(c.page.url());
     let step = null;
     if (record) {
       const file = path.join(c.dir, `${String(c.steps.length + 1).padStart(2, "0")}-click.jpg`);
-      await pickH.asElement().scrollIntoViewIfNeeded({ timeout: 5000 }).catch(() => {});
-      await this.shot(file, pickH.asElement());
+      await pickH.scrollIntoViewIfNeeded({ timeout: 5000 }).catch(() => {});
+      await this.shot(file, pickH);
       step = { type: "XPATH", url: at, concrete: at, xpath: info.xpath, classes: info.classes, ids: info.ids, label: info.label, tag: info.tag, image: file, pressed: press };
       c.steps.push(step);
     }
@@ -232,7 +258,7 @@ class PathRecorder {
     if (!press) return this.screen(`Recorded "${info.label || info.tag}" as the final click, without pressing it. The path ends here — call path_check next.`);
     const before = c.page.url();
     try {
-      await pickH.asElement().click({ timeout: 10000 });
+      await pickH.click({ timeout: 10000 });
     } catch (e) {
       if (step) c.steps.pop();
       c.actions.pop();
@@ -251,7 +277,7 @@ class PathRecorder {
     const c = this.need();
     const el = c.view && c.view.items[index] ? await handleAt(c.page, index) : null;
     if (!el) return this.screen(`[${index}] is not on the screen any more.`);
-    const info = await el.evaluate(describeInPage, "input,textarea,select,[contenteditable]");
+    const info = await el.evaluate(describeInPage, { sel: "input,textarea,select,[contenteditable]" });
     await el.fill(text, { timeout: 10000 });
     c.actions.push({ do: "type", xpath: info.xpath, text });
     c.checked = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usercase/mcp",
-  "version": "0.2.4-next.5",
+  "version": "0.2.4-next.7",
   "description": "Virtual users that browse your website and tell you what they thought — an MCP server for Claude Code",
   "license": "UNLICENSED",
   "homepage": "https://usercase.io",