@szc-ft/mcp-szcd-client 0.28.2 → 0.30.0

package/qwen-extension/skills/local-browser-test/lib/ant-adapter.js

@@ -49,6 +49,28 @@ export class AntAdapter {
         this.componentMeta = options.componentMeta || {};
     }
 
+    /**
+     * 统一的表单项查找 helper（浏览器端执行）
+     * 弹窗/抽屉打开时优先在其中搜索，避免页面搜索栏的同名 label 被错误命中
+     * 用法：在 frame.evaluate 内调用 _findFormItem(label)
+     */
+    static get FORM_ITEM_HELPER() {
+        return `
+function _findFormItem(label) {
+    var modalOrDrawer = document.querySelector('.ant-modal:not(.ant-modal-hidden), .ant-drawer:not(.ant-drawer-hidden), .ant-drawer-open .ant-drawer-content-wrapper');
+    var scope = modalOrDrawer || document;
+    var items = Array.from(scope.querySelectorAll('.ant-form-item'));
+    if (items.length === 0 && scope !== document) {
+        items = items.concat(Array.from(document.querySelectorAll('.ant-form-item')));
+    }
+    return items.find(function(el) {
+        var lbl = el.querySelector('.ant-form-item-label label, .ant-form-item-label');
+        return lbl && (lbl.innerText || lbl.textContent || '').trim().includes(label);
+    }) || null;
+}
+`;
+    }
+
     /**
      * 关闭所有打开的下拉浮层 / 抽屉 / 弹窗
      * 反馈第 2 条：每次 Select 操作后必须调用，否则下次操作会命中残留选项
@@ -61,9 +83,9 @@ export class AntAdapter {
             });
             // 2) 隐藏所有未隐藏的下拉浮层
             const dropdowns = document.querySelectorAll(
-                "body > .ant-select-dropdown:not(.ant-select-dropdown-hidden), " +
-                "body > .ant-cascader-dropdown:not(.ant-cascader-dropdown-hidden), " +
-                "body > .ant-picker-dropdown:not(.ant-picker-dropdown-hidden)"
+                ".ant-select-dropdown:not(.ant-select-dropdown-hidden), " +
+                ".ant-cascader-dropdown:not(.ant-cascader-dropdown-hidden), " +
+                ".ant-picker-dropdown:not(.ant-picker-dropdown-hidden)"
             );
             const count = dropdowns.length;
             dropdowns.forEach((el) => {
@@ -79,39 +101,45 @@ export class AntAdapter {
         }).catch(() => ({ closed: 0 }));
     }
 
+    /**
+     * 在 frame 上执行 evaluate，自动注入 _findFormItem helper
+     * 后续所有新方法只需调用本方法，无需手动处理弹窗/抽屉优先逻辑
+     */
+    async _evalWithFormHelper(frame, fnBody) {
+        const wrapped = "(function() {" + AntAdapter.FORM_ITEM_HELPER + "return (" + fnBody + ")();\n})()";
+        return frame.evaluate(wrapped);
+    }
+
     /**
      * 定位包含指定 label 的 .ant-form-item，返回其内 control 元素的 selector 信息
      * 不直接返回 ElementHandle（跨 evaluate 边界丢失），而是返回一个临时标记 id
      */
     async _markFormItemControl(frame, labelText, controlHint) {
-        return frame.evaluate(({ label, hint }) => {
-            const items = Array.from(document.querySelectorAll(".ant-form-item"));
-            const item = items.find((el) => {
-                const lbl = el.querySelector(".ant-form-item-label label, .ant-form-item-label");
-                if (!lbl) return false;
-                return (lbl.innerText || lbl.textContent || "").trim().includes(label);
-            });
+        const label = labelText.replace(/'/g, "\\'");
+        const hint = controlHint;
+        return this._evalWithFormHelper(frame, `() => {
+            const item = _findFormItem('${label}');
             if (!item) return { found: false };
 
             // 找控件：根据 hint 决定优先匹配何种节点
             let control;
-            if (hint === "select") {
+            if (${JSON.stringify(hint)} === "select") {
                 control = item.querySelector(".ant-select:not(.ant-select-disabled)");
-            } else if (hint === "treeSelect") {
+            } else if (${JSON.stringify(hint)} === "treeSelect") {
                 control = item.querySelector(".ant-select.ant-tree-select, .ant-tree-select");
-            } else if (hint === "cascader") {
+            } else if (${JSON.stringify(hint)} === "cascader") {
                 control = item.querySelector(".ant-cascader, .ant-cascader-picker");
-            } else if (hint === "datePicker") {
+            } else if (${JSON.stringify(hint)} === "datePicker") {
                 control = item.querySelector(".ant-picker");
-            } else if (hint === "input") {
+            } else if (${JSON.stringify(hint)} === "input") {
                 control = item.querySelector("input.ant-input, textarea.ant-input, .ant-input-affix-wrapper input");
-            } else if (hint === "radio") {
+            } else if (${JSON.stringify(hint)} === "radio") {
                 control = item.querySelector(".ant-radio-group");
-            } else if (hint === "checkbox") {
+            } else if (${JSON.stringify(hint)} === "checkbox") {
                 control = item.querySelector(".ant-checkbox-group, .ant-checkbox-wrapper");
-            } else if (hint === "switch") {
+            } else if (${JSON.stringify(hint)} === "switch") {
                 control = item.querySelector(".ant-switch");
-            } else if (hint === "upload") {
+            } else if (${JSON.stringify(hint)} === "upload") {
                 control = item.querySelector(".ant-upload input[type='file'], input[type='file']");
             } else {
                 control = item.querySelector("input, .ant-select, .ant-picker, .ant-cascader");
@@ -120,7 +148,7 @@ export class AntAdapter {
             if (!control) return { found: true, hasControl: false };
 
             // 用临时 data 属性标记，避免重复 traversal
-            const marker = `__sz_marker_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
+            const marker = '__sz_marker_' + Date.now() + '_' + Math.random().toString(36).slice(2, 6);
             control.setAttribute("data-sz-marker", marker);
             item.setAttribute("data-sz-form-item-marker", marker);
             const rect = control.getBoundingClientRect();
@@ -131,7 +159,7 @@ export class AntAdapter {
                 tagName: control.tagName,
                 visible: rect.width > 0 && rect.height > 0,
             };
-        }, { label: labelText, hint: controlHint });
+        }`);
     }
 
     async _clearMarkers(frame) {
@@ -189,12 +217,12 @@ export class AntAdapter {
         }
 
         const selectedSummary = [];
+        let popupResolved = popupFrame;
         for (const opt of options) {
             // 3) 浮层探测：先在触发器 frame 找，没找到再在 popupFrame 找（兜底）
-            let popupResolved = popupFrame;
             let optionFound = await pollEval(popupResolved, (text) => {
                 const items = Array.from(document.querySelectorAll(
-                    "body > .ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-item-option"
+                    ".ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-item-option"
                 ));
                 const visibleItems = items.filter((el) => {
                     const rect = el.getBoundingClientRect();
@@ -220,7 +248,7 @@ export class AntAdapter {
                 if (parentFrame && parentFrame !== frame) {
                     const retryFound = await pollEval(parentFrame, (text) => {
                         const items = Array.from(document.querySelectorAll(
-                            "body > .ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-item-option"
+                            ".ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-item-option"
                         ));
                         const visibleItems = items.filter((el) => {
                             const rect = el.getBoundingClientRect();
@@ -257,12 +285,13 @@ export class AntAdapter {
                 };
             }
 
-            // 4) mousedown 选项（在 popupResolved frame 内）
+            // 4) 点击选项（在 popupResolved frame 内），需同时触发 mousedown+click 才可驱动 React onChange
             await popupResolved.evaluate((tag) => {
                 const el = document.querySelector(`[data-sz-option-marker="${tag}"]`);
                 if (!el) return false;
                 el.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true, button: 0 }));
                 el.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, button: 0 }));
+                el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }));
                 el.removeAttribute("data-sz-option-marker");
                 return true;
             }, optionFound.value.tag);
@@ -338,8 +367,8 @@ export class AntAdapter {
 
             const found = await pollEval(frame, ({ text, isLeaf }) => {
                 const titles = Array.from(document.querySelectorAll(
-                    "body > .ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-tree-title, " +
-                    "body > .ant-tree-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-tree-title"
+                    ".ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-tree-title, " +
+                    ".ant-tree-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-tree-title"
                 ));
                 const visible = titles.filter((el) => {
                     const rect = el.getBoundingClientRect();
@@ -408,29 +437,33 @@ export class AntAdapter {
      */
     async input(frame, target, value, opts = {}) {
         const clear = opts.clear !== false;
-        const result = await frame.evaluate(({ target, value, clear }) => {
-            let el = null;
-
-            if (target.label) {
-                const items = Array.from(document.querySelectorAll(".ant-form-item"));
-                const item = items.find((x) => {
-                    const lbl = x.querySelector(".ant-form-item-label");
-                    return lbl && (lbl.innerText || lbl.textContent || "").trim().includes(target.label);
-                });
-                el = item?.querySelector("input.ant-input, textarea.ant-input, .ant-input-affix-wrapper input, input[type='text'], input[type='number'], input[type='password'], input:not([type])");
-            } else if (target.placeholder) {
-                el = document.querySelector(`input[placeholder*="${target.placeholder}"], textarea[placeholder*="${target.placeholder}"]`);
-            } else if (target.selector) {
-                try { el = document.querySelector(target.selector); } catch { el = null; }
+        const label = (target.label || '').replace(/'/g, "\\'");
+        const placeholder = (target.placeholder || '').replace(/'/g, "\\'");
+        const selector = (target.selector || '').replace(/'/g, "\\'");
+
+        const result = await this._evalWithFormHelper(frame, `() => {
+            var el = null;
+            var val = ${JSON.stringify(value)};
+            var shouldClear = ${clear};
+
+            var item = _findFormItem('${label}');
+            if (item) {
+                el = item.querySelector("input.ant-input, textarea.ant-input, .ant-input-affix-wrapper input, input[type='text'], input[type='number'], input[type='password'], input:not([type])");
+            }
+            if (!el && '${placeholder}') {
+                el = document.querySelector('input[placeholder*="${placeholder}"], textarea[placeholder*="${placeholder}"]');
+            }
+            if (!el && '${selector}') {
+                try { el = document.querySelector('${selector}'); } catch(e) { el = null; }
             }
 
             if (!el) return { found: false };
             el.scrollIntoView({ block: "center" });
-            const proto = Object.getPrototypeOf(el);
-            const valueSetter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+            var proto = Object.getPrototypeOf(el);
+            var valueSetter = Object.getOwnPropertyDescriptor(proto, "value") && Object.getOwnPropertyDescriptor(proto, "value").set;
 
             el.focus();
-            const newValue = clear ? value : (el.value || "") + value;
+            var newValue = shouldClear ? val : (el.value || "") + val;
             if (valueSetter) {
                 valueSetter.call(el, newValue);
             } else {
@@ -444,7 +477,7 @@ export class AntAdapter {
                 placeholder: el.getAttribute("placeholder"),
                 tagName: el.tagName,
             };
-        }, { target, value, clear });
+        }`);
 
         return {
             acted: result.found,
@@ -460,27 +493,26 @@ export class AntAdapter {
      * Ant Radio 选择
      */
     async radio(frame, fieldLabel, optionLabel) {
-        const result = await frame.evaluate(({ field, opt }) => {
-            const items = Array.from(document.querySelectorAll(".ant-form-item"));
-            const item = items.find((x) => {
-                const lbl = x.querySelector(".ant-form-item-label");
-                return lbl && (lbl.innerText || lbl.textContent || "").trim().includes(field);
-            });
+        const field = fieldLabel.replace(/'/g, "\\'");
+        const opt = optionLabel.replace(/'/g, "\\'");
+
+        const result = await this._evalWithFormHelper(frame, `() => {
+            var item = _findFormItem('${field}');
             if (!item) return { found: false, reason: "form item not found" };
 
-            const wrappers = Array.from(item.querySelectorAll(".ant-radio-wrapper"));
-            const target = wrappers.find((w) => (w.innerText || "").trim().includes(opt));
-            if (!target) return { found: false, reason: `radio option "${opt}" not found`, available: wrappers.map((w) => (w.innerText || "").trim()) };
+            var wrappers = Array.from(item.querySelectorAll(".ant-radio-wrapper"));
+            var target = wrappers.find(function(w) { return (w.innerText || "").trim().includes('${opt}'); });
+            if (!target) return { found: false, reason: 'radio option not found', available: wrappers.map(function(w) { return (w.innerText || "").trim(); }) };
 
             target.scrollIntoView({ block: "center" });
             target.click();
-            const input = target.querySelector("input[type='radio']");
+            var input = target.querySelector("input[type='radio']");
             return {
                 found: true,
-                checked: input?.checked || false,
-                value: input?.value || "",
+                checked: input && input.checked || false,
+                value: input && input.value || "",
             };
-        }, { field: fieldLabel, opt: optionLabel });
+        }`);
         return {
             acted: result.found,
             field: fieldLabel,
@@ -495,24 +527,20 @@ export class AntAdapter {
      * Ant Checkbox 切换（按 label 文本）
      */
     async checkbox(frame, fieldLabel, optionLabel, checked = true) {
-        const result = await frame.evaluate(({ field, opt, target }) => {
-            const items = Array.from(document.querySelectorAll(".ant-form-item"));
-            const item = items.find((x) => {
-                const lbl = x.querySelector(".ant-form-item-label");
-                return lbl && (lbl.innerText || lbl.textContent || "").trim().includes(field);
-            });
+        const field = fieldLabel.replace(/'/g, "\\'");
+        const opt = (optionLabel || '').replace(/'/g, "\\'");
+
+        const result = await this._evalWithFormHelper(frame, `() => {
+            var item = _findFormItem('${field}');
             if (!item) return { found: false };
-            // 支持 group 和单独 checkbox
-            const wrappers = Array.from(item.querySelectorAll(".ant-checkbox-wrapper"));
-            const wrapper = opt
-                ? wrappers.find((w) => (w.innerText || "").includes(opt))
-                : wrappers[0];
+            var wrappers = Array.from(item.querySelectorAll(".ant-checkbox-wrapper"));
+            var wrapper = '${opt}' ? wrappers.find(function(w) { return (w.innerText || "").includes('${opt}'); }) : wrappers[0];
             if (!wrapper) return { found: false, reason: "checkbox not found" };
-            const input = wrapper.querySelector("input[type='checkbox']");
+            var input = wrapper.querySelector("input[type='checkbox']");
             if (!input) return { found: false };
-            if (input.checked !== target) wrapper.click();
+            if (input.checked !== ${checked}) wrapper.click();
             return { found: true, checked: input.checked };
-        }, { field: fieldLabel, opt: optionLabel, target: checked });
+        }`);
         return { acted: result.found, field: fieldLabel, option: optionLabel, verified: result.checked === checked };
     }
 
@@ -520,19 +548,17 @@ export class AntAdapter {
      * Ant Switch 切换
      */
     async switch(frame, fieldLabel, on = true) {
-        const result = await frame.evaluate(({ field, target }) => {
-            const items = Array.from(document.querySelectorAll(".ant-form-item"));
-            const item = items.find((x) => {
-                const lbl = x.querySelector(".ant-form-item-label");
-                return lbl && (lbl.innerText || lbl.textContent || "").trim().includes(field);
-            });
+        const field = fieldLabel.replace(/'/g, "\\'");
+
+        const result = await this._evalWithFormHelper(frame, `() => {
+            var item = _findFormItem('${field}');
             if (!item) return { found: false };
-            const sw = item.querySelector(".ant-switch");
+            var sw = item.querySelector(".ant-switch");
             if (!sw) return { found: false };
-            const isOn = sw.getAttribute("aria-checked") === "true" || sw.classList.contains("ant-switch-checked");
-            if (isOn !== target) sw.click();
-            return { found: true, state: target };
-        }, { field: fieldLabel, target: on });
+            var isOn = sw.getAttribute("aria-checked") === "true" || sw.classList.contains("ant-switch-checked");
+            if (isOn !== ${on}) sw.click();
+            return { found: true, state: ${on} };
+        }`);
         return { acted: result.found, field: fieldLabel, state: result.state, verified: result.state === on };
     }
 
@@ -541,29 +567,27 @@ export class AntAdapter {
      */
     async datePicker(frame, fieldLabel, dateString) {
         await this.closeAllDropdowns(frame);
-        const result = await frame.evaluate(({ field, value }) => {
-            const items = Array.from(document.querySelectorAll(".ant-form-item"));
-            const item = items.find((x) => {
-                const lbl = x.querySelector(".ant-form-item-label");
-                return lbl && (lbl.innerText || lbl.textContent || "").trim().includes(field);
-            });
+        const field = fieldLabel.replace(/'/g, "\\'");
+        const val = (dateString || '').replace(/'/g, "\\'");
+
+        const result = await this._evalWithFormHelper(frame, `() => {
+            var item = _findFormItem('${field}');
             if (!item) return { found: false };
-            const picker = item.querySelector(".ant-picker");
-            const input = picker?.querySelector("input");
+            var picker = item.querySelector(".ant-picker");
+            var input = picker && picker.querySelector("input");
             if (!input) return { found: false };
 
             input.scrollIntoView({ block: "center" });
             input.focus();
-            const setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value")?.set;
-            if (setter) setter.call(input, value);
-            else input.value = value;
+            var setter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value") && Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value").set;
+            if (setter) setter.call(input, '${val}');
+            else input.value = '${val}';
             input.dispatchEvent(new Event("input", { bubbles: true }));
             input.dispatchEvent(new Event("change", { bubbles: true }));
