@testid/antd-testid-runtime 1.0.1 → 1.0.3

package/dist/index.d.mts

@@ -30,6 +30,13 @@ interface TestIdMarkConfig {
     runtimePagePrefix: string;
     /** Antd 浮层组件专属前缀映射 */
     popupPrefixMap: Record<PopupType, string>;
+    /**
+     * Ant Design Vue CSS 类名前缀 (对应 ConfigProvider 的 prefixCls)
+     *
+     * 默认: 'ant' → 匹配 .ant-modal, .ant-picker-dropdown 等
+     * 若项目使用 <a-config-provider prefixCls="my-ui"> 则设为 'my-ui'
+     */
+    antdClassPrefix: string;
     /** 忽略不打标的 HTML 标签名 */
     ignoreTags: string[];
     /** 包含此 class 的 DOM 跳过打标 */
@@ -194,6 +201,8 @@ declare function buildPopupTestId(type: PopupType, tag: string, counterId: numbe
  */
 declare class TestIdObserver {
     private state;
+    /** 浮层 class 匹配映射 (根据 antdClassPrefix 动态构建) */
+    private popupClassMap;
     constructor();
     /**
      * 启动 MutationObserver
@@ -207,6 +216,10 @@ declare class TestIdObserver {
      * 更新当前路由 (路由切换时调用)
      */
     setRoute(routeName: string): void;
+    /**
+     * 重置浮层子节点计数器 (路由切换时调用)
+     */
+    resetPopupChildCounter(): void;
     /**
      * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
      */
@@ -225,8 +238,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 +268,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

@@ -30,6 +30,13 @@ interface TestIdMarkConfig {
     runtimePagePrefix: string;
     /** Antd 浮层组件专属前缀映射 */
     popupPrefixMap: Record<PopupType, string>;
+    /**
+     * Ant Design Vue CSS 类名前缀 (对应 ConfigProvider 的 prefixCls)
+     *
+     * 默认: 'ant' → 匹配 .ant-modal, .ant-picker-dropdown 等
+     * 若项目使用 <a-config-provider prefixCls="my-ui"> 则设为 'my-ui'
+     */
+    antdClassPrefix: string;
     /** 忽略不打标的 HTML 标签名 */
     ignoreTags: string[];
     /** 包含此 class 的 DOM 跳过打标 */
@@ -194,6 +201,8 @@ declare function buildPopupTestId(type: PopupType, tag: string, counterId: numbe
  */
 declare class TestIdObserver {
     private state;
+    /** 浮层 class 匹配映射 (根据 antdClassPrefix 动态构建) */
+    private popupClassMap;
     constructor();
     /**
      * 启动 MutationObserver
@@ -207,6 +216,10 @@ declare class TestIdObserver {
      * 更新当前路由 (路由切换时调用)
      */
     setRoute(routeName: string): void;
+    /**
+     * 重置浮层子节点计数器 (路由切换时调用)
+     */
+    resetPopupChildCounter(): void;
     /**
      * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
      */
@@ -225,8 +238,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 +268,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

@@ -60,6 +60,7 @@ var defaultConfig = {
   globalPrefix: "",
   compilePrefix: "static_",
   runtimePagePrefix: "dynamic_",
+  antdClassPrefix: "ant",
   popupPrefixMap: {
     modal: "modal_",
     drawer: "drawer_",
@@ -181,15 +182,23 @@ function buildPopupTestId(type, tag, counterId) {
 }
 
 // src/utils/testIdObserver.ts
-var POPUP_CLASS_MAP = {
-  modal: ".ant-modal",
-  drawer: ".ant-drawer",
-  select: ".ant-select-dropdown",
-  datePicker: ".ant-picker-dropdown",
-  popconfirm: ".ant-popover.ant-popconfirm",
-  dropdown: ".ant-dropdown",
-  tooltip: ".ant-tooltip"
+var POPUP_CLASS_SUFFIX_MAP = {
+  modal: ".{prefix}-modal",
+  drawer: ".{prefix}-drawer",
+  select: ".{prefix}-select-dropdown",
+  datePicker: ".{prefix}-picker-dropdown",
+  popconfirm: ".{prefix}-popover.{prefix}-popconfirm",
+  dropdown: ".{prefix}-dropdown",
+  tooltip: ".{prefix}-tooltip"
 };
+function buildPopupClassMap(prefix) {
+  const result = {};
+  const entries = Object.entries(POPUP_CLASS_SUFFIX_MAP);
+  for (const [type, template] of entries) {
+    result[type] = template.replace(/\{prefix\}/g, prefix);
+  }
+  return result;
+}
 var TestIdObserver = class {
   constructor() {
     // ==========================================================
@@ -208,11 +217,14 @@ var TestIdObserver = class {
         });
       }
     };
+    const config = getConfig();
+    this.popupClassMap = buildPopupClassMap(config.antdClassPrefix);
     this.state = {
       observer: null,
       isRunning: false,
       currentRoute: "",
-      dynamicCounter: /* @__PURE__ */ new Map()
+      dynamicCounter: /* @__PURE__ */ new Map(),
+      popupChildCounter: /* @__PURE__ */ new Map()
     };
   }
   // ==========================================================
@@ -249,6 +261,12 @@ var TestIdObserver = class {
   setRoute(routeName) {
     this.state.currentRoute = routeName;
   }
+  /**
+   * 重置浮层子节点计数器 (路由切换时调用)
+   */
+  resetPopupChildCounter() {
+    this.state.popupChildCounter.clear();
+  }
   /**
    * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
    */
@@ -286,8 +304,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 +322,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,16 +397,62 @@ 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);
+    const entries = Object.entries(this.popupClassMap);
     for (const [type, selector] of entries) {
       const classes = selector.replace(/^\./, "").split(".");
       const allMatch = classes.every(
@@ -412,6 +482,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

@@ -18,6 +18,7 @@ var defaultConfig = {
   globalPrefix: "",
   compilePrefix: "static_",
   runtimePagePrefix: "dynamic_",
+  antdClassPrefix: "ant",
   popupPrefixMap: {
     modal: "modal_",
     drawer: "drawer_",
@@ -139,15 +140,23 @@ function buildPopupTestId(type, tag, counterId) {
 }
 
 // src/utils/testIdObserver.ts
-var POPUP_CLASS_MAP = {
-  modal: ".ant-modal",
-  drawer: ".ant-drawer",
-  select: ".ant-select-dropdown",
-  datePicker: ".ant-picker-dropdown",
-  popconfirm: ".ant-popover.ant-popconfirm",
-  dropdown: ".ant-dropdown",
-  tooltip: ".ant-tooltip"
+var POPUP_CLASS_SUFFIX_MAP = {
+  modal: ".{prefix}-modal",
+  drawer: ".{prefix}-drawer",
+  select: ".{prefix}-select-dropdown",
+  datePicker: ".{prefix}-picker-dropdown",
+  popconfirm: ".{prefix}-popover.{prefix}-popconfirm",
+  dropdown: ".{prefix}-dropdown",
+  tooltip: ".{prefix}-tooltip"
 };
+function buildPopupClassMap(prefix) {
+  const result = {};
+  const entries = Object.entries(POPUP_CLASS_SUFFIX_MAP);
+  for (const [type, template] of entries) {
+    result[type] = template.replace(/\{prefix\}/g, prefix);
+  }
+  return result;
+}
 var TestIdObserver = class {
   constructor() {
     // ==========================================================
@@ -166,11 +175,14 @@ var TestIdObserver = class {
         });
       }
     };
+    const config = getConfig();
+    this.popupClassMap = buildPopupClassMap(config.antdClassPrefix);
     this.state = {
       observer: null,
       isRunning: false,
       currentRoute: "",
-      dynamicCounter: /* @__PURE__ */ new Map()
+      dynamicCounter: /* @__PURE__ */ new Map(),
+      popupChildCounter: /* @__PURE__ */ new Map()
     };
   }
   // ==========================================================
@@ -207,6 +219,12 @@ var TestIdObserver = class {
   setRoute(routeName) {
     this.state.currentRoute = routeName;
   }
+  /**
+   * 重置浮层子节点计数器 (路由切换时调用)
+   */
+  resetPopupChildCounter() {
+    this.state.popupChildCounter.clear();
+  }
   /**
    * 全量扫描当前 DOM (用于启动时兜底, 处理 Observer 启动前已渲染的节点)
    */
@@ -244,8 +262,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 +280,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,16 +355,62 @@ 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);
+    const entries = Object.entries(this.popupClassMap);
     for (const [type, selector] of entries) {
       const classes = selector.replace(/^\./, "").split(".");
       const allMatch = classes.every(
@@ -370,6 +440,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.3",
   "description": "运行时兜底打标模块 — MutationObserver + 锚点计数器 + 浮层计数器 + ID 重复检测",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",