npm - @testid/antd-testid-runtime - Versions diffs - 1.0.7 → 1.0.9 - Mend

@testid/antd-testid-runtime 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -1,3 +1,52 @@
+/**
+ * UI 库适配器接口 — adapters/types.ts
+ *
+ * 将 UI 库相关的 CSS class 命名、标签前缀、交互元素识别等逻辑
+ * 从核心 Observer 中解耦，实现可插拔的 UI 库支持。
+ *
+ * 每个适配器描述一个 UI 库的浮层组件识别规则，
+ * 多个适配器可组合使用 (如同时使用 Ant Design Vue + Element UI)。
+ */
+/**
+ * 支持的浮层类型
+ */
+type PopupType = 'modal' | 'drawer' | 'select' | 'datePicker' | 'popconfirm' | 'dropdown' | 'tooltip' | 'message';
+/**
+ * UI 库适配器接口
+ *
+ * 实现此接口即可让 Observer 自动识别该 UI 库的浮层组件。
+ */
+interface UiAdapter {
+    /** 适配器名称 (调试用) */
+    readonly name: string;
+    /** CSS 类名前缀数组 (如 AntD: ['ant'], Element: ['el']) */
+    readonly cssPrefixes: string[];
+    /**
+     * 浮层 CSS class 后缀映射
+     *
+     * 结构: PopupType → string[][]，两层数组含义:
+     *   - 外层: OR 关系，任一内层命中即匹配
+     *   - 内层: AND 关系，所有 class 必须同时出现
+     *
+     * 后缀不含前缀，由 buildPopupClassMap 动态拼接。
+     */
+    readonly popupClassSuffixMap: Record<PopupType, string[][]>;
+    /**
+     * 交互标签名列表 (用于 onlyInteractive 模式)
+     *
+     * 包含 UI 库的组件标签名 (如 'a-button', 'el-input') 和原生标签 (如 'button', 'input')。
+     * Observer 会合并所有适配器的 interactiveTags 进行判断。
+     */
+    readonly interactiveTags: string[];
+    /**
+     * 标签前缀正则 (用于 getSimpleTag 去除 UI 库前缀)
+     *
+     * 例: AntD → /^a-/, Element → /^el-/
+     * 多个适配器的正则用 | 合并。
+     */
+    readonly tagPrefixPattern: RegExp;
+}
 /**
  * 全局配置模块 — testMark.ts
  *
@@ -6,11 +55,9 @@
  * - 黑白名单
  * - 开关
  * - 浮层前缀映射
+ * - UI 库适配器
  */
-/**
- * 支持的浮层类型
- */
-type PopupType = 'modal' | 'drawer' | 'select' | 'datePicker' | 'popconfirm' | 'dropdown' | 'tooltip';
 /**
  * 全量配置接口
  */
