vite-plugin-vue-testid 1.1.3 → 1.1.5

package/README.md

@@ -6,15 +6,21 @@ A Vite plugin that auto-injects `data-testid` into Vue component templates via c
 
 ## Features
 
+- **Compile-time three-layer injection** — Prioritized counter architecture ensures stable, unique testids:
+  - **v-for dynamic injection** (最高) — uses loop index variable for per-iteration uniqueness without runtime dedup
+  - **Conditional block sub-counters** (第二) — v-if/v-else/v-show blocks own independent counters, child testids prefixed with parent's testid for stability
+  - **Global counter** (第三) — cross-template shared counter with used-id set for uniqueness
 - **Full runtime coverage** — MutationObserver-based injection for all ant-design-vue component roots, sub-elements, and teleported panels, no compile-time config required
-- **Optional compile-time enhancement** — Inject stable, unique testids into custom business components (e.g., `<MyInput />`) at compile time, automatically passed through to inner antd components via `inheritAttrs`
+- **Vue plugin bridge** — `createTestIdBridge()` reads compile-time testid from VNode.props and writes to `$el`, bypassing `inheritAttrs: false`
 - **Multi-root component fix** — Auto-adds `v-bind="$attrs"` to the first antd root element in multi-root child components, ensuring testid pass-through
 - **Custom prefixCls** — Full support for ConfigProvider's custom CSS class prefix
 - **Custom component mapping** — Extendable matcher rules for third-party UI libraries or custom components
 - **Full panel coverage** — DatePicker (date/month/year/decade), RangePicker, TimePicker, Cascader, Select, TreeSelect
 - **Sub-element injection** — InputNumber internal input & up/down buttons, Slider handles, Rate stars, Upload file input, Tabs tabs/panes
 - **Menu sub-elements** — Text-based testids for menu-item, sub-menu, and menu-item-group
-- **Preserves existing testIds** — Elements with manually assigned `data-testid` are skipped
+- **Event listener marking** — `{tag}-event-{names}-{n}` format for elements with event handlers, making interactive elements easy to locate
+- **Configurable prefix** — `testIdPrefix` option to prepend a common prefix to all compile-time testids
+- **Preserves existing testIds** — Elements with manually assigned `data-testid` are skipped (all 3 layers are idempotent)
 - **MutationObserver dynamic watch** — Panel switching, tree node expand/collapse, and async component loading all auto-trigger re-injection
 - **One-shot injection mode** — SSR/hydration friendly, call directly without MutationObserver
 
@@ -59,31 +65,42 @@ app.mount('#app')
 setupAntTestIds()
 ```
 
-### Mode B: Compile-time + Runtime (for custom components needing stable testids)
+### Mode B: Compile-time + Runtime (recommended for stable, predictable testids)
 
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { testIdTransforms } from 'vite-plugin-vue-testid'
+import { testIdTransforms, vueTestIdPlugin } from 'vite-plugin-vue-testid'
 
 export default defineConfig({
   plugins: [
     vue({
       template: {
         compilerOptions: {
-          nodeTransforms: testIdTransforms()
+          nodeTransforms: testIdTransforms({
+            testIdPrefix: 'static-',   // optional: common prefix
+            debug: false,              // optional: debug logging
+          })
         }
       }
-    })
+    }),
+    vueTestIdPlugin(),
   ]
 })
 ```
 
 ```ts
-// main.ts — same as Mode A
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createTestIdBridge } from 'vite-plugin-vue-testid/plugin'
 import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
-setupAntTestIds()
+
+const app = createApp(App)
+app.use(createTestIdBridge())  // compile-time testid → DOM
+app.mount('#app')
+setupAntTestIds()               // panels / sub-elements / fallback
 ```
 
 ### Mode C: Compile-time only (panels not injected, not recommended)
@@ -234,23 +251,73 @@ a-sub-menu-Submenu                   # submenu
 a-menu-item-group-Group-Title        # menu item group
 ```
 
-### Compile-time: Custom Business Components
+### Compile-time: Three-Layer Injection
+
+The compile-time transform uses three priority-ordered injection layers:
+
+| Priority | Layer | Format | Example |
+|----------|-------|--------|---------|
+| 1st (highest) | v-for with index | `{tag}_in_for-{i0}[_{i1}]` | `a-card_in_for-0_1` |
+| 2nd | Conditional block child | `{parentTestId}__{tag}-{n}` | `a-button-1__a-input-0` |
+| 3rd | Global counter | `{tag}-{n}` | `a-input-2` |
 
+#### v-for Dynamic Injection
+
+```html
+<!-- Source -->
+<a-card v-for="(item, i) in list" :key="i"> ... </a-card>
+
+<!-- Compiled (dynamic expression, index auto-resolves per iteration) -->
+<a-card v-for="(item, i) in list" :key="i" data-testid="a-card_in_for-{{i}}"> ... </a-card>
+
+<!-- Without index variable → static suffix -->
+<!-- Source -->
+<a-card v-for="item in list" :key="item.id"> ... </a-card>
+<!-- Compiled -->
+<a-card v-for="item in list" :key="item.id" data-testid="a-card-in_for-0"> ... </a-card>
+```
+
+#### Conditional Block Sub-counters
+
+```html
+<!-- Source -->
+<a-card v-if="visible">
+  <a-input />
+  <a-button>Submit</a-button>
+</a-card>
+<a-card v-else>
+  <a-input />
+</a-card>
+
+<!-- Compiled (each conditional branch gets independent sub-counter) -->
+<a-card v-if="visible" data-testid="a-card-0">
+  <a-input data-testid="a-card-0__a-input-0" />
+  <a-button data-testid="a-card-0__a-button-event-click-0">Submit</a-button>
+</a-card>
+<a-card v-else data-testid="a-card-1">
+  <a-input data-testid="a-card-1__a-input-0" />
+</a-card>
 ```
-Format: {tagName}-{perTemplateIndex}
 
+Child elements inside v-if/v-else/v-show blocks use `{parentTestId}__{tag}-{n}` format, ensuring:
+- Testids are **stable** — parent element count changes don't affect child indices
+- **Predictable** — testers can locate nested elements by chaining parent→child testids
+
+#### Global Counter
+
+```html
 <!-- Source -->
-<MyInput />
-<MySelect />
-<MyInput />
+<a-input placeholder="Name" />
+<a-button>Save</a-button>
+<a-input placeholder="Email" />
 
 <!-- Compiled -->
