vite-plugin-vue-testid 1.0.12 → 1.1.1

package/dist/index.d.ts

@@ -1,23 +1,76 @@
 /**
  * vite-plugin-vue-testid
  *
- * 为 ant-design-vue 组件的 DOM 元素自动注入 data-testid 属性，
- * 全运行时实现，无需编译期模版转换。
+ * 为 Vue (ant-design-vue) 组件的 DOM 元素自动注入 data-testid 属性。
+ *
+ * 默认提供全运行时方案，可选启用编译期 transform 以获得稳定的、页面内唯一的 testid。
+ *
+ * === 使用方式 A：纯运行时 ===
  *
- * @example
  * ```ts
- * // vite.config.ts — 无需特殊配置
+ * // vite.config.ts
  * import vue from '@vitejs/plugin-vue'
- * export default defineConfig({ plugins: [vue()] })
+ * import { vueTestIdPlugin } from 'vite-plugin-vue-testid'
+ * export default defineConfig({ plugins: [vue(), vueTestIdPlugin()] })
  *
- * // main.ts — 启动运行时注入
+ * // main.ts
  * import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
  * createApp(App).mount('#app')
  * setupAntTestIds()
  * ```
+ *
+ * === 使用方式 B：编译期 + 运行时（推荐，获得唯一稳定 testid） ===
+ *
+ * ```ts
+ * // vite.config.ts
+ * import vue from '@vitejs/plugin-vue'
+ * import { vueTestIdPlugin, testIdTransforms } from 'vite-plugin-vue-testid'
+ * export default defineConfig({
+ *   plugins: [
+ *     vue({
+ *       template: {
+ *         compilerOptions: {
+ *           nodeTransforms: testIdTransforms()
+ *         }
+ *       }
+ *     }),
+ *     vueTestIdPlugin(),
+ *   ]
+ * })
+ *
+ * // main.ts (与 A 相同)
+ * import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
+ * setupAntTestIds()
+ * ```
+ *
+ * === 使用方式 C：仅编译期（无运行时，面板不会注入 testid） ===
+ *
+ * ```ts
+ * // vite.config.ts
+ * import vue from '@vitejs/plugin-vue'
+ * import { vueTestIdPlugin, testIdTransforms } from 'vite-plugin-vue-testid'
+ * export default defineConfig({
+ *   plugins: [
+ *     vue({
+ *       template: {
+ *         compilerOptions: {
+ *           nodeTransforms: testIdTransforms()
+ *         }
+ *       }
+ *     }),
+ *     vueTestIdPlugin(),
+ *   ]
+ * })
+ * // main.ts 不需要调用 setupAntTestIds()
+ * ```
  */
 import type { Plugin } from 'vite';
 export type { RuntimeOptions, PanelContext, PanelInjectStrategy } from './runtime';