@@ -28,17 +75,27 @@ interface TestIdMarkConfig {
     compilePrefix: string;
     /** 页面内动态节点统一前缀 (默认 "dynamic_") */
     runtimePagePrefix: string;
-    /** Antd 浮层组件专属前缀映射 */
+    /** 浮层组件专属前缀映射 */
     popupPrefixMap: Record<PopupType, string>;
     /**
-     * Ant Design Vue CSS 类名前缀 (对应 ConfigProvider 的 prefixCls)
+     * UI 库适配器列表 (默认为 [antdAdapter])
+     *
+     * 每个适配器定义了一个 UI 库的浮层 CSS class 识别规则、
+     * 交互标签列表和标签前缀。Observer 自动合并所有适配器的规则。
+     *
+     * 仅使用 Ant Design Vue:
+     *   adapters: [antdAdapter]
+     *
+     * 仅使用 Element UI:
+     *   adapters: [elementAdapter]
      *
-     * 支持数组，可同时匹配多个前缀体系:
-     *   默认: ['ant'] → 匹配 .ant-modal, .ant-picker-dropdown 等
-     *   若项目使用 <a-config-provider prefixCls="my-ui"> 则设为 ['my-ui']
-     *   混合使用: ['ant', 'my-ui'] → 同时匹配两个体系的所有浮层组件
+     * 同时使用两种 UI 库:
+     *   adapters: [antdAdapter, elementAdapter]
+     *
+     * 自定义 Ant Design Vue CSS 前缀 (如 <a-config-provider prefixCls="my-ui">):
+     *   adapters: [{ ...antdAdapter, cssPrefixes: ['my-ui'] }]
      */
-    antdClassPrefix: string[];
+    adapters: UiAdapter[];
     /** 忽略不打标的 HTML 标签名 */
     ignoreTags: string[];
     /** 包含此 class 的 DOM 跳过打标 */
@@ -50,10 +107,6 @@ interface TestIdMarkConfig {
     /** 路由切换时是否重置全部浮层计数器 */
     resetPopupCounterOnRouteChange: boolean;
 }
-/**
- * 交互控件白名单 (onlyInteractive === true 时生效)
- */
-declare const INTERACTIVE_TAGS: Set<string>;
 /**
  * 默认配置对象 (enable 默认为 true，由调用方传入 DEV 判断)
  */
@@ -74,6 +127,34 @@ declare function initConfig(custom?: Partial<TestIdMarkConfig>): void;
  */
 declare function getConfig(): Readonly<TestIdMarkConfig>;
+/**
+ * Ant Design Vue 适配器 — adapters/antd.ts
+ *
+ * 识别 Ant Design Vue 的浮层组件:
+ *   - ant-modal, ant-drawer, ant-select-dropdown, ant-picker-dropdown,
+ *     ant-popover+ant-popconfirm, ant-dropdown, ant-tooltip, ant-message
+ *
+ * 支持多版本兼容:
+ *   - Ant Design Vue 4.x: ant-picker-dropdown
+ *   - Ant Design Vue 1.x: ant-calendar-picker-container
+ */
+declare const antdAdapter: UiAdapter;
+/**
+ * Element UI 适配器 — adapters/element.ts
+ *
+ * 识别 Element UI / Element Plus 的浮层组件:
+ *   - el-dialog, el-drawer, el-select-dropdown, el-picker-panel,
+ *     el-message-box, el-popconfirm, el-dropdown-menu,
+ *     el-tooltip__popper, el-message
+ *
+ * 注意: el-popper 被多种组件共用 (select/dropdown/tooltip 等)，
+ *       不单独作为识别依据，避免误匹配。
+ */
+declare const elementAdapter: UiAdapter;
 /**
  * 锚点局部计数器 — testIdAnchorCounter.ts
  *
@@ -205,8 +286,12 @@ declare function buildPopupTestId(type: PopupType, tag: string, counterId: numbe
  */
 declare class TestIdObserver {
     private state;
-    /** 浮层 class 匹配映射 (根据 antdClassPrefix 动态构建) */
+    /** 浮层 class 匹配映射 (从 adapters 动态构建) */
     private popupClassMap;
+    /** 合并后的交互标签列表 (来自所有适配器) */
+    private interactiveTags;
+    /** 合并后的标签前缀正则 (用于 getSimpleTag) */
+    private tagPrefixPattern;
     constructor();
     /**
      * 启动 MutationObserver
@@ -291,7 +376,7 @@ declare class TestIdObserver {
      * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
      * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
      *
-     * @returns 浮层类型或 null (不在任何浮层内)
+     * @returns 浮层类型 + 祖先元素，或 null (不在任何浮层内)
      */
     private detectPopupAncestor;
     /**
@@ -314,6 +399,9 @@ declare class TestIdObserver {
     /**
      * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
      *
+     * 每个浮层实例独立计数: 以浮层根节点 data-testid 作为隔离 key，
+     * 重复打开相同类型的浮层，子元素 ID 均从 0 重新开始。
+     *
      * ID 格式: ${runtimePagePrefix}${popupPrefix}${tag}_${counter}
      * 例: hall_dynamic_modal_button_0, hall_dynamic_select_div_2
      *
@@ -327,17 +415,19 @@ declare class TestIdObserver {
     /**
      * 获取元素的简化标签名
      *
-     * 处理 Antd 组件前缀: a-button → button, a-input → input
+     * 去除所有适配器注册的 UI 库标签前缀:
+     *   AntD: a-button → button, a-input → input
+     *   Element: el-button → button, el-input → input
      */
     private getSimpleTag;
     /**
      * 判断是否可交互元素
      *
      * 可交互特征:
-     *   - 交互类标签: button, input, select, textarea
+     *   - 匹配任意适配器的交互标签 (含原生 + UI 库前缀)
      *   - onclick 属性
-     *   - role="button" / role="checkbox" / role="radio"
-     *   - cursor:pointer (不检测，因为可能从 CSS 继承，误判率高)
+     *   - role="button" / role="checkbox" / role="radio" / role="switch"
+     *   - tabindex 属性
      */
     private isInteractive;
     /**
@@ -394,4 +484,4 @@ declare class TestIdChecker {
     private static reportGroupDuplicates;
 }
-export { INTERACTIVE_TAGS, type ParsedBaseKey, type PopupType, TestIdChecker, type TestIdMarkConfig, TestIdObserver, buildAnchorTestId, buildPopupTestId, defaultConfig, getAnchorCounterMap, getConfig, getNextAnchorLocalIndex, getNextPopupId, getPopupCounterSnapshot, initConfig, mergeConfig, parseBaseKey, resetAllAnchorCounters, resetAllPopupCounters, resetPopupCounter };
+export { type ParsedBaseKey, type PopupType, TestIdChecker, type TestIdMarkConfig, TestIdObserver, type UiAdapter, antdAdapter, buildAnchorTestId, buildPopupTestId, defaultConfig, elementAdapter, getAnchorCounterMap, getConfig, getNextAnchorLocalIndex, getNextPopupId, getPopupCounterSnapshot, initConfig, mergeConfig, parseBaseKey, resetAllAnchorCounters, resetAllPopupCounters, resetPopupCounter };

package/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,52 @@
+/**
+ * UI 库适配器接口 — adapters/types.ts
+ *
+ * 将 UI 库相关的 CSS class 命名、标签前缀、交互元素识别等逻辑
+ * 从核心 Observer 中解耦，实现可插拔的 UI 库支持。
+ *
+ * 每个适配器描述一个 UI 库的浮层组件识别规则，
+ * 多个适配器可组合使用 (如同时使用 Ant Design Vue + Element UI)。
+ */
+/**
+ * 支持的浮层类型
+ */
+type PopupType = 'modal' | 'drawer' | 'select' | 'datePicker' | 'popconfirm' | 'dropdown' | 'tooltip' | 'message';
+/**
+ * UI 库适配器接口
+ *
+ * 实现此接口即可让 Observer 自动识别该 UI 库的浮层组件。
+ */
+interface UiAdapter {
+    /** 适配器名称 (调试用) */
+    readonly name: string;
+    /** CSS 类名前缀数组 (如 AntD: ['ant'], Element: ['el']) */
+    readonly cssPrefixes: string[];
+    /**
+     * 浮层 CSS class 后缀映射
+     *
+     * 结构: PopupType → string[][]，两层数组含义:
+     *   - 外层: OR 关系，任一内层命中即匹配
+     *   - 内层: AND 关系，所有 class 必须同时出现
+     *
+     * 后缀不含前缀，由 buildPopupClassMap 动态拼接。
+     */
+    readonly popupClassSuffixMap: Record<PopupType, string[][]>;
+    /**
+     * 交互标签名列表 (用于 onlyInteractive 模式)
+     *
+     * 包含 UI 库的组件标签名 (如 'a-button', 'el-input') 和原生标签 (如 'button', 'input')。
+     * Observer 会合并所有适配器的 interactiveTags 进行判断。
+     */
+    readonly interactiveTags: string[];
+    /**
+     * 标签前缀正则 (用于 getSimpleTag 去除 UI 库前缀)
+     *
+     * 例: AntD → /^a-/, Element → /^el-/
+     * 多个适配器的正则用 | 合并。
+     */
+    readonly tagPrefixPattern: RegExp;
+}
 /**
  * 全局配置模块 — testMark.ts
  *
@@ -6,11 +55,9 @@
  * - 黑白名单
  * - 开关
  * - 浮层前缀映射
+ * - UI 库适配器
  */
-/**
- * 支持的浮层类型
- */
-type PopupType = 'modal' | 'drawer' | 'select' | 'datePicker' | 'popconfirm' | 'dropdown' | 'tooltip';
 /**
  * 全量配置接口
  */
@@ -28,17 +75,27 @@ interface TestIdMarkConfig {
     compilePrefix: string;
     /** 页面内动态节点统一前缀 (默认 "dynamic_") */
     runtimePagePrefix: string;
-    /** Antd 浮层组件专属前缀映射 */
+    /** 浮层组件专属前缀映射 */
     popupPrefixMap: Record<PopupType, string>;
     /**
-     * Ant Design Vue CSS 类名前缀 (对应 ConfigProvider 的 prefixCls)
+     * UI 库适配器列表 (默认为 [antdAdapter])
+     *
+     * 每个适配器定义了一个 UI 库的浮层 CSS class 识别规则、
+     * 交互标签列表和标签前缀。Observer 自动合并所有适配器的规则。
+     *
+     * 仅使用 Ant Design Vue:
+     *   adapters: [antdAdapter]
+     *
+     * 仅使用 Element UI:
+     *   adapters: [elementAdapter]
      *
-     * 支持数组，可同时匹配多个前缀体系:
-     *   默认: ['ant'] → 匹配 .ant-modal, .ant-picker-dropdown 等
-     *   若项目使用 <a-config-provider prefixCls="my-ui"> 则设为 ['my-ui']
-     *   混合使用: ['ant', 'my-ui'] → 同时匹配两个体系的所有浮层组件
+     * 同时使用两种 UI 库:
+     *   adapters: [antdAdapter, elementAdapter]
+     *
+     * 自定义 Ant Design Vue CSS 前缀 (如 <a-config-provider prefixCls="my-ui">):
+     *   adapters: [{ ...antdAdapter, cssPrefixes: ['my-ui'] }]
      */
-    antdClassPrefix: string[];
+    adapters: UiAdapter[];
     /** 忽略不打标的 HTML 标签名 */
     ignoreTags: string[];
     /** 包含此 class 的 DOM 跳过打标 */
@@ -50,10 +107,6 @@ interface TestIdMarkConfig {
     /** 路由切换时是否重置全部浮层计数器 */
     resetPopupCounterOnRouteChange: boolean;
 }
-/**
- * 交互控件白名单 (onlyInteractive === true 时生效)
- */
-declare const INTERACTIVE_TAGS: Set<string>;
 /**
  * 默认配置对象 (enable 默认为 true，由调用方传入 DEV 判断)
  */
@@ -74,6 +127,34 @@ declare function initConfig(custom?: Partial<TestIdMarkConfig>): void;
  */
 declare function getConfig(): Readonly<TestIdMarkConfig>;
+/**
+ * Ant Design Vue 适配器 — adapters/antd.ts
+ *
+ * 识别 Ant Design Vue 的浮层组件:
+ *   - ant-modal, ant-drawer, ant-select-dropdown, ant-picker-dropdown,
+ *     ant-popover+ant-popconfirm, ant-dropdown, ant-tooltip, ant-message
+ *
+ * 支持多版本兼容:
+ *   - Ant Design Vue 4.x: ant-picker-dropdown
+ *   - Ant Design Vue 1.x: ant-calendar-picker-container
+ */
+declare const antdAdapter: UiAdapter;
+/**
+ * Element UI 适配器 — adapters/element.ts
+ *
+ * 识别 Element UI / Element Plus 的浮层组件:
+ *   - el-dialog, el-drawer, el-select-dropdown, el-picker-panel,
+ *     el-message-box, el-popconfirm, el-dropdown-menu,
+ *     el-tooltip__popper, el-message
+ *
+ * 注意: el-popper 被多种组件共用 (select/dropdown/tooltip 等)，
+ *       不单独作为识别依据，避免误匹配。
+ */
+declare const elementAdapter: UiAdapter;
 /**
  * 锚点局部计数器 — testIdAnchorCounter.ts
  *
@@ -205,8 +286,12 @@ declare function buildPopupTestId(type: PopupType, tag: string, counterId: numbe
  */
 declare class TestIdObserver {
     private state;
-    /** 浮层 class 匹配映射 (根据 antdClassPrefix 动态构建) */
+    /** 浮层 class 匹配映射 (从 adapters 动态构建) */
     private popupClassMap;
+    /** 合并后的交互标签列表 (来自所有适配器) */
+    private interactiveTags;
+    /** 合并后的标签前缀正则 (用于 getSimpleTag) */
+    private tagPrefixPattern;
     constructor();
     /**
      * 启动 MutationObserver
@@ -291,7 +376,7 @@ declare class TestIdObserver {
      * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
      * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
      *
-     * @returns 浮层类型或 null (不在任何浮层内)
+     * @returns 浮层类型 + 祖先元素，或 null (不在任何浮层内)
      */
     private detectPopupAncestor;
     /**
@@ -314,6 +399,9 @@ declare class TestIdObserver {
     /**
      * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
      *
+     * 每个浮层实例独立计数: 以浮层根节点 data-testid 作为隔离 key，
+     * 重复打开相同类型的浮层，子元素 ID 均从 0 重新开始。
+     *
      * ID 格式: ${runtimePagePrefix}${popupPrefix}${tag}_${counter}
      * 例: hall_dynamic_modal_button_0, hall_dynamic_select_div_2
      *
@@ -327,17 +415,19 @@ declare class TestIdObserver {
     /**
      * 获取元素的简化标签名
      *
-     * 处理 Antd 组件前缀: a-button → button, a-input → input
+     * 去除所有适配器注册的 UI 库标签前缀:
+     *   AntD: a-button → button, a-input → input
+     *   Element: el-button → button, el-input → input
      */
     private getSimpleTag;
     /**
      * 判断是否可交互元素
      *
      * 可交互特征:
-     *   - 交互类标签: button, input, select, textarea
+     *   - 匹配任意适配器的交互标签 (含原生 + UI 库前缀)
      *   - onclick 属性
-     *   - role="button" / role="checkbox" / role="radio"
-     *   - cursor:pointer (不检测，因为可能从 CSS 继承，误判率高)
+     *   - role="button" / role="checkbox" / role="radio" / role="switch"
+     *   - tabindex 属性
      */
     private isInteractive;
     /**
@@ -394,4 +484,4 @@ declare class TestIdChecker {
     private static reportGroupDuplicates;
 }
-export { INTERACTIVE_TAGS, type ParsedBaseKey, type PopupType, TestIdChecker, type TestIdMarkConfig, TestIdObserver, buildAnchorTestId, buildPopupTestId, defaultConfig, getAnchorCounterMap, getConfig, getNextAnchorLocalIndex, getNextPopupId, getPopupCounterSnapshot, initConfig, mergeConfig, parseBaseKey, resetAllAnchorCounters, resetAllPopupCounters, resetPopupCounter };
+export { type ParsedBaseKey, type PopupType, TestIdChecker, type TestIdMarkConfig, TestIdObserver, type UiAdapter, antdAdapter, buildAnchorTestId, buildPopupTestId, defaultConfig, elementAdapter, getAnchorCounterMap, getConfig, getNextAnchorLocalIndex, getNextPopupId, getPopupCounterSnapshot, initConfig, mergeConfig, parseBaseKey, resetAllAnchorCounters, resetAllPopupCounters, resetPopupCounter };

package/dist/index.js CHANGED Viewed

@@ -20,12 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  INTERACTIVE_TAGS: () => INTERACTIVE_TAGS,
   TestIdChecker: () => TestIdChecker,
   TestIdObserver: () => TestIdObserver,
+  antdAdapter: () => antdAdapter,
   buildAnchorTestId: () => buildAnchorTestId,
   buildPopupTestId: () => buildPopupTestId,
   defaultConfig: () => defaultConfig,
+  elementAdapter: () => elementAdapter,
   getAnchorCounterMap: () => getAnchorCounterMap,
   getConfig: () => getConfig,
   getNextAnchorLocalIndex: () => getNextAnchorLocalIndex,
@@ -40,27 +41,50 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
+// src/adapters/antd.ts
+var popupClassSuffixMap = {
+  modal: [["-modal"]],
+  drawer: [["-drawer"]],
+  select: [["-select-dropdown"]],
+  datePicker: [
+    ["-picker-dropdown"],
+    // Ant Design Vue 4.x
+    ["-calendar-picker-container"]
+    // Ant Design Vue 1.x
+  ],
+  popconfirm: [["-popover", "-popconfirm"]],
+  dropdown: [["-dropdown"]],
+  tooltip: [["-tooltip"]],
+  message: [["-message"]]
+};
+var antdAdapter = {
+  name: "ant-design-vue",
+  cssPrefixes: ["ant"],
+  popupClassSuffixMap,
+  interactiveTags: [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "a-button",
+    "a-input",
+    "a-input-number",
+    "a-select",
+    "a-textarea",
+    "a-checkbox",
+    "a-radio",
+    "a-switch"
+  ],
+  tagPrefixPattern: /^a-/
+};
 // src/config/testMark.ts
-var INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
-  "button",
-  "a-button",
-  "input",
-  "a-input",
-  "a-input-number",
-  "select",
-  "a-select",
-  "textarea",
-  "a-textarea",
-  "a-checkbox",
-  "a-radio",
-  "a-switch"
-]);
 var defaultConfig = {
   enable: true,
   globalPrefix: "",
   compilePrefix: "static_",
   runtimePagePrefix: "dynamic_",
-  antdClassPrefix: ["ant"],
+  adapters: [antdAdapter],
   popupPrefixMap: {
     modal: "modal_",
     drawer: "drawer_",
@@ -68,7 +92,8 @@ var defaultConfig = {
     datePicker: "datePicker_",
     popconfirm: "popconfirm_",
     dropdown: "dropdown_",
-    tooltip: "tooltip_"
+    tooltip: "tooltip_",
+    message: "message_"
   },
   ignoreTags: ["script", "style", "svg", "br", "iframe"],
   ignoreClass: ["no-test-mark", "hidden"],
@@ -115,6 +140,48 @@ function getConfig() {
   return globalConfig;
 }
+// src/adapters/element.ts
+var popupClassSuffixMap2 = {
+  modal: [["-dialog"]],
+  drawer: [["-drawer"]],
+  select: [["-select-dropdown"]],
+  datePicker: [
+    ["-picker-panel"],
+    // 日期/时间选择器面板
+    ["-date-range-picker__content"]
+    // 日期范围选择器内容区
+  ],
+  popconfirm: [
+    ["-message-box"],
+    // Element MessageBox
+    ["-popconfirm"]
+    // Element Popconfirm
+  ],
+  dropdown: [["-dropdown-menu"]],
+  tooltip: [["-tooltip__popper"]],
+  message: [["-message"]]
+};
+var elementAdapter = {
+  name: "element-ui",
+  cssPrefixes: ["el"],
+  popupClassSuffixMap: popupClassSuffixMap2,
+  interactiveTags: [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "el-button",
+    "el-input",
+    "el-input-number",
+    "el-select",
+    "el-textarea",
+    "el-checkbox",
+    "el-radio",
+    "el-switch"
+  ],
+  tagPrefixPattern: /^el-/
+};
 // src/utils/testIdAnchorCounter.ts
 var anchorCounterMap = /* @__PURE__ */ new Map();
 function buildAnchorKey(anchorTestId, componentName, tagName) {
@@ -155,7 +222,8 @@ var popupCounters = {
   datePicker: 0,
   popconfirm: 0,
   dropdown: 0,
-  tooltip: 0
+  tooltip: 0,
+  message: 0
 };
 function getNextPopupId(type) {
   const key = type in popupCounters ? type : "modal";
@@ -182,32 +250,46 @@ function buildPopupTestId(type, tag, counterId) {
   return `${config.runtimePagePrefix}${popupPrefix}${tag}_${counterId}`;
 }
+// src/adapters/types.ts
+function mergeInteractiveTags(adapters) {
+  const set = /* @__PURE__ */ new Set();
+  for (const a of adapters) {
+    for (const tag of a.interactiveTags) {
+      set.add(tag);
+    }
+  }
+  return [...set];
+}
+function mergeTagPrefixPattern(adapters) {
+  const patterns = adapters.map((a) => a.tagPrefixPattern.source).filter(Boolean);
+  if (patterns.length === 0) return null;
+  return new RegExp(patterns.join("|"), "gi");
+}
 // src/utils/testIdObserver.ts
-var POPUP_CLASS_SUFFIX_MAP = {
-  modal: [["-modal"]],
-  drawer: [["-drawer"]],
-  select: [["-select-dropdown"]],
-  datePicker: [
-    ["-picker-dropdown"],
-    // Ant Design Vue 4.x (新)
-    ["-calendar-picker-container"]
-    // Ant Design Vue 1.x (旧)
-  ],
-  popconfirm: [["-popover", "-popconfirm"]],
-  dropdown: [["-dropdown"]],
-  tooltip: [["-tooltip"]]
-};
-function buildPopupClassMap(prefixes) {
+function buildPopupClassMap(adapters) {
   const result = {};
-  const entries = Object.entries(POPUP_CLASS_SUFFIX_MAP);
-  for (const [type, suffixGroups] of entries) {
-    const selectorSets = [];
-    for (const suffixGroup of suffixGroups) {
-      for (const prefix of prefixes) {
-        selectorSets.push(suffixGroup.map((suffix) => `${prefix}${suffix}`));
+  const seen = /* @__PURE__ */ new Map();
+  for (const adapter of adapters) {
+    const entries = Object.entries(adapter.popupClassSuffixMap);
+    for (const [type, suffixGroups] of entries) {
+      if (!seen.has(type)) {
+        seen.set(type, /* @__PURE__ */ new Set());
+        result[type] = [];
+      }
+      const typeSeen = seen.get(type);
+      const selectorSets = result[type];
+      for (const suffixGroup of suffixGroups) {
+        for (const prefix of adapter.cssPrefixes) {
+          const classCombo = suffixGroup.map((suffix) => `${prefix}${suffix}`);
+          const key = classCombo.join("|");
+          if (!typeSeen.has(key)) {
+            typeSeen.add(key);
+            selectorSets.push(classCombo);
+          }
+        }
       }
     }
-    result[type] = selectorSets;
   }
   return result;
 }
@@ -230,7 +312,9 @@ var TestIdObserver = class {
       }
     };
     const config = getConfig();
-    this.popupClassMap = buildPopupClassMap(config.antdClassPrefix);
+    this.popupClassMap = buildPopupClassMap(config.adapters);
+    this.interactiveTags = mergeInteractiveTags(config.adapters);
+    this.tagPrefixPattern = mergeTagPrefixPattern(config.adapters);
     this.state = {
       observer: null,
       isRunning: false,
@@ -334,9 +418,9 @@ var TestIdObserver = class {
       this.handlePopupNode(node, popupType);
       return;
     }
-    const popupAncestorType = this.detectPopupAncestor(node);
-    if (popupAncestorType) {
-      this.handlePopupChildNode(node, popupAncestorType, config);
+    const popupAncestor = this.detectPopupAncestor(node);
+    if (popupAncestor) {
+      this.handlePopupChildNode(node, popupAncestor.type, popupAncestor.element, config);
       return;
     }
     if (this.isInsideApp(node)) {
@@ -431,7 +515,7 @@ var TestIdObserver = class {
    * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
    * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
    *
-   * @returns 浮层类型或 null (不在任何浮层内)
+   * @returns 浮层类型 + 祖先元素，或 null (不在任何浮层内)
    */
   detectPopupAncestor(node) {
     let current = node.parentElement;
@@ -439,7 +523,7 @@ var TestIdObserver = class {
       const type = this.matchPopupClass(current);
       if (type) {
         const reachesBody = this.reachesBody(current);
-        if (reachesBody) return type;
+        if (reachesBody) return { type, element: current };
       }
       if (current === document.body || current.id === "app") break;
       current = current.parentElement;
@@ -498,15 +582,19 @@ var TestIdObserver = class {
   /**
    * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
    *
+   * 每个浮层实例独立计数: 以浮层根节点 data-testid 作为隔离 key，
+   * 重复打开相同类型的浮层，子元素 ID 均从 0 重新开始。
+   *
    * ID 格式: ${runtimePagePrefix}${popupPrefix}${tag}_${counter}
    * 例: hall_dynamic_modal_button_0, hall_dynamic_select_div_2
    *
    * 浮层子元素均为运行时注入，统一使用 runtimePagePrefix 前缀。
    */
-  handlePopupChildNode(node, popupType, config) {
+  handlePopupChildNode(node, popupType, popupElement, config) {
     if (config.onlyInteractive && !this.isInteractive(node)) return;
     const tag = this.getSimpleTag(node);
-    const key = `${popupType}_${tag}`;
+    const popupRootTestId = popupElement.getAttribute("data-testid") || `${popupType}_unknown`;
+    const key = `${popupRootTestId}_${tag}`;
     const current = this.state.popupChildCounter.get(key) ?? 0;
     this.state.popupChildCounter.set(key, current + 1);
     const popupPrefix = config.popupPrefixMap[popupType] || `${popupType}_`;
@@ -527,34 +615,29 @@ var TestIdObserver = class {
   /**
    * 获取元素的简化标签名
    *
-   * 处理 Antd 组件前缀: a-button → button, a-input → input
+   * 去除所有适配器注册的 UI 库标签前缀:
+   *   AntD: a-button → button, a-input → input
+   *   Element: el-button → button, el-input → input
    */
   getSimpleTag(node) {
-    return node.tagName.toLowerCase().replace(/^a-/, "");
+    let tag = node.tagName.toLowerCase();
+    if (this.tagPrefixPattern) {
+      tag = tag.replace(this.tagPrefixPattern, "");
+    }
+    return tag;
   }
   /**
    * 判断是否可交互元素
    *
    * 可交互特征:
-   *   - 交互类标签: button, input, select, textarea
+   *   - 匹配任意适配器的交互标签 (含原生 + UI 库前缀)
    *   - onclick 属性
-   *   - role="button" / role="checkbox" / role="radio"
-   *   - cursor:pointer (不检测，因为可能从 CSS 继承，误判率高)
+   *   - role="button" / role="checkbox" / role="radio" / role="switch"
+   *   - tabindex 属性
    */
   isInteractive(node) {
     const tag = node.tagName.toLowerCase();
-    const interactiveTags = [
-      "button",
-      "a-button",
-      "input",
-      "a-input",
-      "a-input-number",
-      "select",
-      "a-select",
-      "textarea",
-      "a-textarea"
-    ];
-    if (interactiveTags.includes(tag)) return true;
+    if (this.interactiveTags.includes(tag)) return true;
     if (node.hasAttribute("onclick")) return true;
     const role = node.getAttribute("role");
     if (role === "button" || role === "checkbox" || role === "radio" || role === "switch") {
@@ -590,7 +673,8 @@ var GROUP_LABELS = {
   datePicker: "[DatePicker \u6D6E\u5C42]",
   popconfirm: "[Popconfirm \u6D6E\u5C42]",
   dropdown: "[Dropdown \u6D6E\u5C42]",
-  tooltip: "[Tooltip \u6D6E\u5C42]"
+  tooltip: "[Tooltip \u6D6E\u5C42]",
+  message: "[Message \u6D6E\u5C42]"
 };
 var GROUP_SUGGESTIONS = {
   custom: "\u4E1A\u52A1\u4EE3\u7801\u4E2D\u5B58\u5728\u624B\u5199\u56FA\u5B9A\u91CD\u590D data-testid\uFF0C\u8BF7\u68C0\u67E5\u76F8\u5173\u6A21\u677F\u4EE3\u7801",
@@ -602,7 +686,8 @@ var GROUP_SUGGESTIONS = {
   datePicker: "DatePicker \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
   popconfirm: "Popconfirm \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
   dropdown: "Dropdown \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
-  tooltip: "Tooltip \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548"
+  tooltip: "Tooltip \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
+  message: "Message \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548"
 };
 var TestIdChecker = class {
   /**
@@ -699,7 +784,8 @@ var TestIdChecker = class {
       "datePicker",
       "popconfirm",
       "dropdown",
-      "tooltip"
+      "tooltip",
+      "message"
     ];
     for (const type of popupTypes) {
       if (prefix === `${type}_`) return type;
@@ -737,12 +823,13 @@ var TestIdChecker = class {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  INTERACTIVE_TAGS,
   TestIdChecker,
   TestIdObserver,
+  antdAdapter,
   buildAnchorTestId,
   buildPopupTestId,
   defaultConfig,
+  elementAdapter,
   getAnchorCounterMap,
   getConfig,
   getNextAnchorLocalIndex,

package/dist/index.mjs CHANGED Viewed

@@ -1,24 +1,47 @@
+// src/adapters/antd.ts
+var popupClassSuffixMap = {
+  modal: [["-modal"]],
+  drawer: [["-drawer"]],
+  select: [["-select-dropdown"]],
+  datePicker: [
+    ["-picker-dropdown"],
+    // Ant Design Vue 4.x
+    ["-calendar-picker-container"]
+    // Ant Design Vue 1.x
+  ],
+  popconfirm: [["-popover", "-popconfirm"]],
+  dropdown: [["-dropdown"]],
+  tooltip: [["-tooltip"]],
+  message: [["-message"]]
+};
+var antdAdapter = {
+  name: "ant-design-vue",
+  cssPrefixes: ["ant"],
+  popupClassSuffixMap,
+  interactiveTags: [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "a-button",
+    "a-input",
+    "a-input-number",
+    "a-select",
+    "a-textarea",
+    "a-checkbox",
+    "a-radio",
+    "a-switch"
+  ],
+  tagPrefixPattern: /^a-/
+};
 // src/config/testMark.ts
-var INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
-  "button",
-  "a-button",
-  "input",
-  "a-input",
-  "a-input-number",
-  "select",
-  "a-select",
-  "textarea",
-  "a-textarea",
-  "a-checkbox",
-  "a-radio",
-  "a-switch"
-]);
 var defaultConfig = {
   enable: true,
   globalPrefix: "",
   compilePrefix: "static_",
   runtimePagePrefix: "dynamic_",
-  antdClassPrefix: ["ant"],
+  adapters: [antdAdapter],
   popupPrefixMap: {
     modal: "modal_",
     drawer: "drawer_",
@@ -26,7 +49,8 @@ var defaultConfig = {
     datePicker: "datePicker_",
     popconfirm: "popconfirm_",
     dropdown: "dropdown_",
-    tooltip: "tooltip_"
+    tooltip: "tooltip_",
+    message: "message_"
   },
   ignoreTags: ["script", "style", "svg", "br", "iframe"],
   ignoreClass: ["no-test-mark", "hidden"],
@@ -73,6 +97,48 @@ function getConfig() {
   return globalConfig;
 }
+// src/adapters/element.ts
+var popupClassSuffixMap2 = {
+  modal: [["-dialog"]],
+  drawer: [["-drawer"]],
+  select: [["-select-dropdown"]],
+  datePicker: [
+    ["-picker-panel"],
+    // 日期/时间选择器面板
+    ["-date-range-picker__content"]
+    // 日期范围选择器内容区
+  ],
+  popconfirm: [
+    ["-message-box"],
+    // Element MessageBox
+    ["-popconfirm"]
+    // Element Popconfirm
+  ],
+  dropdown: [["-dropdown-menu"]],
+  tooltip: [["-tooltip__popper"]],
+  message: [["-message"]]
+};
+var elementAdapter = {
+  name: "element-ui",
+  cssPrefixes: ["el"],
+  popupClassSuffixMap: popupClassSuffixMap2,
+  interactiveTags: [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "el-button",
+    "el-input",
+    "el-input-number",
+    "el-select",
+    "el-textarea",
+    "el-checkbox",
+    "el-radio",
+    "el-switch"
+  ],
+  tagPrefixPattern: /^el-/
+};
 // src/utils/testIdAnchorCounter.ts
 var anchorCounterMap = /* @__PURE__ */ new Map();
 function buildAnchorKey(anchorTestId, componentName, tagName) {
@@ -113,7 +179,8 @@ var popupCounters = {
   datePicker: 0,
   popconfirm: 0,
   dropdown: 0,
-  tooltip: 0
+  tooltip: 0,
+  message: 0
 };
 function getNextPopupId(type) {
   const key = type in popupCounters ? type : "modal";
@@ -140,32 +207,46 @@ function buildPopupTestId(type, tag, counterId) {
   return `${config.runtimePagePrefix}${popupPrefix}${tag}_${counterId}`;
 }
+// src/adapters/types.ts
+function mergeInteractiveTags(adapters) {
+  const set = /* @__PURE__ */ new Set();
+  for (const a of adapters) {
+    for (const tag of a.interactiveTags) {
+      set.add(tag);
+    }
+  }
+  return [...set];
+}
+function mergeTagPrefixPattern(adapters) {
+  const patterns = adapters.map((a) => a.tagPrefixPattern.source).filter(Boolean);
+  if (patterns.length === 0) return null;
+  return new RegExp(patterns.join("|"), "gi");
+}
 // src/utils/testIdObserver.ts
-var POPUP_CLASS_SUFFIX_MAP = {
-  modal: [["-modal"]],
-  drawer: [["-drawer"]],
-  select: [["-select-dropdown"]],
-  datePicker: [
-    ["-picker-dropdown"],
-    // Ant Design Vue 4.x (新)
-    ["-calendar-picker-container"]
-    // Ant Design Vue 1.x (旧)
-  ],
-  popconfirm: [["-popover", "-popconfirm"]],
-  dropdown: [["-dropdown"]],
-  tooltip: [["-tooltip"]]
-};
-function buildPopupClassMap(prefixes) {
+function buildPopupClassMap(adapters) {
   const result = {};
-  const entries = Object.entries(POPUP_CLASS_SUFFIX_MAP);
-  for (const [type, suffixGroups] of entries) {
-    const selectorSets = [];
-    for (const suffixGroup of suffixGroups) {
-      for (const prefix of prefixes) {
-        selectorSets.push(suffixGroup.map((suffix) => `${prefix}${suffix}`));
+  const seen = /* @__PURE__ */ new Map();
+  for (const adapter of adapters) {
+    const entries = Object.entries(adapter.popupClassSuffixMap);
+    for (const [type, suffixGroups] of entries) {
+      if (!seen.has(type)) {
+        seen.set(type, /* @__PURE__ */ new Set());
+        result[type] = [];
+      }
+      const typeSeen = seen.get(type);
+      const selectorSets = result[type];
+      for (const suffixGroup of suffixGroups) {
+        for (const prefix of adapter.cssPrefixes) {
+          const classCombo = suffixGroup.map((suffix) => `${prefix}${suffix}`);
+          const key = classCombo.join("|");
+          if (!typeSeen.has(key)) {
+            typeSeen.add(key);
+            selectorSets.push(classCombo);
+          }
+        }
       }
     }
-    result[type] = selectorSets;
   }
   return result;
 }
@@ -188,7 +269,9 @@ var TestIdObserver = class {
       }
     };
     const config = getConfig();
-    this.popupClassMap = buildPopupClassMap(config.antdClassPrefix);
+    this.popupClassMap = buildPopupClassMap(config.adapters);
+    this.interactiveTags = mergeInteractiveTags(config.adapters);
+    this.tagPrefixPattern = mergeTagPrefixPattern(config.adapters);
     this.state = {
       observer: null,
       isRunning: false,
@@ -292,9 +375,9 @@ var TestIdObserver = class {
       this.handlePopupNode(node, popupType);
       return;
     }
-    const popupAncestorType = this.detectPopupAncestor(node);
-    if (popupAncestorType) {
-      this.handlePopupChildNode(node, popupAncestorType, config);
+    const popupAncestor = this.detectPopupAncestor(node);
+    if (popupAncestor) {
+      this.handlePopupChildNode(node, popupAncestor.type, popupAncestor.element, config);
       return;
     }
     if (this.isInsideApp(node)) {
@@ -389,7 +472,7 @@ var TestIdObserver = class {
    * 因为 Ant Design Vue 4 可能在浮层根节点外包一层 wrapper DIV)。
    * 找到浮层根节点后，继续向上验证其祖先链能到达 body (确保不在 #app 内)。
    *
-   * @returns 浮层类型或 null (不在任何浮层内)
+   * @returns 浮层类型 + 祖先元素，或 null (不在任何浮层内)
    */
   detectPopupAncestor(node) {
     let current = node.parentElement;
@@ -397,7 +480,7 @@ var TestIdObserver = class {
       const type = this.matchPopupClass(current);
       if (type) {
         const reachesBody = this.reachesBody(current);
-        if (reachesBody) return type;
+        if (reachesBody) return { type, element: current };
       }
       if (current === document.body || current.id === "app") break;
       current = current.parentElement;
@@ -456,15 +539,19 @@ var TestIdObserver = class {
   /**
    * 处理浮层内部子节点 (Modal/Drawer/Dropdown 内的按钮、输入框等)
    *
+   * 每个浮层实例独立计数: 以浮层根节点 data-testid 作为隔离 key，
+   * 重复打开相同类型的浮层，子元素 ID 均从 0 重新开始。
+   *
    * ID 格式: ${runtimePagePrefix}${popupPrefix}${tag}_${counter}
    * 例: hall_dynamic_modal_button_0, hall_dynamic_select_div_2
    *
    * 浮层子元素均为运行时注入，统一使用 runtimePagePrefix 前缀。
    */
-  handlePopupChildNode(node, popupType, config) {
+  handlePopupChildNode(node, popupType, popupElement, config) {
     if (config.onlyInteractive && !this.isInteractive(node)) return;
     const tag = this.getSimpleTag(node);
-    const key = `${popupType}_${tag}`;
+    const popupRootTestId = popupElement.getAttribute("data-testid") || `${popupType}_unknown`;
+    const key = `${popupRootTestId}_${tag}`;
     const current = this.state.popupChildCounter.get(key) ?? 0;
     this.state.popupChildCounter.set(key, current + 1);
     const popupPrefix = config.popupPrefixMap[popupType] || `${popupType}_`;
@@ -485,34 +572,29 @@ var TestIdObserver = class {
   /**
    * 获取元素的简化标签名
    *
-   * 处理 Antd 组件前缀: a-button → button, a-input → input
+   * 去除所有适配器注册的 UI 库标签前缀:
+   *   AntD: a-button → button, a-input → input
+   *   Element: el-button → button, el-input → input
    */
   getSimpleTag(node) {
-    return node.tagName.toLowerCase().replace(/^a-/, "");
+    let tag = node.tagName.toLowerCase();
+    if (this.tagPrefixPattern) {
+      tag = tag.replace(this.tagPrefixPattern, "");
+    }
+    return tag;
   }
   /**
    * 判断是否可交互元素
    *
    * 可交互特征:
-   *   - 交互类标签: button, input, select, textarea
+   *   - 匹配任意适配器的交互标签 (含原生 + UI 库前缀)
    *   - onclick 属性
-   *   - role="button" / role="checkbox" / role="radio"
-   *   - cursor:pointer (不检测，因为可能从 CSS 继承，误判率高)
+   *   - role="button" / role="checkbox" / role="radio" / role="switch"
+   *   - tabindex 属性
    */
   isInteractive(node) {
     const tag = node.tagName.toLowerCase();
-    const interactiveTags = [
-      "button",
-      "a-button",
-      "input",
-      "a-input",
-      "a-input-number",
-      "select",
-      "a-select",
-      "textarea",
-      "a-textarea"
-    ];
-    if (interactiveTags.includes(tag)) return true;
+    if (this.interactiveTags.includes(tag)) return true;
     if (node.hasAttribute("onclick")) return true;
     const role = node.getAttribute("role");
     if (role === "button" || role === "checkbox" || role === "radio" || role === "switch") {
@@ -548,7 +630,8 @@ var GROUP_LABELS = {
   datePicker: "[DatePicker \u6D6E\u5C42]",
   popconfirm: "[Popconfirm \u6D6E\u5C42]",
   dropdown: "[Dropdown \u6D6E\u5C42]",
-  tooltip: "[Tooltip \u6D6E\u5C42]"
+  tooltip: "[Tooltip \u6D6E\u5C42]",
+  message: "[Message \u6D6E\u5C42]"
 };
 var GROUP_SUGGESTIONS = {
   custom: "\u4E1A\u52A1\u4EE3\u7801\u4E2D\u5B58\u5728\u624B\u5199\u56FA\u5B9A\u91CD\u590D data-testid\uFF0C\u8BF7\u68C0\u67E5\u76F8\u5173\u6A21\u677F\u4EE3\u7801",
@@ -560,7 +643,8 @@ var GROUP_SUGGESTIONS = {
   datePicker: "DatePicker \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
   popconfirm: "Popconfirm \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
   dropdown: "Dropdown \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
-  tooltip: "Tooltip \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548"
+  tooltip: "Tooltip \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548",
+  message: "Message \u72EC\u7ACB\u8BA1\u6570\u5668\u81EA\u589E\u903B\u8F91\u5931\u6548"
 };
 var TestIdChecker = class {
   /**
@@ -657,7 +741,8 @@ var TestIdChecker = class {
       "datePicker",
       "popconfirm",
       "dropdown",
-      "tooltip"
+      "tooltip",
+      "message"
     ];
     for (const type of popupTypes) {
       if (prefix === `${type}_`) return type;
@@ -694,12 +779,13 @@ var TestIdChecker = class {
   }
 };
 export {
-  INTERACTIVE_TAGS,
   TestIdChecker,
   TestIdObserver,
+  antdAdapter,
   buildAnchorTestId,
   buildPopupTestId,
   defaultConfig,
+  elementAdapter,
   getAnchorCounterMap,
   getConfig,
   getNextAnchorLocalIndex,

package/package.json CHANGED Viewed

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