-            // 回车确认
             input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", code: "Enter", keyCode: 13, which: 13, bubbles: true }));
             input.blur();
             return { found: true, value: input.value };
-        }, { field: fieldLabel, value: dateString });
+        }`);
         await this.closeAllDropdowns(frame);
         return { acted: result.found, field: fieldLabel, value: result.value, verified: result.value === dateString };
     }
@@ -596,7 +620,7 @@ export class AntAdapter {
             const seg = segments[i];
             const result = await pollEval(frame, (text) => {
                 const all = Array.from(document.querySelectorAll(
-                    "body > .ant-cascader-dropdown:not(.ant-cascader-dropdown-hidden) .ant-cascader-menu-item"
+                    ".ant-cascader-dropdown:not(.ant-cascader-dropdown-hidden) .ant-cascader-menu-item"
                 ));
                 const visible = all.filter((el) => {
                     const r = el.getBoundingClientRect();
@@ -625,21 +649,16 @@ export class AntAdapter {
      * Upload 文件上传
      */
     async upload(frame, fieldLabel, filePath) {
-        // 注意：puppeteer 上传文件需要通过 ElementHandle.uploadFile，evaluate 内做不到
-        // 这里只能返回需要上层处理的标志
-        const result = await frame.evaluate((field) => {
-            const items = Array.from(document.querySelectorAll(".ant-form-item"));
-            const item = items.find((x) => {
-                const lbl = x.querySelector(".ant-form-item-label");
-                return lbl && (lbl.innerText || lbl.textContent || "").trim().includes(field);
-            });
+        const field = fieldLabel.replace(/'/g, "\\'");
+        const result = await this._evalWithFormHelper(frame, `() => {
+            var item = _findFormItem('${field}');
             if (!item) return { found: false };
-            const input = item.querySelector("input[type='file']");
+            var input = item.querySelector("input[type='file']");
             if (!input) return { found: false };
-            const marker = `__sz_upload_${Date.now()}`;
+            var marker = '__sz_upload_' + Date.now();
             input.setAttribute("data-sz-marker", marker);
-            return { found: true, marker };
-        }, fieldLabel);
+            return { found: true, marker: marker };
+        }`);
 
         if (!result.found) return { acted: false, reason: "upload input not found" };