-<MyInput data-testid="MyInput-0" />
-<MySelect data-testid="MySelect-0" />
-<MyInput data-testid="MyInput-1" />
+<a-input placeholder="Name" data-testid="a-input-0" />
+<a-button data-testid="a-button-event-click-0">Save</a-button>
+<a-input placeholder="Email" data-testid="a-input-1" />
 ```
 
-> **Design note**: The compile-time transform only injects testids on **custom business components** (passed through to inner antd components via `inheritAttrs`), NOT on antd components directly. All antd component testids are handled by the runtime layer (global counter ensures uniqueness).
+> **Design note**: Global counters are shared across all templates, with a used-id Set to skip already-occupied testids. Conditional block sub-counters are independent — adding/removing elements within a v-if block does not shift other elements' testids.
 
 ---
 
@@ -279,6 +346,45 @@ testIdTransforms({
    * @default []
    */
   customPrefixes: ['myapp-', 'el-'],
+
+  /**
+   * Common prefix prepended to all compile-time testids
+   * e.g., 'static-' produces 'static-a-button-0'
+   * @default ''
+   */
+  testIdPrefix: 'static-',
+
+  /**
+   * Enable v-for dynamic injection (requires index variable)
+   * @default true
+   */
+  injectForLoops: true,
+
+  /**
+   * Enable event listener marking on elements with @click, @input, etc.
+   * Produces '{tag}-event-{names}-{n}' format
+   * @default true
+   */
+  injectEventElements: true,
+
+  /**
+   * Enable debug logging
+   * @default false
+   */
+  debug: false,
+})
+```
+
+### Vite Plugin Options
+
+```ts
+import { vueTestIdPlugin } from 'vite-plugin-vue-testid'
+
+vueTestIdPlugin({
+  attributeName: 'data-testid',
+  testIdPrefix: 'static-',
+  prefixCls: 'ant',
+  debug: false,
 })
 ```
 
@@ -377,12 +483,13 @@ injectCurrentDropdowns({ prefixCls: 'ant' })
 
 > Components with `id` injection (Select, Cascader, DatePicker, RangePicker, TimePicker, Modal, Upload) also have the `id` attribute set, with the same value as testid.
 
-### Compile-time (custom business components)
+### Compile-time
 
 The compile-time transform injects testids on components matching:
-- Custom components with `tagType === Component` (e.g., `<MyInput />`)
+- Any component with `tagType === Component` (e.g., `<MyInput />`)
+- Components matching `antPrefix` (default: `a-*`) — with three-layer counter architecture
 - Components matching any prefix in `customPrefixes`
-- **Excluding** antd components (`a-*`), which are handled by the runtime
+- **Excluding** native HTML elements, `<slot>`, `<template>`, and text-only components
 
 ---
 