+export type { TransformOptions } from './transform';
+import { createTestIdTransforms } from './transform';
+/** 等同于 `createTestIdTransforms()`，更短的导出名 */
+export declare const testIdTransforms: typeof createTestIdTransforms;
+export { createTestIdTransforms, createTestIdInjectTransform, createMultiRootFixTransform, } from './transform';
 export interface VueTestIdPluginOptions {
     /**
      * testId 属性名
@@ -26,32 +79,22 @@ export interface VueTestIdPluginOptions {
     attributeName?: string;
 }
 /**
- * Vite 插件（可选）。
- * 当前仅作为占位，实际 testid 注入完全由运行时 `setupAntTestIds()` 完成。
+ * Vite 插件。
  *
- * 如果需要在构建时做额外配置，可通过此插件传入选项。
+ * 当前作为配置占位符存在；实际的 testid 注入由以下组件完成：
+ *   - 编译期：`testIdTransforms()` → 注册到 `vue()` 的 compilerOptions
+ *   - 运行时：`setupAntTestIds()`  → 在 main.ts 中调用
  */
 export declare function vueTestIdPlugin(_opts?: VueTestIdPluginOptions): Plugin;
 /**
- * @deprecated 此函数已废弃。testid 注入现在完全在运行时进行，
- * 不再需要编译期 AST transform。请从 vite.config.ts 中移除 `nodeTransforms` 配置，
- * 改为在 main.ts 中调用 `setupAntTestIds()`。
- *
- * @example 迁移方式
- * ```diff
- * // vite.config.ts
- * - import { createVueTestIdTransform } from 'vite-plugin-vue-testid'
- * - vue({ template: { compilerOptions: { nodeTransforms: [
- * -   createVueTestIdTransform()
- * - ]}}})
-
- * + import vue from '@vitejs/plugin-vue'
- * + vue()
+ * @deprecated 此函数已废弃。请使用新的编译期 API：
  *
- * // main.ts
- * + import { setupAntTestIds } from 'vite-plugin-vue-testid/runtime'
- * + setupAntTestIds()
+ * ```ts
+ * import { testIdTransforms } from 'vite-plugin-vue-testid'
+ * // 加入 vue() 的 compilerOptions.nodeTransforms
  * ```
+ *
+ * 或仅使用运行时 `setupAntTestIds()`。
  */
 export declare function createVueTestIdTransform(): () => void;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAIlF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAItE;AAID;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,IAAI,CASrD"}
+{"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"}

package/dist/index.js

@@ -1,4 +1,254 @@
+// src/transform.ts
+var NodeTypes = {
+  ROOT: 0,
+  ELEMENT: 1,
+  TEXT: 2,
+  COMMENT: 3,
+  SIMPLE_EXPRESSION: 4,
+  INTERPOLATION: 5,
+  ATTRIBUTE: 6,
+  DIRECTIVE: 7,
+  COMPOUND_EXPRESSION: 8,
+  IF: 9,
+  IF_BRANCH: 10,
+  FOR: 11,
+  TEXT_CALL: 12
+};
+var ElementTypes = {
+  ELEMENT: 0,
+  COMPONENT: 1,
+  SLOT: 2,
+  TEMPLATE: 3
+};
+var NATIVE_TAGS = /* @__PURE__ */ new Set([
+  "div",
+  "span",
+  "p",
+  "a",
+  "br",
+  "hr",
+  "img",
+  "input",
+  "button",
+  "select",
+  "option",
+  "textarea",
+  "label",
+  "form",
+  "table",
+  "tr",
+  "td",
+  "th",
+  "thead",
+  "tbody",
+  "tfoot",
+  "ul",
+  "ol",
+  "li",
+  "dl",
+  "dt",
+  "dd",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "section",
+  "article",
+  "header",
+  "footer",
+  "nav",
+  "aside",
+  "main",
+  "figure",
+  "figcaption",
+  "details",
+  "summary",
+  "code",
+  "pre",
+  "strong",
+  "em",
+  "i",
+  "b",
+  "u",
+  "s",
+  "small",
+  "sub",
+  "sup",
+  "blockquote",
+  "q",
+  "cite",
+  "abbr",
+  "time",
+  "address",
+  "fieldset",
+  "legend",
+  "progress",
+  "meter",
+  "iframe",
+  "svg",
+  "path",
+  "video",
+  "audio",
+  "canvas",
+  "template",
+  "slot",
+  "style",
+  "script",
+  "meta",
+  "link",
+  "title",
+  "head",
+  "html",
+  "body",
+  "noscript",
+  "map",
+  "area",
+  "base",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "del",
+  "dfn",
+  "dialog",
+  "embed",
+  "ins",
+  "kbd",
+  "mark",
+  "math",
+  "menu",
+  "object",
+  "output",
+  "param",
+  "picture",
+  "pre",
+  "rp",
+  "rt",
+  "ruby",
+  "samp",
+  "search",
+  "source",
+  "track",
+  "var",
+  "wbr"
+]);
+function isAntdComponent(tag, antPrefix) {
+  if (!tag.startsWith(antPrefix)) return false;
+  if (tag === antPrefix.slice(0, -1)) return false;
+  return true;
+}
+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 (tagType === ElementTypes.COMPONENT) return true;
+  if (customPrefixes.some((p) => tag.startsWith(p))) return true;
+  return false;
+}
+function hasExistingTestId(el, attrName) {
+  return el.props.some((p) => p.type === NodeTypes.ATTRIBUTE && p.name === attrName);
+}
+function hasExistingAttrsBinding(el) {
+  return el.props.some(
+    (p) => p.type === NodeTypes.DIRECTIVE && p.name === "bind" && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === "$attrs"
+  );
+}
+function createStaticAttr(name, value, loc) {
+  return {
+    type: NodeTypes.ATTRIBUTE,
+    name,
+    value: {
+      type: NodeTypes.TEXT,
+      content: value,
+      loc: loc || {}
+    },
+    loc: loc || {}
+  };
+}
+function createVBindAttrsDirective(loc) {
+  return {
+    type: NodeTypes.DIRECTIVE,
+    name: "bind",
+    arg: {
+      type: NodeTypes.SIMPLE_EXPRESSION,
+      content: "$attrs",
+      isStatic: true,
+      constType: 3,
+      // CAN_STRINGIFY
+      loc: loc || {}
+    },
+    exp: {
+      type: NodeTypes.SIMPLE_EXPRESSION,
+      content: "$attrs",
+      isStatic: false,
+      constType: 0,
+      // NOT_CONSTANT
+      loc: loc || {}
+    },
+    modifiers: [],
+    loc: loc || {}
+  };
+}
+function createMultiRootFixTransform(opts = {}) {
+  const { antPrefix = "a-" } = opts;
+  return (node, _context) => {
+    if (node.type !== NodeTypes.ROOT) return;
+    const root = node;
+    const elementChildren = root.children.filter(
+      (c) => c.type === NodeTypes.ELEMENT
+    );
+    if (elementChildren.length <= 1) return;
+    const hasManualBinding = elementChildren.some(
+      (el) => hasExistingAttrsBinding(el)
+    );
+    if (hasManualBinding) return;
+    for (const el of elementChildren) {
+      if (isAntdComponent(el.tag, antPrefix)) {
+        if (hasExistingAttrsBinding(el)) return;
+        el.props.push(createVBindAttrsDirective(el.loc));
+        return;
+      }
+    }
+  };
+}
+function createTestIdInjectTransform(opts = {}) {
+  const {
+    attributeName = "data-testid",
+    antPrefix = "a-",
+    customPrefixes = []
+  } = opts;
+  const templateCounters = /* @__PURE__ */ new WeakMap();
+  return (node, context) => {
+    if (node.type === NodeTypes.ROOT) {
+      templateCounters.set(node, /* @__PURE__ */ new Map());
+      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));
+  };
+}
+function createTestIdTransforms(opts = {}) {
+  return [
+    // multiRootFix 必须先注册，因为它的 binding 应出现在
+    // testId inject 之前（编译顺序无关，但逻辑上先修复再注入更清晰）
+    createMultiRootFixTransform(opts),
+    createTestIdInjectTransform(opts)
+  ];
+}
+
 // src/index.ts
