@testid/antd-testid-runtime 1.0.1 → 1.0.2

package/dist/index.d.mts

@@ -207,6 +207,10 @@ declare class TestIdObserver {
      * 更新当前路由 (路由切换时调用)
      */
     setRoute(routeName: string): void;
+    /**
+     * 重置浮层子节点计数器 (路由切换时调用)
+     */
+    resetPopupChildCounter(): void;
     /**
      * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
      */
@@ -225,8 +229,9 @@ declare class TestIdObserver {
      * 决策优先级:
      *   0. 已有 data-testid → 跳过
      *   1. 带 data-test-base-key → 公共组件实例 (锚点定位)
-     *   2. body 直系浮层 → 匹配浮层类型 → 独立前缀
-     *   3. #app 内普通节点 → dynamic
+     *   2. body 直系浮层根节点 → 匹配浮层类型 → 独立前缀
+     *   3. 浮层内部子节点 → 查找浮层祖先 → 浮层独立前缀 + 计数器
+     *   4. #app 内普通节点 → dynamic
      */
     private processSingleNode;
     /**
@@ -254,18 +259,50 @@ declare class TestIdObserver {
      */
     private handlePopupNode;
     /**
-     * 通过 CSS class 匹配浮层类型
+     * 检测节点是否为浮层根节点
+     *
+     * Ant Design Vue 4.x 可能用一层 wrapper DIV 包裹浮层再 append 到 body:
+     *   body → DIV(wrapper) → DIV.ant-picker-dropdown → panel
+     *
+     * 因此不要求 parentElement === document.body，
+     * 只要节点 class 匹配浮层类型且不在 #app 内即可。
      *
      * @param node - 待检测节点
-     * @returns 浮层类型或 null (非 Antd 浮层)
+     * @returns 浮层类型或 null
      */
     private detectPopupType;
+    /**
+     * 向上遍历 DOM，检测节点是否在某个浮层内部
+     *
+     * 查找最近的匹配 POPUP_CLASS_MAP 的祖先元素 (不要求它本身是 body 直系，
+     * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
+     * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
+     *
+     * @returns 浮层类型或 null (不在任何浮层内)
+     */
+    private detectPopupAncestor;
+    /**
+     * 验证节点的祖先链是否能到达 document.body
+     * (经过若干层 wrapper 后依然是 body 下的浮层)
+     */
+    private reachesBody;
+    /**
+     * 检测节点 class 是否匹配某个浮层类型
+     */
+    private matchPopupClass;
     /**
      * 处理页面内动态新增节点 (v-for / 异步 v-if 等)
      *
      * ID 格式: ${runtimePagePrefix}${route}_${tag}_${counter}
      */
     private handleDynamicNode;
+    /**
+     * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
+     *
+     * ID 格式: ${popupPrefix}${popupType}_${tag}_${counter}
+     * 例: hall_modal_button_0, hall_select_div_2
+     */
+    private handlePopupChildNode;
     /**
      * 检测元素是否在 #app 容器内
      */

package/dist/index.d.ts

@@ -207,6 +207,10 @@ declare class TestIdObserver {
      * 更新当前路由 (路由切换时调用)
      */
     setRoute(routeName: string): void;
+    /**
+     * 重置浮层子节点计数器 (路由切换时调用)
+     */
+    resetPopupChildCounter(): void;
     /**
      * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
      */
@@ -225,8 +229,9 @@ declare class TestIdObserver {
      * 决策优先级:
      *   0. 已有 data-testid → 跳过
      *   1. 带 data-test-base-key → 公共组件实例 (锚点定位)
-     *   2. body 直系浮层 → 匹配浮层类型 → 独立前缀
-     *   3. #app 内普通节点 → dynamic
+     *   2. body 直系浮层根节点 → 匹配浮层类型 → 独立前缀
+     *   3. 浮层内部子节点 → 查找浮层祖先 → 浮层独立前缀 + 计数器
+     *   4. #app 内普通节点 → dynamic
      */
     private processSingleNode;
     /**
@@ -254,18 +259,50 @@ declare class TestIdObserver {
      */
     private handlePopupNode;
     /**
-     * 通过 CSS class 匹配浮层类型
+     * 检测节点是否为浮层根节点
+     *
+     * Ant Design Vue 4.x 可能用一层 wrapper DIV 包裹浮层再 append 到 body:
+     *   body → DIV(wrapper) → DIV.ant-picker-dropdown → panel
+     *
+     * 因此不要求 parentElement === document.body，
+     * 只要节点 class 匹配浮层类型且不在 #app 内即可。
      *
      * @param node - 待检测节点
-     * @returns 浮层类型或 null (非 Antd 浮层)
+     * @returns 浮层类型或 null
      */
     private detectPopupType;
+    /**
+     * 向上遍历 DOM，检测节点是否在某个浮层内部
+     *
+     * 查找最近的匹配 POPUP_CLASS_MAP 的祖先元素 (不要求它本身是 body 直系，
+     * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
+     * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
+     *
+     * @returns 浮层类型或 null (不在任何浮层内)
+     */
+    private detectPopupAncestor;
+    /**
+     * 验证节点的祖先链是否能到达 document.body
+     * (经过若干层 wrapper 后依然是 body 下的浮层)
+     */
+    private reachesBody;
+    /**
+     * 检测节点 class 是否匹配某个浮层类型
+     */
+    private matchPopupClass;
     /**
      * 处理页面内动态新增节点 (v-for / 异步 v-if 等)
      *
      * ID 格式: ${runtimePagePrefix}${route}_${tag}_${counter}
      */
     private handleDynamicNode;
+    /**
+     * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
+     *
+     * ID 格式: ${popupPrefix}${popupType}_${tag}_${counter}
+     * 例: hall_modal_button_0, hall_select_div_2
+     */
+    private handlePopupChildNode;
     /**
      * 检测元素是否在 #app 容器内
      */

package/dist/index.js

@@ -212,7 +212,8 @@ var TestIdObserver = class {
       observer: null,
       isRunning: false,
       currentRoute: "",
-      dynamicCounter: /* @__PURE__ */ new Map()
+      dynamicCounter: /* @__PURE__ */ new Map(),
+      popupChildCounter: /* @__PURE__ */ new Map()
     };
   }
   // ==========================================================
@@ -249,6 +250,12 @@ var TestIdObserver = class {
   setRoute(routeName) {
     this.state.currentRoute = routeName;
   }
+  /**
+   * 重置浮层子节点计数器 (路由切换时调用)
+   */
+  resetPopupChildCounter() {
+    this.state.popupChildCounter.clear();
+  }
   /**
    * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
    */
@@ -286,8 +293,9 @@ var TestIdObserver = class {
    * 决策优先级:
    *   0. 已有 data-testid → 跳过
    *   1. 带 data-test-base-key → 公共组件实例 (锚点定位)
-   *   2. body 直系浮层 → 匹配浮层类型 → 独立前缀
-   *   3. #app 内普通节点 → dynamic
+   *   2. body 直系浮层根节点 → 匹配浮层类型 → 独立前缀
+   *   3. 浮层内部子节点 → 查找浮层祖先 → 浮层独立前缀 + 计数器
+   *   4. #app 内普通节点 → dynamic
    */
   processSingleNode(node) {
     const config = getConfig();
@@ -303,6 +311,11 @@ var TestIdObserver = class {
       this.handlePopupNode(node, popupType);
       return;
     }
+    const popupAncestorType = this.detectPopupAncestor(node);
+    if (popupAncestorType) {
+      this.handlePopupChildNode(node, popupAncestorType, config);
+      return;
+    }
     if (this.isInsideApp(node)) {
       this.handleDynamicNode(node, config);
     }
@@ -373,13 +386,59 @@ var TestIdObserver = class {
     node.setAttribute("data-testid", testId);
   }
   /**
-   * 通过 CSS class 匹配浮层类型
+   * 检测节点是否为浮层根节点
+   *
+   * Ant Design Vue 4.x 可能用一层 wrapper DIV 包裹浮层再 append 到 body:
+   *   body → DIV(wrapper) → DIV.ant-picker-dropdown → panel
+   *
+   * 因此不要求 parentElement === document.body，
+   * 只要节点 class 匹配浮层类型且不在 #app 内即可。
    *
    * @param node - 待检测节点
-   * @returns 浮层类型或 null (非 Antd 浮层)
+   * @returns 浮层类型或 null
    */
   detectPopupType(node) {
-    if (node.parentElement !== document.body) return null;
+    if (this.isInsideApp(node)) return null;
+    return this.matchPopupClass(node);
+  }
+  /**
+   * 向上遍历 DOM，检测节点是否在某个浮层内部
+   *
+   * 查找最近的匹配 POPUP_CLASS_MAP 的祖先元素 (不要求它本身是 body 直系，
+   * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
+   * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
+   *
+   * @returns 浮层类型或 null (不在任何浮层内)
+   */
+  detectPopupAncestor(node) {
+    let current = node.parentElement;
+    while (current) {
+      const type = this.matchPopupClass(current);
+      if (type) {
+        const reachesBody = this.reachesBody(current);
+        if (reachesBody) return type;
+      }
+      if (current === document.body || current.id === "app") break;
+      current = current.parentElement;
+    }
+    return null;
+  }
+  /**
+   * 验证节点的祖先链是否能到达 document.body
+   * (经过若干层 wrapper 后依然是 body 下的浮层)
+   */
+  reachesBody(node) {
+    let current = node;
+    while (current && current !== document.body) {
+      if (current.id === "app") return false;
+      current = current.parentElement;
+    }
+    return current === document.body;
+  }
+  /**
+   * 检测节点 class 是否匹配某个浮层类型
+   */
+  matchPopupClass(node) {
     const classStr = node.className || "";
     if (typeof classStr !== "string") return null;
     const entries = Object.entries(POPUP_CLASS_MAP);
@@ -412,6 +471,22 @@ var TestIdObserver = class {
     const testId = `${config.runtimePagePrefix}${route}_${tag}_${current}`;
     node.setAttribute("data-testid", testId);
   }
+  /**
+   * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
+   *
+   * ID 格式: ${popupPrefix}${popupType}_${tag}_${counter}
+   * 例: hall_modal_button_0, hall_select_div_2
+   */
+  handlePopupChildNode(node, popupType, config) {
+    if (config.onlyInteractive && !this.isInteractive(node)) return;
+    const tag = this.getSimpleTag(node);
+    const key = `${popupType}_${tag}`;
+    const current = this.state.popupChildCounter.get(key) ?? 0;
+    this.state.popupChildCounter.set(key, current + 1);
+    const prefix = config.popupPrefixMap[popupType] || `${popupType}_`;
+    const testId = `${prefix}${tag}_${current}`;
+    node.setAttribute("data-testid", testId);
+  }
   // ==========================================================
   // 辅助方法
   // ==========================================================

package/dist/index.mjs

@@ -170,7 +170,8 @@ var TestIdObserver = class {
       observer: null,
       isRunning: false,
       currentRoute: "",
-      dynamicCounter: /* @__PURE__ */ new Map()
+      dynamicCounter: /* @__PURE__ */ new Map(),
+      popupChildCounter: /* @__PURE__ */ new Map()
     };
   }
   // ==========================================================
@@ -207,6 +208,12 @@ var TestIdObserver = class {
   setRoute(routeName) {
     this.state.currentRoute = routeName;
   }
+  /**
+   * 重置浮层子节点计数器 (路由切换时调用)
+   */
+  resetPopupChildCounter() {
+    this.state.popupChildCounter.clear();
+  }
   /**
    * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
    */
@@ -244,8 +251,9 @@ var TestIdObserver = class {
    * 决策优先级:
    *   0. 已有 data-testid → 跳过
    *   1. 带 data-test-base-key → 公共组件实例 (锚点定位)
-   *   2. body 直系浮层 → 匹配浮层类型 → 独立前缀
-   *   3. #app 内普通节点 → dynamic
+   *   2. body 直系浮层根节点 → 匹配浮层类型 → 独立前缀
+   *   3. 浮层内部子节点 → 查找浮层祖先 → 浮层独立前缀 + 计数器
+   *   4. #app 内普通节点 → dynamic
    */
   processSingleNode(node) {
     const config = getConfig();
@@ -261,6 +269,11 @@ var TestIdObserver = class {
       this.handlePopupNode(node, popupType);
       return;
     }
+    const popupAncestorType = this.detectPopupAncestor(node);
+    if (popupAncestorType) {
+      this.handlePopupChildNode(node, popupAncestorType, config);
+      return;
+    }
     if (this.isInsideApp(node)) {
       this.handleDynamicNode(node, config);
     }
@@ -331,13 +344,59 @@ var TestIdObserver = class {
     node.setAttribute("data-testid", testId);
   }
   /**
-   * 通过 CSS class 匹配浮层类型
+   * 检测节点是否为浮层根节点
+   *
+   * Ant Design Vue 4.x 可能用一层 wrapper DIV 包裹浮层再 append 到 body:
+   *   body → DIV(wrapper) → DIV.ant-picker-dropdown → panel
+   *
+   * 因此不要求 parentElement === document.body，
+   * 只要节点 class 匹配浮层类型且不在 #app 内即可。
    *
    * @param node - 待检测节点
-   * @returns 浮层类型或 null (非 Antd 浮层)
+   * @returns 浮层类型或 null
    */
   detectPopupType(node) {
-    if (node.parentElement !== document.body) return null;
+    if (this.isInsideApp(node)) return null;
+    return this.matchPopupClass(node);
+  }
+  /**
+   * 向上遍历 DOM，检测节点是否在某个浮层内部
+   *
+   * 查找最近的匹配 POPUP_CLASS_MAP 的祖先元素 (不要求它本身是 body 直系，
+   * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
+   * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
+   *
+   * @returns 浮层类型或 null (不在任何浮层内)
+   */
+  detectPopupAncestor(node) {
+    let current = node.parentElement;
+    while (current) {
+      const type = this.matchPopupClass(current);
+      if (type) {
+        const reachesBody = this.reachesBody(current);
+        if (reachesBody) return type;
+      }
+      if (current === document.body || current.id === "app") break;
+      current = current.parentElement;
+    }
+    return null;
+  }
+  /**
+   * 验证节点的祖先链是否能到达 document.body
+   * (经过若干层 wrapper 后依然是 body 下的浮层)
+   */
+  reachesBody(node) {
+    let current = node;
+    while (current && current !== document.body) {
+      if (current.id === "app") return false;
+      current = current.parentElement;
+    }
+    return current === document.body;
+  }
+  /**
+   * 检测节点 class 是否匹配某个浮层类型
+   */
+  matchPopupClass(node) {
     const classStr = node.className || "";
     if (typeof classStr !== "string") return null;
     const entries = Object.entries(POPUP_CLASS_MAP);
@@ -370,6 +429,22 @@ var TestIdObserver = class {
     const testId = `${config.runtimePagePrefix}${route}_${tag}_${current}`;
     node.setAttribute("data-testid", testId);
   }
+  /**
+   * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
+   *
+   * ID 格式: ${popupPrefix}${popupType}_${tag}_${counter}
+   * 例: hall_modal_button_0, hall_select_div_2
+   */
+  handlePopupChildNode(node, popupType, config) {
+    if (config.onlyInteractive && !this.isInteractive(node)) return;
+    const tag = this.getSimpleTag(node);
+    const key = `${popupType}_${tag}`;
+    const current = this.state.popupChildCounter.get(key) ?? 0;
+    this.state.popupChildCounter.set(key, current + 1);
+    const prefix = config.popupPrefixMap[popupType] || `${popupType}_`;
+    const testId = `${prefix}${tag}_${current}`;
+    node.setAttribute("data-testid", testId);
+  }
   // ==========================================================
   // 辅助方法
   // ==========================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testid/antd-testid-runtime",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "运行时兜底打标模块 — MutationObserver + 锚点计数器 + 浮层计数器 + ID 重复检测",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",