@@ -428,7 +535,13 @@ setupAntTestIds({
 | `createTestIdTransforms(opts?)` | `() => NodeTransform[]` | Same as above, full export name |
 | `createTestIdInjectTransform(opts?)` | `() => NodeTransform` | Create only the testid inject transform (without multi-root fix) |
 | `createMultiRootFixTransform(opts?)` | `() => NodeTransform` | Create only the multi-root fix transform |
-| `TransformOptions` | `interface` | `{ attributeName?, antPrefix?, customPrefixes? }` |
+| `TransformOptions` | `interface` | `{ attributeName?, antPrefix?, customPrefixes?, testIdPrefix?, injectForLoops?, injectEventElements?, debug? }` |
+
+### Vue Plugin Bridge (`/plugin` subpath)
+
+| Export | Type | Description |
+|--------|------|-------------|
+| `createTestIdBridge(opts?)` | `Plugin` | Vue 3 plugin — reads testid from VNode.props and writes to `$el` |
 
 ### Runtime (`/runtime` subpath)
 
@@ -444,7 +557,8 @@ setupAntTestIds({
 
 | Export | Type | Description |
 |--------|------|-------------|
-| `vueTestIdPlugin(opts?)` | `Plugin` | Vite plugin (placeholder, currently no functionality) |
+| `vueTestIdPlugin(opts?)` | `Plugin` | Vite plugin — config placeholder; actual injection via `testIdTransforms()` (compile-time) + `setupAntTestIds()` (runtime) |
+| `VueTestIdPluginOptions` | `interface` | `{ attributeName?, testIdPrefix?, prefixCls?, debug? }` |
 
 ### Deprecated
 
@@ -470,7 +584,17 @@ Panel containers also have their own MutationObserver to handle child node chang
 
 ### Compile-time (Optional)
 
-Uses Vue's compiler `nodeTransform` hook at AST stage to inject `data-testid="{tagName}-{index}"` on custom business components. Since injection happens in the parent template, testids are automatically passed through to the child component's root element via Vue's `fallthroughAttrs` mechanism.
+Uses Vue's compiler `nodeTransform` hook at the AST stage with a **three-layer counter/priority architecture**:
+
+1. **v-for Dynamic Injection** — When a component inside `v-for` has an index variable (e.g., `v-for="(item, i) in list"`), a dynamic JS expression is generated using the index variable chain (e.g., `a-card_in_for-{{i}}`). This produces unique per-iteration testids without runtime deduplication. Without index, falls back to `{tag}-in_for-{n}` static suffix.
+
+2. **Conditional Block Sub-counters** — v-if / v-else-if / v-else / v-show blocks own independent per-block counters. Child elements use `{parentTestId}__{tag}-{n}` format, where `parentTestId` is the containing block's testid. Adding/removing elements inside a conditional block does not affect testids in other blocks or outside.
+
+3. **Global Counter** — Non-conditional elements use a cross-template global counter with a `usedIds` Set to automatically skip already-occupied testids.
+
+All three layers check for existing `data-testid` before injecting (idempotent). Native HTML elements, `<slot>`, `<template>`, and text-only components are skipped.
+
+Since injection happens in the parent template, testids are automatically passed through to the child component's root element via Vue's `fallthroughAttrs` mechanism.
 
 For multi-root components (Fragment), `inheritAttrs` is not effective. `createMultiRootFixTransform` automatically adds `v-bind="$attrs"` to the first antd component root element to ensure pass-through.
 

package/dist/index.d.ts

@@ -3,7 +3,10 @@
  *
  * 为 Vue (ant-design-vue) 组件的 DOM 元素自动注入 data-testid 属性。
  *
- * 默认提供全运行时方案，可选启用编译期 transform 以获得稳定的、页面内唯一的 testid。
+ * 三层注入架构（"铁三角"）：
+ *   1. 编译期 transform — 为模板中的 antd/自定义组件注入稳定的 testid
+ *   2. Vue 插件桥接 — 将编译期注入的 testid 从 VNode.props 写入 DOM
+ *   3. 运行时 MutationObserver — 兜底覆盖弹层面板、子元素及动态内容
  *
  * === 使用方式 A：纯运行时 ===
  *
@@ -19,7 +22,7 @@
  * setupAntTestIds()
  * ```
  *
- * === 使用方式 B：编译期 + 运行时（推荐，获得唯一稳定 testid） ===
+ * === 使用方式 B：编译器 + Vue 插件 + 运行时（推荐，稳定 testid） ===
  *
  * ```ts
  * // vite.config.ts
@@ -30,7 +33,11 @@
  *     vue({
  *       template: {
  *         compilerOptions: {
- *           nodeTransforms: testIdTransforms()
+ *           nodeTransforms: testIdTransforms({
+ *             antPrefix: 'a-',
+ *             testIdPrefix: 'static-',   // 可选：公共前缀
+ *             debug: false,              // 可选：调试日志
+ *           })
  *         }
  *       }
  *     }),
@@ -38,9 +45,14 @@
  *   ]
  * })
  *
- * // main.ts (与 A 相同)
+ * // main.ts
+ * import { createTestIdBridge } from 'vite-plugin-vue-testid/plugin'
  * import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
- * setupAntTestIds()
+ *
+ * const app = createApp(App)
+ * app.use(createTestIdBridge())  // 编译器 testid → DOM（稳定）
+ * app.mount('#app')
+ * setupAntTestIds()               // 面板 / 子元素 / 兜底
  * ```
  *
  * === 使用方式 C：仅编译期（无运行时，面板不会注入 testid） ===
@@ -63,20 +75,50 @@
  * })
  * // main.ts 不需要调用 setupAntTestIds()
  * ```
+ *
+ * === 编译期 testid 格式说明 ===
+ *
+ * | 场景                        | 格式                                         | 示例                                  |
+ * |-----------------------------|----------------------------------------------|---------------------------------------|
+ * | 普通组件                     | `{tag}-{n}`                                  | `a-button-0`, `a-input-2`             |
+ * | v-if/v-show 条件块的子组件    | `{parentTestId}__{tag}-{n}`                  | `a-button-1__a-input-0`               |
+ * | v-for + index（动态）         | `{tag}_in_for-{i0}[_{i1}]`                   | `a-card_in_for-0_1`                   |
+ * | v-for 内部组件（无 index）    | `{tag}-in_for-{n}`                           | `a-button-in_for-0`                   |
+ * | 事件监听组件                 | `{tag}-event-{names}-{n}`                    | `a-button-event-click-0`              |
+ *
+ * 全局计数器跨所有模板共享，条件块拥有独立子计数器，确保条件渲染的组件
+ * 增删不影响外部组件的 testid 稳定性。
  */
 import type { Plugin } from 'vite';
 export type { RuntimeOptions, PanelContext, PanelInjectStrategy } from './runtime';
 export type { TransformOptions } from './transform';
+export type { TestIdBridgeOptions } from './plugin';
 import { createTestIdTransforms } from './transform';
 /** 等同于 `createTestIdTransforms()`，更短的导出名 */
 export declare const testIdTransforms: typeof createTestIdTransforms;
 export { createTestIdTransforms, createTestIdInjectTransform, createMultiRootFixTransform, } from './transform';
+export { createTestIdBridge } from './plugin';
 export interface VueTestIdPluginOptions {
     /**
      * testId 属性名
      * @default 'data-testid'
      */
     attributeName?: string;
+    /**
+     * 所有 testid 的公共前缀
+     * @default ''
+     */
+    testIdPrefix?: string;
+    /**
+     * ant-design-vue CSS 类名前缀，对应 ConfigProvider 的 prefixCls
+     * @default 'ant'
+     */
+    prefixCls?: string;
+    /**
+     * 启用调试日志
+     * @default false
+     */
+    debug?: boolean;
 }
 /**
  * Vite 插件。
@@ -84,8 +126,11 @@ export interface VueTestIdPluginOptions {
  * 当前作为配置占位符存在；实际的 testid 注入由以下组件完成：
  *   - 编译期：`testIdTransforms()` → 注册到 `vue()` 的 compilerOptions
  *   - 运行时：`setupAntTestIds()`  → 在 main.ts 中调用
+ *
+ * 可以通过 `config` 钩子将 testid 配置注入到构建上下文中，
+ * 供运行时与编译期共享配置（如 prefixCls、attributeName 等）。
  */
-export declare function vueTestIdPlugin(_opts?: VueTestIdPluginOptions): Plugin;
+export declare function vueTestIdPlugin(opts?: VueTestIdPluginOptions): Plugin;
 /**
  * @deprecated 此函数已废弃。请使用新的编译期 API：
  *

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAClF,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAEpD,4CAA4C;AAC5C,eAAO,MAAM,gBAAgB,+BAAyB,CAAA;AAEtD,OAAO,EACL,sBAAsB,EACtB,2BAA2B,EAC3B,2BAA2B,GAC5B,MAAM,aAAa,CAAA;AAIpB,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAItE;AAID;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,IAAI,CASrD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAClF,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AACnD,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAEpD,4CAA4C;AAC5C,eAAO,MAAM,gBAAgB,+BAAyB,CAAA;AAEtD,OAAO,EACL,sBAAsB,EACtB,2BAA2B,EAC3B,2BAA2B,GAC5B,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI7C,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAYrE;AAID;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,IAAI,CASrD"}

package/dist/index.js

@@ -134,6 +134,30 @@ var NATIVE_TAGS = /* @__PURE__ */ new Set([
   "var",
   "wbr"
 ]);
+var globalCounters = {};
+var globalUsedIds = {};
+function generateUniqueId(basePattern) {
+  let idx = globalCounters[basePattern] || 0;
+  let candidate;
+  do {
+    candidate = basePattern + "-" + idx;
+    idx++;
+  } while (globalUsedIds[candidate]);
+  globalCounters[basePattern] = idx;
+  globalUsedIds[candidate] = true;
+  return candidate;
+}
+function generateSubUniqueId(basePattern, state) {
+  let idx = state.counter[basePattern] || 0;
+  let candidate;
+  do {
+    candidate = basePattern + "-" + idx;
+    idx++;
+  } while (state.usedIds[candidate]);
+  state.counter[basePattern] = idx;
+  state.usedIds[candidate] = true;
+  return candidate;
+}
 function isAntdComponent(tag, antPrefix) {
   if (!tag.startsWith(antPrefix)) return false;
   if (tag === antPrefix.slice(0, -1)) return false;
@@ -143,7 +167,7 @@ function isTargetComponent(el, antPrefix, customPrefixes) {
   const { tag, tagType } = el;
   if (tagType === ElementTypes.ELEMENT && NATIVE_TAGS.has(tag)) return false;
   if (tagType === ElementTypes.SLOT || tagType === ElementTypes.TEMPLATE) return false;
-  if (isAntdComponent(tag, antPrefix)) return false;
+  if (isAntdComponent(tag, antPrefix)) return true;
   if (tagType === ElementTypes.COMPONENT) return true;
   if (customPrefixes.some((p) => tag.startsWith(p))) return true;
   return false;
@@ -177,7 +201,6 @@ function createVBindAttrsDirective(loc) {
       content: "$attrs",
       isStatic: true,
       constType: 3,
-      // CAN_STRINGIFY
       loc: loc || {}
     },
     exp: {
@@ -185,13 +208,127 @@ function createVBindAttrsDirective(loc) {
       content: "$attrs",
       isStatic: false,
       constType: 0,
-      // NOT_CONSTANT
       loc: loc || {}
     },
     modifiers: [],
     loc: loc || {}
   };
 }
+function hasVShow(el) {
+  return el.props.some(
+    (p) => p.type === NodeTypes.DIRECTIVE && p.name === "show"
+  );
+}
+function hasEventListeners(el) {
+  return el.props.some(
+    (p) => p.type === NodeTypes.DIRECTIVE && p.name === "on"
+  );
+}
+function getEventNames(el) {
+  const names = [];
+  for (const p of el.props) {
+    if (p.type === NodeTypes.DIRECTIVE && p.name === "on" && p.arg) {
+      const arg = p.arg;
+      if (arg.content) names.push(arg.content);
+    }
+  }
+  return names.sort().join("_").slice(0, 40) || "unknown";
+}
+function injectTestId(el, attrName, testId, applyPrefix, debug) {
+  const finalTestId = applyPrefix(testId);
+  el.props.push(createStaticAttr(attrName, finalTestId, el.loc));
+  if (debug) {
+    console.log("[testid] INJECT", el.tag, "\u2192", finalTestId);
+  }
+}
+function buildVForTestIdExpression(tag, indexChain, testIdPrefix, extra) {
+  let expr = "";
+  if (testIdPrefix) {
+    expr = "'" + testIdPrefix + "' + ";
+  }
+  expr += "'" + tag + "_in_for-'";
+  for (let k = 0; k < indexChain.length; k++) {
+    if (k > 0) {
+      expr += " + '_'";
+    }
+    expr += " + " + indexChain[k];
+  }
+  if (extra) {
+    expr += " + '" + extra + "'";
+  }
+  return expr;
+}
+function injectDynamicForTestId(el, attrName, tag, indexChain, testIdPrefix, extra, debug) {
+  const expression = buildVForTestIdExpression(tag, indexChain, testIdPrefix, extra);
+  el.props.push({
+    type: NodeTypes.DIRECTIVE,
+    name: "bind",
+    arg: {
+      type: NodeTypes.SIMPLE_EXPRESSION,
+      content: attrName,
+      isStatic: true,
+      constType: 3,
+      loc: el.loc
+    },
+    exp: {
+      type: NodeTypes.SIMPLE_EXPRESSION,
+      content: expression,
+      isStatic: false,
+      constType: 0,
+      loc: el.loc
+    },
+    modifiers: [],
+    loc: el.loc
+  });
+  if (debug) {
+    console.log("[testid] VFOR-DYN", tag, "\u2192", attrName, "=", expression);
+  }
+}
+function findConditionalAncestor(parentMap, branchStateMap, condStateMap, el) {
+  let current = parentMap.get(el);
+  while (current) {
+    if (current.type === NodeTypes.IF_BRANCH) {
+      const state = branchStateMap.get(current);
+      if (state) return state;
+    }
+    if (current.type === NodeTypes.ELEMENT) {
+      const state = condStateMap.get(current);
+      if (state) return state;
+    }
+    current = parentMap.get(current);
+  }
+  return null;
+}
+function getVForIndexChain(parentMap, el) {
+  const chain = [];
+  let current = parentMap.get(el);
+  while (current) {
+    if (current.type === NodeTypes.FOR) {
+      const forNode = current;
+      const idxNode = forNode.objectIndexAlias;
+      if (idxNode && idxNode.type === NodeTypes.SIMPLE_EXPRESSION) {
+        const idxName = idxNode.content;
+        if (idxName) {
+          chain.push(idxName);
+        } else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    }
+    current = parentMap.get(current);
+  }
+  return chain.length > 0 ? chain.reverse() : null;
+}
+function isInsideVFor(parentMap, el) {
+  let current = parentMap.get(el);
+  while (current) {
+    if (current.type === NodeTypes.FOR) return true;
+    current = parentMap.get(current);
+  }
+  return false;
+}
 function createMultiRootFixTransform(opts = {}) {
   const { antPrefix = "a-" } = opts;
   return (node, _context) => {
@@ -218,40 +355,178 @@ function createTestIdInjectTransform(opts = {}) {
   const {
     attributeName = "data-testid",
     antPrefix = "a-",
-    customPrefixes = []
+    customPrefixes = [],
+    testIdPrefix = "",
+    injectForLoops = true,
+    injectEventElements = true,
+    debug = false
   } = opts;
-  const templateCounters = /* @__PURE__ */ new WeakMap();
+  function applyPrefix(id) {
+    return testIdPrefix ? testIdPrefix + id : id;
+  }
+  const parentMap = /* @__PURE__ */ new WeakMap();
+  const branchStateMap = /* @__PURE__ */ new WeakMap();
+  const condStateMap = /* @__PURE__ */ new WeakMap();
   return (node, context) => {
-    if (node.type === NodeTypes.ROOT) {
-      templateCounters.set(node, /* @__PURE__ */ new Map());
+    const children = node.children;
+    if (children) {
+      for (const child of children) {
+        if (typeof child === "object" && child !== null) {
+          parentMap.set(child, node);
+        }
+      }
+    }
+    if (node.type === NodeTypes.IF) {
+      const ifNode = node;
+      for (const branch of ifNode.branches) {
+        parentMap.set(branch, node);
+        if (branch.children) {
+          for (const child of branch.children) {
+            if (typeof child === "object" && child !== null) {
+              parentMap.set(child, branch);
+            }
+          }
+        }
+      }
+    }
+    if (node.type === NodeTypes.IF) {
+      const ifNode = node;
+      let hasTarget = false;
+      let firstTag = "";
+      for (const branch of ifNode.branches) {
+        for (const child of branch.children) {
+          if (child.type === NodeTypes.ELEMENT) {
+            const el2 = child;
+            if (isTargetComponent(el2, antPrefix, customPrefixes) && !hasExistingTestId(el2, attributeName)) {
+              hasTarget = true;
+              firstTag = el2.tag;
+              break;
+            }
+          }
+        }
+        if (hasTarget) break;
+      }
+      if (hasTarget) {
+        const testId = generateUniqueId(firstTag);
+        const state = {
+          counter: {},
+          usedIds: {},
+          testId
+        };
+        for (const branch of ifNode.branches) {
+          branchStateMap.set(branch, state);
+        }
+        if (debug) {
+          console.log("[testid] IF-BLOCK", firstTag, "\u2192", testId, "(branches:", ifNode.branches.length, ")");
+        }
+      }
       return;
     }
     if (node.type !== NodeTypes.ELEMENT) return;
     const el = node;
     if (!isTargetComponent(el, antPrefix, customPrefixes)) return;
     if (hasExistingTestId(el, attributeName)) return;
-    const counters = templateCounters.get(context.root);
-    const tagName = el.tag;
-    const index = counters.get(tagName) ?? 0;
-    counters.set(tagName, index + 1);
-    const testId = `${tagName}-${index}`;
-    el.props.push(createStaticAttr(attributeName, testId, el.loc));
+    if (hasVShow(el)) {
+      const testId = generateUniqueId(el.tag);
+      injectTestId(el, attributeName, testId, applyPrefix, debug);
+      condStateMap.set(el, {
+        counter: {},
+        usedIds: {},
+        testId
+      });
+      if (debug) {
+        console.log("[testid] V-SHOW", el.tag, "\u2192", testId);
+      }
+      return;
+    }
+    if (injectForLoops) {
+      const indexChain = getVForIndexChain(parentMap, el);
+      if (indexChain && indexChain.length > 0) {
+        if (injectEventElements && hasEventListeners(el)) {
+          const eventNames = getEventNames(el);
+          injectDynamicForTestId(el, attributeName, el.tag, indexChain, testIdPrefix, "-event-" + eventNames, debug);
+        } else {
+          injectDynamicForTestId(el, attributeName, el.tag, indexChain, testIdPrefix, "", debug);
+        }
+        return;
+      }
+    }
+    const insideFor = injectForLoops && isInsideVFor(parentMap, el);
+    const condState = findConditionalAncestor(parentMap, branchStateMap, condStateMap, el);
+    if (injectEventElements && hasEventListeners(el)) {
+      const eventNames = getEventNames(el);
+      const scope = insideFor ? "-in_for" : "";
+      if (condState) {
+        const condEventId = generateSubUniqueId(
+          condState.testId + "__" + el.tag + "-event-" + eventNames + scope,
+          condState
+        );
+        injectTestId(el, attributeName, condEventId, applyPrefix, debug);
+        if (debug) console.log("[testid] SUB   ", el.tag, "\u2192", condEventId, "(parent:", condState.testId, ")");
+      } else {
+        const globalEventId = generateUniqueId(el.tag + "-event-" + eventNames + scope);
+        injectTestId(el, attributeName, globalEventId, applyPrefix, debug);
+        if (debug) console.log("[testid] GLOBAL", el.tag, "\u2192", globalEventId);
+      }
+      return;
+    }
+    const forScope = insideFor ? "-in_for" : "";
+    if (condState) {
+      const condNormalId = generateSubUniqueId(
+        condState.testId + "__" + el.tag + forScope,
+        condState
+      );
+      injectTestId(el, attributeName, condNormalId, applyPrefix, debug);
+      if (debug) console.log("[testid] SUB   ", el.tag, "\u2192", condNormalId, "(parent:", condState.testId, ")");
+    } else {
+      const globalNormalId = generateUniqueId(el.tag + forScope);
+      injectTestId(el, attributeName, globalNormalId, applyPrefix, debug);
+      if (debug) console.log("[testid] GLOBAL", el.tag, "\u2192", globalNormalId);
+    }
   };
 }
 function createTestIdTransforms(opts = {}) {
   return [
-    // multiRootFix 必须先注册，因为它的 binding 应出现在
-    // testId inject 之前（编译顺序无关，但逻辑上先修复再注入更清晰）
     createMultiRootFixTransform(opts),
     createTestIdInjectTransform(opts)
   ];
 }
 
+// src/plugin.ts
+import { getCurrentInstance } from "vue";
+function createTestIdBridge(opts = {}) {
+  const attrName = opts.attributeName ?? "data-testid";
+  return {
+    install(app) {
+      app.mixin({
+        mounted() {
+          const instance = getCurrentInstance();
+          if (!instance) return;
+          const testId = instance.vnode.props?.[attrName];
+          if (!testId) return;
+          const el = instance.vnode.el;
+          if (el instanceof HTMLElement && !el.hasAttribute(attrName)) {
+            el.setAttribute(attrName, testId);
+            if (typeof window !== "undefined" && window.__TESTID_DEBUG) {
+              console.debug("[testid-bridge] compile testid \u2192 DOM:", testId, el.tagName, el.className);
+            }
+          }
+        }
+      });
+    }
+  };
+}
+
 // src/index.ts
 var testIdTransforms = createTestIdTransforms;
-function vueTestIdPlugin(_opts) {
+function vueTestIdPlugin(opts) {
   return {
-    name: "vite-plugin-vue-testid"
+    name: "vite-plugin-vue-testid",
+    config() {
+      if (opts?.debug) {
+        console.log("[vite-plugin-vue-testid] plugin initialized with opts:", opts);
+      }
+    }
   };
 }
 function createVueTestIdTransform() {
@@ -265,6 +540,7 @@ function createVueTestIdTransform() {
 }
 export {
   createMultiRootFixTransform,
+  createTestIdBridge,
   createTestIdInjectTransform,
   createTestIdTransforms,
   createVueTestIdTransform,

package/dist/plugin.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Vue 插件：读取编译器注入的 data-testid 属性，手动写入组件的根 DOM 元素。
+ *
+ * 为什么需要：
+ *   编译器在模板中为每个 (antd + 自定义) 组件生成稳定的 {tagName}-{index} testid，
+ *   但这些 testid 通过 $attrs 传递。部分 ant-design-vue 组件（Modal、Menu 等）
+ *   使用了 inheritAttrs: false，或将其 DOM 根通过 teleport 渲染到 body 下，
+ *   导致 testid 无法自动到达目标 DOM。
+ *
+ *   本插件在组件 mounted 时读取 $attrs['data-testid']，手动写入 $el，
+ *   绕过 inheritAttrs 限制，确保编译期生成的稳定 testid 最终出现在 DOM 上。
+ *
+ * 使用方式：
+ * ```ts
+ * // main.ts
+ * import { createTestIdBridge } from 'vite-plugin-vue-testid/plugin'
+ *
+ * createApp(App).mount('#app')
+ * app.use(createTestIdBridge())
+ * app.use(createTestIdBridge({ attributeName: 'data-testid' }))
+ * ```
+ */
+import { type App } from 'vue';
+export interface TestIdBridgeOptions {
+    /**
+     * testId 属性名
+     * @default 'data-testid'
+     */
+    attributeName?: string;
+}
+export declare function createTestIdBridge(opts?: TestIdBridgeOptions): {
+    install(app: App): void;
+};
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAsB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAElD,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,mBAAwB;iBAIhD,GAAG;EAyBnB"}

package/dist/plugin.js

@@ -0,0 +1,27 @@
+// src/plugin.ts
+import { getCurrentInstance } from "vue";
+function createTestIdBridge(opts = {}) {
+  const attrName = opts.attributeName ?? "data-testid";
+  return {
+    install(app) {
+      app.mixin({
+        mounted() {
+          const instance = getCurrentInstance();
+          if (!instance) return;
+          const testId = instance.vnode.props?.[attrName];
+          if (!testId) return;
+          const el = instance.vnode.el;
+          if (el instanceof HTMLElement && !el.hasAttribute(attrName)) {
+            el.setAttribute(attrName, testId);
+            if (typeof window !== "undefined" && window.__TESTID_DEBUG) {
+              console.debug("[testid-bridge] compile testid \u2192 DOM:", testId, el.tagName, el.className);
+            }
+          }
+        }
+      });
+    }
+  };
+}
+export {
+  createTestIdBridge
+};

package/dist/runtime.d.ts

@@ -61,11 +61,14 @@ export type PanelInjectStrategy = (ctx: PanelContext) => void;
  * 启动全运行时 testid 注入。
  *
  * 覆盖范围：
- * - 所有 ant-design-vue 组件根元素（input / select / button / picker / ...）
- * - teleport 弹出层面板（日期选择器 / 级联选择器 / 下拉选择器）
+ * - 所有 ant-design-vue 组件根元素（input / select / button / picker / auto-complete / mentions / transfer ...）
+ * - teleport 弹出层面板（日期选择器 / 级联选择器 / 下拉选择器 / 提及）
  * - Menu 子元素（inheritAttrs:false 兜底）
  * - InputNumber 内部输入框及增减按钮
  * - Slider handle、Rate 星星、Upload 内部 file input
+ * - AutoComplete 搜索输入框及清除按钮
+ * - Mentions textarea 及下拉面板选项
+ * - Transfer 左右面板 / 列表项 / 复选框 / 移除按钮 / 操作区
  *
  * @returns 清理函数，调用后停止监听
  *

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAEnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,GAAG,SAAS,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,kBAAkB;IAClB,SAAS,EAAE,WAAW,CAAA;IACtB,iBAAiB;IACjB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,oBAAoB;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;AAosB7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,cAAmB,GAAG,MAAM,IAAI,CAgFrE;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,wBAAkB,CAAA;AAMtD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,cAAmB,GAAG,IAAI,CAmCtE"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAEnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,GAAG,SAAS,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,kBAAkB;IAClB,SAAS,EAAE,WAAW,CAAA;IACtB,iBAAiB;IACjB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,oBAAoB;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;AAs+B7D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,cAAmB,GAAG,MAAM,IAAI,CA6FrE;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,wBAAkB,CAAA;AAMtD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,cAAmB,GAAG,IAAI,CA+CtE"}

package/dist/runtime.js

@@ -8,10 +8,14 @@ function buildComponentMatchers(pc) {
     { selector: sel(pc, "input-affix-wrapper"), prefix: "a-input" },
     { selector: sel(pc, "input-textarea"), prefix: "a-textarea" },
     { selector: sel(pc, "input-number"), prefix: "a-input-number" },
+    // ── AutoComplete（必须在 select 之前，因为同时也有 .ant-select 类）──
+    { selector: sel(pc, "select-auto-complete"), prefix: "a-auto-complete", withId: true },
     // ── 选择器 ──
     { selector: sel(pc, "select"), prefix: "a-select", withId: true },
     { selector: sel(pc, "cascader"), prefix: "a-cascader", withId: true },
     { selector: sel(pc, "tree-select"), prefix: "a-tree-select" },
+    // ── Mentions ──
+    { selector: sel(pc, "mentions"), prefix: "a-mentions", withId: true },
     // ── 日期/时间 ──
     { selector: sel(pc, "picker"), prefix: "a-date-picker", withId: true },
     // ── 表单组件 ──
@@ -32,6 +36,9 @@ function buildComponentMatchers(pc) {
     { selector: sel(pc, "menu"), prefix: "a-menu" },
     // ── 标签页 ──
     { selector: sel(pc, "tabs"), prefix: "a-tabs" },
+    { selector: sel(pc, "pagination"), prefix: "a-pagination" },
+    // ── Transfer ──
+    { selector: sel(pc, "transfer"), prefix: "a-transfer" },
     // ── 纯 input / textarea（必须排在最后）──
     { selector: `input.${cls(pc, "input")}`, prefix: "a-input" },
     { selector: `textarea.${cls(pc, "input")}`, prefix: "a-textarea" }
@@ -64,6 +71,9 @@ function injectComponentRoots(root, matchers, attrName, counter, skipSelectors)
       if (isInnerInput(el, skipSelectors)) continue;
       const testId = `${prefix}-${counter.value++}`;
       el.setAttribute(attrName, testId);
+      if (typeof window !== "undefined" && window.__TESTID_DEBUG) {
+        console.debug("[testid-runtime] counter inject:", testId, el);
+      }
       if (withId && !el.hasAttribute("id")) {
         el.setAttribute("id", testId);
       }
@@ -272,11 +282,42 @@ function makeInjectSelectPanel(pc) {
     }
   };
 }
+function makeInjectMentionsPanel(pc) {
+  return (ctx) => {
+    const { container, triggerTestId, attrName } = ctx;
+    const prefix = `${triggerTestId}-dropdown`;
+    container.setAttribute(attrName, prefix);
+    const injectAllItems = () => {
+      const items = container.querySelectorAll(sel(pc, "mentions-dropdown-menu-item"));
+      items.forEach((item) => {
+        const el = item;
+        if (hasAttrCompat(el, attrName)) return;
+        const text = el.textContent?.trim() || "";
+        if (text) {
+          el.setAttribute(attrName, `${prefix}-option-${text}`);
+        }
+      });
+    };
+    injectAllItems();
+    if (!_observedContainers.has(container)) {
+      _observedContainers.add(container);
+      let timer = null;
+      const observer = new MutationObserver(() => {
+        if (timer !== null) clearTimeout(timer);
+        timer = setTimeout(() => {
+          injectAllItems();
+        }, 50);
+      });
+      observer.observe(container, { childList: true, subtree: true });
+    }
+  };
+}
 function buildPanels(pc) {
   return {
     [sel(pc, "picker-dropdown")]: makeInjectPickerPanel(pc),
     [sel(pc, "cascader-dropdown")]: makeInjectCascaderPanel(pc),
-    [sel(pc, "select-dropdown")]: makeInjectSelectPanel(pc)
+    [sel(pc, "select-dropdown")]: makeInjectSelectPanel(pc),
+    [sel(pc, "mentions-dropdown")]: makeInjectMentionsPanel(pc)
   };
 }
 function injectMenuItems(attrName, root = document, pc) {
@@ -348,6 +389,14 @@ function findActiveTrigger(attrName, pc) {
     const found = resolveTriggerInContainer(cascader, attrName);
     if (found) return found;
   }
+  const mentionsDropdown = document.querySelector(sel(pc, "mentions-dropdown"));
+  if (mentionsDropdown) {
+    const mentionsRoot = document.querySelector(sel(pc, "mentions"));
+    if (mentionsRoot) {
+      const found = resolveTriggerInContainer(mentionsRoot, attrName);
+      if (found) return found;
+    }
+  }
   const expanded = document.querySelector(
     `[id][aria-expanded="true"], [data-testid][aria-expanded="true"], [data-testId][aria-expanded="true"]`
   );
@@ -480,6 +529,150 @@ function injectTabsSubElements(root, attrName, pc) {
     }
   }
 }
+function injectPaginationSubElements(root, attrName, pc) {
+  const paginations = root.matches(`${sel(pc, "pagination")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "pagination")}[${attrName}]`));
+  for (const pagination of paginations) {
+    if (!(pagination instanceof HTMLElement)) continue;
+    const testId = getAttrCompat(pagination, attrName) || "";
+    if (!testId) continue;
+    const prevEl = pagination.querySelector(sel(pc, "pagination-prev"));
+    if (prevEl && !hasAttrCompat(prevEl, attrName)) {
+      prevEl.setAttribute(attrName, `${testId}-prev`);
+    }
+    const nextEl = pagination.querySelector(sel(pc, "pagination-next"));
+    if (nextEl && !hasAttrCompat(nextEl, attrName)) {
+      nextEl.setAttribute(attrName, `${testId}-next`);
+    }
+    pagination.querySelectorAll(sel(pc, "pagination-item")).forEach((item) => {
+      const el = item;
+      if (hasAttrCompat(el, attrName)) return;
+      const pageNum = el.textContent?.trim() || "";
+      if (pageNum) {
+        el.setAttribute(attrName, `${testId}-item-${pageNum}`);
+      }
+    });
+    const jumpPrev = pagination.querySelector(sel(pc, "pagination-jump-prev"));
+    if (jumpPrev && !hasAttrCompat(jumpPrev, attrName)) {
+      jumpPrev.setAttribute(attrName, `${testId}-jump-prev`);
+    }
+    const jumpNext = pagination.querySelector(sel(pc, "pagination-jump-next"));
+    if (jumpNext && !hasAttrCompat(jumpNext, attrName)) {
+      jumpNext.setAttribute(attrName, `${testId}-jump-next`);
+    }
+    const sizeChanger = pagination.querySelector(sel(pc, "pagination-options-size-changer"));
+    if (sizeChanger && !hasAttrCompat(sizeChanger, attrName)) {
+      sizeChanger.setAttribute(attrName, `${testId}-size-changer`);
+    }
+    const quickJumper = pagination.querySelector(sel(pc, "pagination-options-quick-jumper"));
+    if (quickJumper) {
+      const tryQuickJumperInput = () => {
+        const input = quickJumper.querySelector("input");
+        if (input && !hasAttrCompat(input, attrName)) {
+          input.setAttribute(attrName, `${testId}-quick-jumper`);
+          return true;
+        }
+        return false;
+      };
+      if (!tryQuickJumperInput()) {
+        const subObs = new MutationObserver(() => {
+          if (tryQuickJumperInput()) subObs.disconnect();
+        });
+        subObs.observe(quickJumper, { childList: true, subtree: true });
+      }
+    }
+    const totalText = pagination.querySelector(sel(pc, "pagination-total-text"));
+    if (totalText && !hasAttrCompat(totalText, attrName)) {
+      totalText.setAttribute(attrName, `${testId}-total`);
+    }
+  }
+}
+function injectAutoCompleteSubElements(root, attrName, pc) {
+  const wrappers = root.matches(`${sel(pc, "select-auto-complete")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "select-auto-complete")}[${attrName}]`));
+  for (const wrapper of wrappers) {
+    if (!(wrapper instanceof HTMLElement)) continue;
+    const testId = getAttrCompat(wrapper, attrName) || "";
+    if (!testId) continue;
+    const searchInput = wrapper.querySelector(
+      `${sel(pc, "select-selection-search")} input`
+    );
+    if (searchInput && !hasAttrCompat(searchInput, attrName)) {
+      searchInput.setAttribute(attrName, `${testId}-input`);
+    }
+    const clearBtn = wrapper.querySelector(sel(pc, "select-clear"));
+    if (clearBtn && !hasAttrCompat(clearBtn, attrName)) {
+      clearBtn.setAttribute(attrName, `${testId}-clear`);
+    }
+  }
+}
+function injectMentionsSubElements(root, attrName, pc) {
+  const mentions = root.matches(`${sel(pc, "mentions")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "mentions")}[${attrName}]`));
+  for (const wrapper of mentions) {
+    if (!(wrapper instanceof HTMLElement)) continue;
+    const testId = getAttrCompat(wrapper, attrName) || "";
+    if (!testId) continue;
+    const textarea = wrapper.querySelector(":scope > textarea");
+    if (textarea && !hasAttrCompat(textarea, attrName)) {
+      textarea.setAttribute(attrName, `${testId}-input`);
+    }
+  }
+}
+function injectTransferSubElements(root, attrName, pc) {
+  const transfers = root.matches(`${sel(pc, "transfer")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "transfer")}[${attrName}]`));
+  for (const transfer of transfers) {
+    if (!(transfer instanceof HTMLElement)) continue;
+    const testId = getAttrCompat(transfer, attrName) || "";
+    if (!testId) continue;
+    const lists = transfer.querySelectorAll(`:scope > ${sel(pc, "transfer-list")}`);
+    const directions = ["left", "right"];
+    for (let i = 0; i < Math.min(lists.length, 2); i++) {
+      const list = lists[i];
+      const dir = directions[i];
+      const listTestId = `${testId}-list-${dir}`;
+      if (!hasAttrCompat(list, attrName)) {
+        list.setAttribute(attrName, listTestId);
+      }
+      const headerCheckbox = list.querySelector(
+        `${sel(pc, "transfer-list-header")} ${sel(pc, "transfer-list-checkbox")}`
+      );
+      if (headerCheckbox && !hasAttrCompat(headerCheckbox, attrName)) {
+        headerCheckbox.setAttribute(attrName, `${listTestId}-check-all`);
+      }
+      const searchInput = list.querySelector(
+        `${sel(pc, "transfer-list-body-search-wrapper")} input`
+      );
+      if (searchInput && !hasAttrCompat(searchInput, attrName)) {
+        searchInput.setAttribute(attrName, `${listTestId}-search`);
+      }
+      const items = list.querySelectorAll(sel(pc, "transfer-list-content-item"));
+      items.forEach((item) => {
+        const el = item;
+        if (hasAttrCompat(el, attrName)) return;
+        const text = (el.querySelector(sel(pc, "transfer-list-content-item-text"))?.textContent || el.textContent || "").trim().replace(/\s+/g, "-");
+        if (text) {
+          el.setAttribute(attrName, `${listTestId}-item-${text}`);
+        }
+        const checkbox = el.querySelector(
+          sel(pc, "transfer-list-checkbox")
+        );
+        if (checkbox && !hasAttrCompat(checkbox, attrName) && text) {
+          checkbox.setAttribute(attrName, `${listTestId}-item-check-${text}`);
+        }
+        const removeBtn = el.querySelector(
+          sel(pc, "transfer-list-content-item-remove")
+        );
+        if (removeBtn && !hasAttrCompat(removeBtn, attrName) && text) {
+          removeBtn.setAttribute(attrName, `${listTestId}-item-remove-${text}`);
+        }
+      });
+    }
+    const operation = transfer.querySelector(
+      `:scope > ${sel(pc, "transfer-operation")}`
+    );
+    if (operation && !hasAttrCompat(operation, attrName)) {
+      operation.setAttribute(attrName, `${testId}-operation`);
+    }
+  }
+}
 function setupAntTestIds(opts = {}) {
   const attrName = opts.attributeName ?? "data-testid";
   const pc = opts.prefixCls ?? "ant";
@@ -507,6 +700,10 @@ function setupAntTestIds(opts = {}) {
     }
     injectSubElements(node, attrName, pc);
     injectTabsSubElements(node, attrName, pc);
+    injectPaginationSubElements(node, attrName, pc);
+    injectAutoCompleteSubElements(node, attrName, pc);
+    injectMentionsSubElements(node, attrName, pc);
+    injectTransferSubElements(node, attrName, pc);
   }
   let pending = false;
   let pendingNodes = [];
@@ -529,8 +726,8 @@ function setupAntTestIds(opts = {}) {
       requestAnimationFrame(flushPending);
     }
   });
-  observer.observe(document.body, { childList: true, subtree: true });
   processNode(document.body);
+  observer.observe(document.body, { childList: true, subtree: true });
   return () => {
     observer.disconnect();
     pendingNodes = [];
@@ -558,7 +755,11 @@ function injectCurrentDropdowns(opts = {}) {
   }
   injectSubElements(document.body, attrName, pc);
   injectTabsSubElements(document.body, attrName, pc);
+  injectPaginationSubElements(document.body, attrName, pc);
   injectMenuItems(attrName, document, pc);
+  injectAutoCompleteSubElements(document.body, attrName, pc);
+  injectMentionsSubElements(document.body, attrName, pc);
+  injectTransferSubElements(document.body, attrName, pc);
 }
 function mergeMatchers(defaults, customs) {
   if (!customs) return defaults;

package/dist/transform.d.ts

@@ -1,14 +1,18 @@
 /**
- * 编译期模板 transform。
+ * 编译期模板 transform — 三层计数器/注入架构。
+ *
+ * 仿照 vant-testid-webpack-plugin 的设计，为 Vue 3 编译器提供：
+ *
+ *   1. v-for + index 动态注入（最高优先级）— 利用 index 变量生成每轮迭代唯一 testid
+ *   2. 条件块子计数器 — v-if / v-else-if / v-else / v-show 拥有独立子计数器，
+ *      子元素以 `{parentTestId}__{tag}-{n}` 格式注入，不受外部元素影响
+ *   3. 全局计数器 — 非条件块元素使用跨模板全局计数器，保证 testid 唯一
  *
  * 两个独立的 NodeTransform：
- *   1. multiRootFixTransform  — 多根子组件上自动补 v-bind="$attrs"
- *      确保 data-testid 能穿透 Fragment 落到 antd 组件 DOM 上。
- *   2. testIdInjectTransform  — 在父模板中为每个组件使用点注入唯一的
- *      data-testid="{tagName}-{index}"，保证同一页面中同类型组件的
- *      testid 全局唯一且稳定。
+ *   - multiRootFixTransform  — 多根组件自动补 v-bind="$attrs"
+ *   - testIdInjectTransform  — testid 注入
  *
- * 两个 transform 均通过 compileTime: true 下的 createTestIdTransforms() 一键获得。
+ * 通过 createTestIdTransforms() 一键获得。
  */
 import type { NodeTransform } from '@vue/compiler-core';
 export interface TransformOptions {
@@ -18,29 +22,57 @@ export interface TransformOptions {
     antPrefix?: string;
     /** 额外需要注入 testid 的自定义组件前缀 */
     customPrefixes?: string[];
+    /**
+     * 所有编译期注入的 testid 前添加的公共前缀。
+     * 例如设置为 `"static-"`，则 `a-button-0` 变为 `static-a-button-0`。
+     * @default ''
+     */
+    testIdPrefix?: string;
+    /**
+     * 是否为 v-for 元素使用特殊格式 `{tag}-in_for-{n}`
+     * @default true
+     */
+    injectForLoops?: boolean;
+    /**
+     * 是否为绑定了事件监听（@click 等）的元素使用特殊格式
+     * `{tag}-event-{eventNames}-{n}`
+     * @default true
+     */
+    injectEventElements?: boolean;
+    /**
+     * 启用调试日志（编译时在终端输出每个注入的 testid）
+     * @default false
+     */
+    debug?: boolean;
 }
 /**
  * 转换多根子组件的模板，自动给第一个 antd 组件根元素加 v-bind="$attrs"。
- *
- * 为什么需要：多根组件（Fragment）的 inheritAttrs 不生效，父模板编译期
- * 注入的 data-testid 属性会被丢弃。本 transform 确保至少一个 antd 组件根
- * 能收到透传属性。
- *
- * 安全策略：
- *   - 先检查用户是否已手动写了任一 v-bind="$attrs"，有则不动
- *   - 只在模板是多根且至少有一个 antd 组件时才注入
  */
 export declare function createMultiRootFixTransform(opts?: TransformOptions): NodeTransform;
 /**
  * 在模板编译期为所有（antd + 自定义）组件注入唯一的 data-testid。
  *
- * 格式：`{tagName}-{perTemplateIndex}`
- * 例：`myinput-0`, `myinput-1`, `a-select-0`, `a-button-2`
+ * 三层计数器/注入架构：
+ *
+ * **v-for 动态注入**（最高优先级）— v-for 有显式 index 变量时，生成运行时
+ *   动态表达式（如 `'a-button_in_for-'+i+'_'+j`），每轮迭代自动产生唯一 testid。
+ *
+ * **条件块子计数器** — v-if / v-else-if / v-else / v-show 元素创建独立子计数器，
+ *   其子元素以 `{parentTestId}__{tag}-{n}` 格式注入。
+ *
+ * **全局计数器** — 非条件块元素使用跨模板全局计数器，格式为 `{tag}-{n}`。
  *
- * key 设计：
- *   - tagName 保持原始大小写，确保一眼认出组件来源
- *   - index 是严格按模板 AST 中的出现顺序递增的，不同模板各自重置
- *   - 如果用户已经手动写了 data-testid，则跳过（不覆盖）
+ * 格式一览：
+ *
+ * | 元素类型                    | 格式                                                |
+ * |-----------------------------|----------------------------------------------------|
+ * | v-if/v-show 条件块的子元素   | `{parentTestId}__{tag}-event-{names}-{n}` 或 `{parentTestId}__{tag}-{n}` |
+ * | v-for + index（动态）        | `{tag}_in_for-{i0}[_{i1}]-event-{names}` 或 `{tag}_in_for-{i0}[_{i1}]` |
+ * | 顶层事件监听元素             | `{tag}-event-{names}-{n}`                          |
+ * | v-for 内部元素（无 index）   | `{tag}-in_for-{n}`                                 |
+ * | 普通组件                     | `{tag}-{n}`                                        |
+ *
+ * 所有 testid 前后缀均可通过 `testIdPrefix` 选项配置。
  */
 export declare function createTestIdInjectTransform(opts?: TransformOptions): NodeTransform;
 /**
@@ -64,6 +96,17 @@ export declare function createTestIdInjectTransform(opts?: TransformOptions): No
  *   ]
  * })
  * ```
+ *
+ * 配置选项：
+ * ```ts
+ * testIdTransforms({
+ *   antPrefix: 'a-',           // antd 组件前缀
+ *   testIdPrefix: 'static-',   // testid 公共前缀
+ *   injectForLoops: true,      // v-for 标记
+ *   injectEventElements: true, // 事件监听元素标记
+ *   debug: false,              // 调试日志
+ * })
+ * ```
  */
 export declare function createTestIdTransforms(opts?: TransformOptions): NodeTransform[];
 //# sourceMappingURL=transform.d.ts.map

package/dist/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EACV,aAAa,EAMd,MAAM,oBAAoB,CAAA;AAgD3B,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;CAC1B;AAyFD;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,GAAE,gBAAqB,GAAG,aAAa,CA8BtF;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,GAAE,gBAAqB,GAAG,aAAa,CAqCtF;AAID;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,gBAAqB,GAAG,aAAa,EAAE,CAOnF"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EACV,aAAa,EAWd,MAAM,oBAAoB,CAAA;AAgD3B,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IAEzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAuVD;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,GAAE,gBAAqB,GAAG,aAAa,CA6BtF;AAID;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,GAAE,gBAAqB,GAAG,aAAa,CAmMtF;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,gBAAqB,GAAG,aAAa,EAAE,CAKnF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-testid",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Vite plugin to auto-inject data-testid into Vue component templates for E2E testing",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,6 +14,10 @@
     "./runtime": {
       "import": "./dist/runtime.js",
       "types": "./dist/runtime.d.ts"
+    },
+    "./plugin": {
+      "import": "./dist/plugin.js",
+      "types": "./dist/plugin.d.ts"
     }
   },
   "files": [
@@ -49,4 +53,4 @@
     "typescript": "~6.0.2",
     "vite": "^8.0.12"
   }
-}
+}