+var testIdTransforms = createTestIdTransforms;
 function vueTestIdPlugin(_opts) {
   return {
     name: "vite-plugin-vue-testid"
@@ -7,13 +257,17 @@ function vueTestIdPlugin(_opts) {
 function createVueTestIdTransform() {
   if (typeof console !== "undefined") {
     console.warn(
-      "[vite-plugin-vue-testid] createVueTestIdTransform() is deprecated. Remove nodeTransforms from vite.config.ts and call setupAntTestIds() in main.ts instead. See https://github.com/... for migration guide."
+      "[vite-plugin-vue-testid] createVueTestIdTransform() is deprecated. Use testIdTransforms() in vue() compilerOptions for compile-time injection, or setupAntTestIds() in main.ts for runtime injection."
     );
   }
   return () => {
   };
 }
 export {
+  createMultiRootFixTransform,
+  createTestIdInjectTransform,
+  createTestIdTransforms,
   createVueTestIdTransform,
+  testIdTransforms,
   vueTestIdPlugin
 };

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;AAukB7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,cAAmB,GAAG,MAAM,IAAI,CAwFrE;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,wBAAkB,CAAA;AAMtD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,cAAmB,GAAG,IAAI,CAgCtE"}
+{"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;AAqpB7D;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/runtime.js

@@ -30,6 +30,8 @@ function buildComponentMatchers(pc) {
     { selector: sel(pc, "modal-wrap"), prefix: "a-modal", withId: true },
     // ── 菜单 ──
     { selector: sel(pc, "menu"), prefix: "a-menu" },
+    // ── 标签页 ──
+    { selector: sel(pc, "tabs"), prefix: "a-tabs" },
     // ── 纯 input / textarea（必须排在最后）──
     { selector: `input.${cls(pc, "input")}`, prefix: "a-input" },
     { selector: `textarea.${cls(pc, "input")}`, prefix: "a-textarea" }
@@ -58,7 +60,7 @@ function injectComponentRoots(root, matchers, attrName, counter, skipSelectors)
     const candidates = root.matches(selector) ? [root] : Array.from(root.querySelectorAll(selector));
     for (const el of candidates) {
       if (!(el instanceof HTMLElement)) continue;
-      if (el.hasAttribute(attrName)) continue;
+      if (hasAttrCompat(el, attrName)) continue;
       if (isInnerInput(el, skipSelectors)) continue;
       const testId = `${prefix}-${counter.value++}`;
       el.setAttribute(attrName, testId);
@@ -94,7 +96,7 @@ function injectHeaderViewButtons(panel, prefix, attrName, suffix, pc) {
   const buttons = headerView.querySelectorAll("button");
   buttons.forEach((btn) => {
     const el = btn;
-    if (el.hasAttribute(attrName)) return;
+    if (hasAttrCompat(el, attrName)) return;
     const text = el.textContent?.trim().toLowerCase() || "";
     let name;
     if (MONTH_NAMES.some((m) => text.startsWith(m))) {
@@ -116,7 +118,7 @@ function injectPanelCells(panel, prefix, attrName, suffix, pc) {
   const cells = panel.querySelectorAll(sel(pc, "picker-cell-inner"));
   cells.forEach((cell) => {
     const el = cell;
-    if (el.hasAttribute(attrName)) return;
+    if (hasAttrCompat(el, attrName)) return;
     const raw = (el.getAttribute("title") || el.textContent?.trim() || "").replace(/\s+/g, "-");
     switch (mode) {
       case "month":
@@ -138,7 +140,7 @@ function injectSinglePanel(panel, prefix, attrName, suffix, pc) {
   const mode = getPanelMode(panel, pc);
   const setAttr = (selector, name) => {
     const el = panel.querySelector(selector);
-    if (el && !el.hasAttribute(attrName)) {
+    if (el && !hasAttrCompat(el, attrName)) {
       el.setAttribute(attrName, `${prefix}-${name}${suffix}`);
     }
   };
@@ -168,26 +170,26 @@ function makeInjectPickerPanel(pc) {
       const presets = container.querySelectorAll(`${sel(pc, "picker-presets")} .${cls(pc, "tag")}`);
       presets.forEach((tag) => {
         const el = tag;
-        if (el.hasAttribute(attrName)) return;
+        if (hasAttrCompat(el, attrName)) return;
         const text = el.textContent?.trim() || "";
         el.setAttribute(attrName, `${prefix}-preset-${text}`);
       });
       const timeColumns = container.querySelectorAll(sel(pc, "picker-time-panel-column"));
       timeColumns.forEach((col, i) => {
         const el = col;
-        if (el.hasAttribute(attrName)) return;
+        if (hasAttrCompat(el, attrName)) return;
         el.setAttribute(attrName, `${prefix}-time-column-${i}`);
         const items = col.querySelectorAll("li");
         items.forEach((item) => {
           const li = item;
-          if (li.hasAttribute(attrName)) return;
+          if (hasAttrCompat(li, attrName)) return;
           const text = li.textContent?.trim() || "";
           li.setAttribute(attrName, `${prefix}-time-${i}-${text}`);
         });
       });
       const setFooterBtn = (selector, name) => {
         const btn = container.querySelector(selector);
-        if (btn && !btn.hasAttribute(attrName)) {
+        if (btn && !hasAttrCompat(btn, attrName)) {
           btn.setAttribute(attrName, `${prefix}-${name}`);
         }
       };
@@ -236,7 +238,7 @@ function makeInjectSelectPanel(pc) {
       const options = container.querySelectorAll(sel(pc, "select-item-option"));
       options.forEach((opt) => {
         const el = opt;
-        if (el.hasAttribute(attrName)) return;
+        if (hasAttrCompat(el, attrName)) return;
         const title = el.getAttribute("title") || el.textContent?.trim() || "";
         el.setAttribute(attrName, `${prefix}-option-${title}`);
       });
@@ -245,11 +247,11 @@ function makeInjectSelectPanel(pc) {
         const el = node;
         const content = el.querySelector(sel(pc, "select-tree-node-content-wrapper"));
         const title = content?.getAttribute("title") || content?.textContent?.trim() || "";
-        if (content && !content.hasAttribute(attrName)) {
+        if (content && !hasAttrCompat(content, attrName)) {
           content.setAttribute(attrName, `${prefix}-tree-${title}`);
         }
         const switcher = el.querySelector(sel(pc, "select-tree-switcher"));
-        if (switcher && !switcher.hasAttribute(attrName)) {
+        if (switcher && !hasAttrCompat(switcher, attrName)) {
           const isOpen = switcher.classList.contains(cls(pc, "select-tree-switcher_open"));
           const state = isOpen ? "collapse" : "expand";
           switcher.setAttribute(attrName, `${prefix}-tree-switcher-${state}-${title}`);
@@ -288,7 +290,7 @@ function injectMenuItems(attrName, root = document, pc) {
     const items = root instanceof HTMLElement && root.matches(rule.selector) ? [root, ...descendants] : descendants;
     for (const item of items) {
       const el = item;
-      if (el.hasAttribute(attrName)) return;
+      if (hasAttrCompat(el, attrName)) return;
       const id = el.getAttribute("id");
       if (id) {
         el.setAttribute(attrName, id);
@@ -303,67 +305,82 @@ function injectMenuItems(attrName, root = document, pc) {
   }
 }
 var _observedContainers = /* @__PURE__ */ new WeakSet();
+function getAttrCompat(el, name) {
+  const value = el.getAttribute(name);
+  if (value !== null) return value;
+  const target = name.toLowerCase();
+  for (let i = 0; i < el.attributes.length; i++) {
+    const attr = el.attributes[i];
+    if (attr.name.toLowerCase() === target) return attr.value;
+  }
+  return null;
+}
+function hasAttrCompat(el, name) {
+  return getAttrCompat(el, name) !== null;
+}
 function getTriggerTestId(trigger, attrName) {
   if (!trigger) return "unknown";
-  return trigger.getAttribute(attrName) || trigger.getAttribute("id") || "unknown";
+  return getAttrCompat(trigger, attrName) || trigger.getAttribute("id") || "unknown";
+}
+function resolveTriggerInContainer(el, attrName) {
+  if (hasAttrCompat(el, attrName)) return el;
+  const children = el.querySelectorAll("[id], [data-testid], [data-testId], [data-testID]");
+  for (const child of children) {
+    if (child instanceof HTMLElement && hasAttrCompat(child, attrName)) return child;
+  }
+  return null;
 }
 function findActiveTrigger(attrName, pc) {
-  const resolveInContainer = (el) => {
-    if (el.hasAttribute(attrName)) return el;
-    const inner = el.querySelector(`[${attrName}]`);
-    if (inner) return inner;
-    return null;
-  };
   const focused = document.querySelector(sel(pc, "picker-focused"));
   if (focused) {
-    const found = resolveInContainer(focused);
+    const found = resolveTriggerInContainer(focused, attrName);
     if (found) return found;
     const input = focused.querySelector("input[id]");
     if (input) return input;
   }
   const selectOpen = document.querySelector(sel(pc, "select-open"));
   if (selectOpen) {
-    const found = resolveInContainer(selectOpen);
+    const found = resolveTriggerInContainer(selectOpen, attrName);
     if (found) return found;
   }
   const cascader = document.querySelector(sel(pc, "cascader-picker-focused"));
   if (cascader) {
-    const found = resolveInContainer(cascader);
+    const found = resolveTriggerInContainer(cascader, attrName);
     if (found) return found;
   }
   const expanded = document.querySelector(
-    `[${attrName}][aria-expanded="true"]`
+    `[id][aria-expanded="true"], [data-testid][aria-expanded="true"], [data-testId][aria-expanded="true"]`
   );
-  if (expanded) return expanded;
+  if (expanded && hasAttrCompat(expanded, attrName)) return expanded;
   return null;
 }
 function injectSubElements(root, attrName, pc) {
   const inputNumbers = root.matches(`${sel(pc, "input-number")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "input-number")}[${attrName}]`));
   for (const wrapper of inputNumbers) {
     if (!(wrapper instanceof HTMLElement)) continue;
-    const testId = wrapper.getAttribute(attrName) || "";
+    const testId = getAttrCompat(wrapper, attrName) || "";
     if (!testId) continue;
     const input = wrapper.querySelector(sel(pc, "input-number-input"));
-    if (input && !input.hasAttribute(attrName)) {
-      input.setAttribute(attrName, testId);
+    if (input && !hasAttrCompat(input, attrName)) {
+      input.setAttribute(attrName, `${testId}-input`);
     }
     const upHandler = wrapper.querySelector(sel(pc, "input-number-handler-up"));
-    if (upHandler && !upHandler.hasAttribute(attrName)) {
+    if (upHandler && !hasAttrCompat(upHandler, attrName)) {
       upHandler.setAttribute(attrName, `${testId}-up`);
     }
     const downHandler = wrapper.querySelector(sel(pc, "input-number-handler-down"));
-    if (downHandler && !downHandler.hasAttribute(attrName)) {
+    if (downHandler && !hasAttrCompat(downHandler, attrName)) {
       downHandler.setAttribute(attrName, `${testId}-down`);
     }
   }
   const sliders = root.matches(`${sel(pc, "slider")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "slider")}[${attrName}]`));
   for (const slider of sliders) {
     if (!(slider instanceof HTMLElement)) continue;
-    const testId = slider.getAttribute(attrName) || "";
+    const testId = getAttrCompat(slider, attrName) || "";
     if (!testId) continue;
     slider.querySelectorAll(sel(pc, "slider-handle")).forEach((h, i) => {
       const el = h;
-      if (!el.hasAttribute(attrName)) {
+      if (!hasAttrCompat(el, attrName)) {
         el.setAttribute(attrName, `${testId}-handle-${i}`);
       }
     });
@@ -371,11 +388,11 @@ function injectSubElements(root, attrName, pc) {
   const rates = root.matches(`${sel(pc, "rate")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "rate")}[${attrName}]`));
   for (const rate of rates) {
     if (!(rate instanceof HTMLElement)) continue;
-    const testId = rate.getAttribute(attrName) || "";
+    const testId = getAttrCompat(rate, attrName) || "";
     if (!testId) continue;
     rate.querySelectorAll(sel(pc, "rate-star")).forEach((s, i) => {
       const el = s;
-      if (!el.hasAttribute(attrName)) {
+      if (!hasAttrCompat(el, attrName)) {
         el.setAttribute(attrName, `${testId}-star-${i}`);
       }
     });
@@ -384,17 +401,52 @@ function injectSubElements(root, attrName, pc) {
   const uploadById = uploadByTestId.length === 0 ? root.matches(`${sel(pc, "upload")}[id]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "upload")}[id]`)) : [];
   for (const upload of [...uploadByTestId, ...uploadById]) {
     if (!(upload instanceof HTMLElement)) continue;
-    const testId = upload.getAttribute(attrName) || upload.getAttribute("id") || "";
+    const testId = getAttrCompat(upload, attrName) || upload.getAttribute("id") || "";
     if (!testId) continue;
     const input = upload.querySelector('input[type="file"]');
-    if (input && !input.hasAttribute(attrName)) {
+    if (input && !hasAttrCompat(input, attrName)) {
       input.setAttribute(attrName, `${testId}-input`);
-      if (!upload.hasAttribute(attrName)) {
+      if (!hasAttrCompat(upload, attrName)) {
         upload.setAttribute(attrName, testId);
       }
     }
   }
 }
+function injectTabsSubElements(root, attrName, pc) {
+  const tabsContainers = root.matches(`${sel(pc, "tabs")}[${attrName}]`) ? [root] : Array.from(root.querySelectorAll(`${sel(pc, "tabs")}[${attrName}]`));
+  for (const tabs of tabsContainers) {
+    if (!(tabs instanceof HTMLElement)) continue;
+    const testId = getAttrCompat(tabs, attrName) || "";
+    if (!testId) continue;
+    const tabItems = tabs.querySelectorAll(sel(pc, "tabs-tab"));
+    tabItems.forEach((tab, i) => {
+      const el = tab;
+      if (hasAttrCompat(el, attrName)) return;
+      const btn = el.querySelector(sel(pc, "tabs-tab-btn"));
+      const text = (btn?.textContent || el.textContent || "").trim().replace(/\s+/g, "-");
+      el.setAttribute(attrName, `${testId}-tab-${i}-${text}`);
+    });
+    const panes = tabs.querySelectorAll(sel(pc, "tabs-tabpane"));
+    panes.forEach((pane, i) => {
+      const el = pane;
+      if (hasAttrCompat(el, attrName)) return;
+      const tabBtn = tabItems[i]?.querySelector(sel(pc, "tabs-tab-btn"));
+      const text = (tabBtn?.textContent || "").trim().replace(/\s+/g, "-");
+      el.setAttribute(attrName, `${testId}-pane-${i}-${text}`);
+    });
+    const navOps = tabs.querySelector(sel(pc, "tabs-nav-operations"));
+    if (navOps instanceof HTMLElement) {
+      const addBtn = navOps.querySelector(sel(pc, "tabs-nav-add"));
+      if (addBtn instanceof HTMLElement && !hasAttrCompat(addBtn, attrName)) {
+        addBtn.setAttribute(attrName, `${testId}-add`);
+      }
+      const moreBtn = navOps.querySelector(sel(pc, "tabs-nav-more"));
+      if (moreBtn instanceof HTMLElement && !hasAttrCompat(moreBtn, attrName)) {
+        moreBtn.setAttribute(attrName, `${testId}-more`);
+      }
+    }
+  }
+}
 function setupAntTestIds(opts = {}) {
   const attrName = opts.attributeName ?? "data-testid";
   const pc = opts.prefixCls ?? "ant";
@@ -410,24 +462,18 @@ function setupAntTestIds(opts = {}) {
       const containers = node.matches(selector) ? [node] : Array.from(node.querySelectorAll(selector));
       for (const container of containers) {
         if (!(container instanceof HTMLElement)) continue;
-        if (container.hasAttribute(attrName)) continue;
+        if (hasAttrCompat(container, attrName)) continue;
         if (strategy) {
           queueMicrotask(() => {
-            const runPanelInjection = (retriesLeft) => {
-              const trigger = findActiveTrigger(attrName, pc);
-              const triggerTestId = getTriggerTestId(trigger, attrName);
-              if (triggerTestId === "unknown" && retriesLeft > 0) {
-                requestAnimationFrame(() => runPanelInjection(retriesLeft - 1));
-                return;
-              }
-              strategy({ container, trigger, triggerTestId, attrName });
-            };
-            runPanelInjection(3);
+            const trigger = findActiveTrigger(attrName, pc);
+            const triggerTestId = getTriggerTestId(trigger, attrName);
+            strategy({ container, trigger, triggerTestId, attrName });
           });
         }
       }
     }
     injectSubElements(node, attrName, pc);
+    injectTabsSubElements(node, attrName, pc);
   }
   let pending = false;
   let pendingNodes = [];
@@ -470,7 +516,7 @@ function injectCurrentDropdowns(opts = {}) {
     const containers = document.querySelectorAll(selector);
     containers.forEach((container) => {
       if (!(container instanceof HTMLElement)) return;
-      if (container.hasAttribute(attrName)) return;
+      if (hasAttrCompat(container, attrName)) return;
       if (!strategy) return;
       const trigger = findActiveTrigger(attrName, pc);
       const triggerTestId = getTriggerTestId(trigger, attrName);
@@ -478,6 +524,7 @@ function injectCurrentDropdowns(opts = {}) {
     });
   }
   injectSubElements(document.body, attrName, pc);
+  injectTabsSubElements(document.body, attrName, pc);
   injectMenuItems(attrName, document, pc);
 }
 function mergeMatchers(defaults, customs) {

package/dist/transform.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 编译期模板 transform。
+ *
+ * 两个独立的 NodeTransform：
+ *   1. multiRootFixTransform  — 多根子组件上自动补 v-bind="$attrs"
+ *      确保 data-testid 能穿透 Fragment 落到 antd 组件 DOM 上。
+ *   2. testIdInjectTransform  — 在父模板中为每个组件使用点注入唯一的
+ *      data-testid="{tagName}-{index}"，保证同一页面中同类型组件的
+ *      testid 全局唯一且稳定。
+ *
+ * 两个 transform 均通过 compileTime: true 下的 createTestIdTransforms() 一键获得。
+ */
+import type { NodeTransform } from '@vue/compiler-core';
+export interface TransformOptions {
+    /** testid 属性名，默认 'data-testid' */
+    attributeName?: string;
+    /** ant-design-vue 的 tag 前缀，默认 'a-' */
+    antPrefix?: string;
+    /** 额外需要注入 testid 的自定义组件前缀 */
+    customPrefixes?: string[];
+}
+/**
+ * 转换多根子组件的模板，自动给第一个 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`
+ *
+ * key 设计：
+ *   - tagName 保持原始大小写，确保一眼认出组件来源
+ *   - index 是严格按模板 AST 中的出现顺序递增的，不同模板各自重置
+ *   - 如果用户已经手动写了 data-testid，则跳过（不覆盖）
+ */
+export declare function createTestIdInjectTransform(opts?: TransformOptions): NodeTransform;
+/**
+ * 返回编译期所需的全部 NodeTransform。
+ *
+ * 使用方法：
+ * ```ts
+ * // vite.config.ts
+ * import vue from '@vitejs/plugin-vue'
+ * import { testIdTransforms } from 'vite-plugin-vue-testid'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     vue({
+ *       template: {
+ *         compilerOptions: {
+ *           nodeTransforms: testIdTransforms()
+ *         }
+ *       }
+ *     }),
+ *   ]
+ * })
+ * ```
+ */
+export declare function createTestIdTransforms(opts?: TransformOptions): NodeTransform[];
+//# sourceMappingURL=transform.d.ts.map

package/dist/transform.d.ts.map

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-testid",
-  "version": "1.0.12",
+  "version": "1.1.1",
   "description": "Vite plugin to auto-inject data-testid into Vue component templates for E2E testing",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,6 +43,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
+    "@vue/compiler-core": "^3.3.0",
     "tsup": "^8.5.1",
     "typescript": "~6.0.2",
     "vite": "^8.0.12"