@immense/vue-pom-generator 1.0.58 → 1.0.60

package/dist/index.mjs

@@ -8,8 +8,8 @@ import { parse as parse$2, NodeTypes as NodeTypes$1 } from "@vue/compiler-dom";
 import { parse as parse$1, compileScript } from "@vue/compiler-sfc";
 import { parseExpression, parse } from "@babel/parser";
 import { NodeTypes, stringifyExpression, ConstantTypes, createSimpleExpression, ElementTypes } from "@vue/compiler-core";
-import { Project, QuoteKind, NewLineKind, IndentationText, StructureKind, CodeBlockWriter, VariableDeclarationKind } from "ts-morph";
-import { isArrayExpression, isStringLiteral, isTemplateLiteral, isAssignmentExpression, isIdentifier, isMemberExpression, isCallExpression, isExpressionStatement, isArrowFunctionExpression, isOptionalMemberExpression, isObjectExpression, isFile, isBlockStatement, isOptionalCallExpression, isLogicalExpression, isConditionalExpression, isSequenceExpression, isAssignmentPattern, isRestElement, isObjectPattern, isObjectProperty, isProgram, VISITOR_KEYS, isBooleanLiteral, isNumericLiteral, isNullLiteral } from "@babel/types";
+import { Project, QuoteKind, NewLineKind, IndentationText, CodeBlockWriter, StructureKind, VariableDeclarationKind } from "ts-morph";
+import { isArrayExpression, isStringLiteral, isTemplateLiteral, isMemberExpression, isOptionalMemberExpression, isCallExpression, isOptionalCallExpression, isAssignmentExpression, isIdentifier, isExpressionStatement, isObjectExpression, isFile, isArrowFunctionExpression, isBlockStatement, isLogicalExpression, isConditionalExpression, isSequenceExpression, isAssignmentPattern, isRestElement, isObjectPattern, isObjectProperty, isProgram, VISITOR_KEYS, isBooleanLiteral, isNumericLiteral, isNullLiteral } from "@babel/types";
 import { performance } from "node:perf_hooks";
 import vue from "@vitejs/plugin-vue";
 const VUE_POM_GENERATOR_LOG_PREFIX = "[vue-pom-generator]";
@@ -204,6 +204,49 @@ async function loadNuxtProjectDiscovery(cwd = process.cwd()) {
   const nuxtOptions = await loadNuxtConfig({ cwd });
   return resolveNuxtProjectDiscovery(nuxtOptions, getLayerDirectories, cwd);
 }
+function resolveGenerationSupportOptions(options) {
+  return {
+    outDir: (options.outDir ?? "tests/playwright/__generated__").trim(),
+    emitLanguages: options.emitLanguages?.length ? options.emitLanguages : ["ts"],
+    typescriptOutputStructure: options.typescriptOutputStructure ?? "aggregated",
+    csharp: options.csharp,
+    generateFixtures: options.generateFixtures,
+    customPomAttachments: options.customPomAttachments ?? [],
+    customPomDir: options.customPomDir ?? "tests/playwright/pom/custom",
+    requireCustomPomDir: options.requireCustomPomDir ?? false,
+    customPomImportAliases: options.customPomImportAliases,
+    customPomImportNameCollisionBehavior: options.customPomImportNameCollisionBehavior ?? "error",
+    nameCollisionBehavior: options.nameCollisionBehavior ?? "error",
+    existingIdBehavior: options.existingIdBehavior ?? "error",
+    testIdAttribute: (options.testIdAttribute ?? "data-testid").trim() || "data-testid",
+    routerAwarePoms: options.routerAwarePoms ?? false,
+    routerEntry: options.routerEntry,
+    routerType: options.routerType ?? "vue-router",
+    routerModuleShims: options.routerModuleShims
+  };
+}
+function resolveInjectionSupportOptions(options) {
+  const isNuxt = options.isNuxt ?? false;
+  return {
+    pageDirs: isNuxt ? ["app/pages"] : [options.viewsDir ?? "src/views"],
+    componentDirs: isNuxt ? ["app/components"] : options.componentDirs ?? ["src/components"],
+    layoutDirs: isNuxt ? ["app/layouts"] : options.layoutDirs ?? ["src/layouts"],
+    wrapperSearchRoots: isNuxt ? [] : options.wrapperSearchRoots ?? [],
+    nativeWrappers: options.nativeWrappers ?? {},
+    excludedComponents: options.excludedComponents ?? [],
+    existingIdBehavior: options.existingIdBehavior ?? "error",
+    testIdAttribute: (options.testIdAttribute ?? "data-testid").trim() || "data-testid"
+  };
+}
+function applyNuxtDiscoveryToInjectionOptions(options, discovery) {
+  return {
+    ...options,
+    pageDirs: discovery.pageDirs.length ? discovery.pageDirs : [path.resolve(discovery.srcDir, "pages")],
+    componentDirs: discovery.componentDirs,
+    layoutDirs: discovery.layoutDirs,
+    wrapperSearchRoots: discovery.wrapperSearchRoots
+  };
+}
 function createTypeScriptProject() {
   return new Project({
     useInMemoryFileSystem: true,
@@ -295,16 +338,7 @@ function createClassConstructor(constructorDeclaration) {
     ...constructorDeclaration
   };
 }
-function upperFirst$1(value) {
-  if (!value) {
-    return value;
-  }
-  return value.charAt(0).toUpperCase() + value.slice(1);
-}
-function hasParam(params, name) {
-  return Object.prototype.hasOwnProperty.call(params, name);
-}
-function splitTypeAndInitializer(typeExpression) {
+function splitPomParameterTypeExpression(typeExpression) {
   const trimmed = typeExpression.trim();
   const initializerIndex = trimmed.lastIndexOf("=");
   if (initializerIndex < 0) {
@@ -315,49 +349,306 @@ function splitTypeAndInitializer(typeExpression) {
     initializer: trimmed.slice(initializerIndex + 1).trim()
   };
 }
-function createParameter(name, typeExpression) {
-  const { type, initializer } = splitTypeAndInitializer(typeExpression);
+function createPomParameterSpec(name, typeExpression, options = {}) {
+  const normalizedTypeExpression = typeExpression?.trim();
+  const { type, initializer } = normalizedTypeExpression ? splitPomParameterTypeExpression(normalizedTypeExpression) : { type: void 0, initializer: void 0 };
   return {
     name,
-    type: type || void 0,
-    initializer
+    typeExpression: normalizedTypeExpression,
+    type,
+    initializer: options.initializer ?? initializer,
+    hasQuestionToken: options.hasQuestionToken,
+    isRestParameter: options.isRestParameter
   };
 }
-function createParameters(params) {
-  return Object.entries(params).map(([name, typeExpression]) => createParameter(name, typeExpression));
+function normalizePomParameters(params) {
+  if (!params) {
+    return [];
+  }
+  return params.map((param) => createPomParameterSpec(param.name, param.typeExpression ?? param.type, {
+    initializer: param.initializer,
+    hasQuestionToken: param.hasQuestionToken,
+    isRestParameter: param.isRestParameter
+  }));
 }
-function createInlineParameter(name, options = {}) {
+function getPomParameterNames(params) {
+  return normalizePomParameters(params).map((param) => param.name);
+}
+function getPomParameter(params, name) {
+  return normalizePomParameters(params).find((param) => param.name === name);
+}
+function hasPomParameter(params, name) {
+  return !!getPomParameter(params, name);
+}
+function setPomParameter(params, name, typeExpression, options = {}) {
+  const nextParam = createPomParameterSpec(name, typeExpression, options);
+  const normalizedParams = normalizePomParameters(params);
+  const existingIndex = normalizedParams.findIndex((param) => param.name === name);
+  if (existingIndex < 0) {
+    return [...normalizedParams, nextParam];
+  }
+  const nextParams = normalizedParams.slice();
+  nextParams[existingIndex] = nextParam;
+  return nextParams;
+}
+function removePomParameter(params, name) {
+  return normalizePomParameters(params).filter((param) => param.name !== name);
+}
+function toTypeScriptPomParameterStructures(params) {
+  return normalizePomParameters(params).map((param) => ({
+    name: param.name,
+    type: param.type || void 0,
+    initializer: param.initializer,
+    hasQuestionToken: param.hasQuestionToken,
+    isRestParameter: param.isRestParameter
+  }));
+}
+function getPomParameterArgumentNames(params) {
+  return normalizePomParameters(params).map((param) => param.isRestParameter ? `...${param.name}` : param.name);
+}
+function createPomMethodSignature(parameters) {
   return {
-    name,
-    type: options.type,
-    initializer: options.initializer
+    parameters: normalizePomParameters(parameters)
   };
 }
-function removeByKeySegment(value) {
-  const idx = value.lastIndexOf("ByKey");
-  if (idx < 0) {
-    return value;
+function pomParameterSpecEquals(left, right) {
+  return left.name === right.name && left.typeExpression === right.typeExpression && left.type === right.type && left.initializer === right.initializer && left.hasQuestionToken === right.hasQuestionToken && left.isRestParameter === right.isRestParameter;
+}
+function pomParameterListEquals(left, right) {
+  const leftParams = normalizePomParameters(left);
+  const rightParams = normalizePomParameters(right);
+  if (leftParams.length !== rightParams.length) {
+    return false;
   }
-  return value.slice(0, idx) + value.slice(idx + "ByKey".length);
+  return leftParams.every((param, index) => pomParameterSpecEquals(param, rightParams[index]));
+}
+function pomMethodSignatureEquals(left, right) {
+  return pomParameterListEquals(left.parameters, right.parameters);
+}
+function isParameterizedPomPattern(kind) {
+  return kind === "parameterized";
 }
-function uniqueAlternates(primary, alternates) {
+function getTemplateVariables(formatted) {
   const out = [];
   const seen = /* @__PURE__ */ new Set();
-  seen.add(primary);
-  for (const a of alternates ?? []) {
-    if (!a) {
+  const matches = formatted.matchAll(/\$\{(\w+)\}/g);
+  for (const match of matches) {
+    const variableName = match[1];
+    if (seen.has(variableName)) {
       continue;
     }
-    if (seen.has(a)) {
+    seen.add(variableName);
+    out.push(variableName);
+  }
+  return out;
+}
+function createPomStringPattern(formatted, patternKind) {
+  return {
+    formatted,
+    patternKind,
+    templateVariables: getTemplateVariables(formatted)
+  };
+}
+function getPomPatternVariables(patterns, options = {}) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const omitted = new Set(options.omit ?? []);
+  for (const pattern of patterns) {
+    for (const variableName of pattern.templateVariables) {
+      if (omitted.has(variableName) || seen.has(variableName)) {
+        continue;
+      }
+      seen.add(variableName);
+      out.push(variableName);
+    }
+  }
+  return out;
+}
+function orderPomPatternParameters(params, patterns, options = {}) {
+  const currentParams = normalizePomParameters(params);
+  const orderedParams = [];
+  const seen = /* @__PURE__ */ new Set();
+  const missingParams = [];
+  for (const variableName of getPomPatternVariables(patterns, options)) {
+    seen.add(variableName);
+    const existingParam = currentParams.find((param) => param.name === variableName);
+    if (!existingParam) {
+      missingParams.push(variableName);
       continue;
     }
-    seen.add(a);
-    out.push(a);
+    orderedParams.push(existingParam);
+  }
+  if (missingParams.length > 0) {
+    const availableParams = currentParams.map((param) => JSON.stringify(param.name)).join(", ") || "<none>";
+    const patternSummary = patterns.map((pattern) => JSON.stringify(pattern.formatted)).join(", ");
+    throw new Error(
+      `[vue-pom-generator] Missing selector parameter(s) ${missingParams.map((name) => JSON.stringify(name)).join(", ")} for parameterized pattern(s) ${patternSummary}. Available parameters: ${availableParams}.`
+    );
+  }
+  for (const param of currentParams) {
+    if (seen.has(param.name)) {
+      continue;
+    }
+    seen.add(param.name);
+    orderedParams.push(param);
+  }
+  return orderedParams;
+}
+function getIndexedPomPatternVariable(pattern) {
+  if (!isParameterizedPomPattern(pattern.patternKind)) {
+    return null;
+  }
+  if (pattern.templateVariables.length !== 1) {
+    throw new Error(
+      `[vue-pom-generator] Parameterized locator getters require exactly one template variable; got ${pattern.templateVariables.length} in ${JSON.stringify(pattern.formatted)}.`
+    );
+  }
+  return pattern.templateVariables[0];
+}
+function hasPomPatternVariables(pattern) {
+  return pattern.templateVariables.length > 0;
+}
+function toTypeScriptPomPatternExpression(pattern) {
+  return isParameterizedPomPattern(pattern.patternKind) ? `\`${pattern.formatted}\`` : JSON.stringify(pattern.formatted);
+}
+function toCSharpPomPatternExpression(pattern) {
+  if (!isParameterizedPomPattern(pattern.patternKind)) {
+    return JSON.stringify(pattern.formatted);
+  }
+  const inner = pattern.formatted.replace(/\$\{/g, "{");
+  return `$${JSON.stringify(inner)}`;
+}
+function bindTypeScriptPomPattern(pattern, variableName) {
+  const expression = toTypeScriptPomPatternExpression(pattern);
+  if (!isParameterizedPomPattern(pattern.patternKind)) {
+    return { expression, setupStatements: [] };
+  }
+  return {
+    expression: variableName,
+    setupStatements: [`const ${variableName} = ${expression};`]
+  };
+}
+function bindCSharpPomPattern(pattern, variableName) {
+  const expression = toCSharpPomPatternExpression(pattern);
+  if (!isParameterizedPomPattern(pattern.patternKind)) {
+    return { expression, setupStatements: [] };
+  }
+  return {
+    expression: variableName,
+    setupStatements: [`var ${variableName} = ${expression};`]
+  };
+}
+function pomStringPatternEquals(left, right) {
+  return left.formatted === right.formatted && left.patternKind === right.patternKind;
+}
+function uniquePomStringPatterns(primary, alternates) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (pattern) => {
+    const key = JSON.stringify(pattern);
+    if (seen.has(key)) {
+      return;
+    }
+    seen.add(key);
+    out.push(pattern);
+  };
+  add(primary);
+  for (const alternate of alternates ?? []) {
+    add(alternate);
   }
   return out;
 }
-function testIdExpression(formattedDataTestId) {
-  return formattedDataTestId.includes("${") ? `\`${formattedDataTestId}\`` : JSON.stringify(formattedDataTestId);
+function splitDiscoverabilityWords(value) {
+  const normalized = value.replace(/ByKey/g, "").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/[._-]+/g, " ").trim();
+  if (!normalized) {
+    return [];
+  }
+  return normalized.split(/\s+/).map((word) => word.toLowerCase()).filter(Boolean);
+}
+function joinDiscoverabilityWords(words) {
+  return words.join(" ").replace(/\s+/g, " ").trim();
+}
+function toSentenceCase(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function stripComponentKindSuffix(componentName) {
+  for (const suffix of ["Page", "Component", "Layout"]) {
+    if (componentName.endsWith(suffix) && componentName.length > suffix.length) {
+      return componentName.slice(0, -suffix.length);
+    }
+  }
+  return componentName;
+}
+function removeLeadingWords(words, prefixWords) {
+  if (!prefixWords.length || words.length < prefixWords.length) {
+    return [...words];
+  }
+  for (let i = 0; i < prefixWords.length; i++) {
+    if (words[i] !== prefixWords[i]) {
+      return [...words];
+    }
+  }
+  return words.slice(prefixWords.length);
+}
+function removeTrailingRoleWord(words, roleWord) {
+  if (!words.length || words[words.length - 1] !== roleWord) {
+    return [...words];
+  }
+  return words.slice(0, -1);
+}
+function humanizePomMethodName(methodName) {
+  return joinDiscoverabilityWords(splitDiscoverabilityWords(methodName));
+}
+function stripPomActionPrefix(actionName) {
+  for (const prefix of ["click", "select", "type", "goTo"]) {
+    if (actionName.startsWith(prefix) && actionName.length > prefix.length) {
+      return actionName.slice(prefix.length);
+    }
+  }
+  return actionName;
+}
+function normalizePomRoleLabel(nativeRole) {
+  if (nativeRole === "vselect") {
+    return "select";
+  }
+  return nativeRole || "element";
+}
+function buildPomLocatorDescription(args) {
+  const componentWords = splitDiscoverabilityWords(args.componentName ? stripComponentKindSuffix(args.componentName) : "");
+  const roleWord = normalizePomRoleLabel(args.nativeRole).toLowerCase();
+  const semanticWords = removeLeadingWords(
+    removeTrailingRoleWord(splitDiscoverabilityWords(args.methodName), roleWord),
+    componentWords
+  );
+  const phrase = joinDiscoverabilityWords([
+    ...componentWords,
+    ...semanticWords,
+    roleWord
+  ]);
+  return toSentenceCase(phrase || "Generated element");
+}
+function upperFirst$1(value) {
+  if (!value) {
+    return value;
+  }
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function createParameters(params) {
+  return toTypeScriptPomParameterStructures(params);
+}
+function createInlineParameter(name, options = {}) {
+  return {
+    name,
+    type: options.type,
+    initializer: options.initializer
+  };
+}
+function removeByKeySegment$1(value) {
+  const idx = value.lastIndexOf("ByKey");
+  if (idx < 0) {
+    return value;
+  }
+  return value.slice(0, idx) + value.slice(idx + "ByKey".length);
 }
 function createAsyncMethod(name, parameters, statements) {
   return createClassMethod({
@@ -367,17 +658,25 @@ function createAsyncMethod(name, parameters, statements) {
     statements
   });
 }
-function generateClickMethod(methodName, formattedDataTestId, alternateFormattedDataTestIds, params) {
+function generateClickMethod(componentName, methodName, selector, alternateSelectors, parameters) {
   const name = `click${methodName}`;
   const noWaitName = `${name}NoWait`;
-  const baseParameters = createParameters(params);
-  const argsForForward = Object.keys(params).join(", ");
-  const alternates = uniqueAlternates(formattedDataTestId, alternateFormattedDataTestIds);
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName,
+    nativeRole: "button"
+  }));
+  const selectorParams = orderPomPatternParameters(parameters, [selector]);
+  const hasSelectorVariables = hasPomPatternVariables(selector);
+  const baseParameters = createParameters(selectorParams);
+  const argsForForward = getPomParameterNames(selectorParams).join(", ");
+  const alternates = uniquePomStringPatterns(selector, alternateSelectors).slice(1);
+  const primaryTestIdExpr = toTypeScriptPomPatternExpression(selector);
   if (alternates.length > 0) {
-    const candidatesExpr = [formattedDataTestId, ...alternates].map(testIdExpression).join(", ");
+    const candidatesExpr = [primaryTestIdExpr, ...alternates.map((id) => toTypeScriptPomPatternExpression(id))].join(", ");
     const clickMethod = createAsyncMethod(
       name,
-      hasParam(params, "key") ? [
+      hasSelectorVariables ? [
         ...baseParameters,
         createInlineParameter("wait", { type: "boolean", initializer: "true" }),
         createInlineParameter("annotationText", { type: "string", initializer: '""' })
@@ -389,7 +688,7 @@ function generateClickMethod(methodName, formattedDataTestId, alternateFormatted
         writer.writeLine(`const candidates = [${candidatesExpr}] as const;`);
         writer.writeLine("let lastError: unknown;");
         writer.write("for (const testId of candidates) ").block(() => {
-          writer.writeLine("const locator = this.locatorByTestId(testId);");
+          writer.writeLine(`const locator = this.locatorByTestId(testId, ${locatorDescription});`);
           writer.write("try ").block(() => {
             writer.write("if (await locator.count()) ").block(() => {
               writer.writeLine("await this.clickLocator(locator, annotationText, wait);");
@@ -406,14 +705,14 @@ function generateClickMethod(methodName, formattedDataTestId, alternateFormatted
     const noWaitArgs = argsForForward ? `${argsForForward}, false, annotationText` : "false, annotationText";
     const noWaitMethod = createAsyncMethod(
       noWaitName,
-      hasParam(params, "key") ? [...baseParameters, createInlineParameter("annotationText", { type: "string", initializer: '""' })] : [createInlineParameter("annotationText", { type: "string", initializer: '""' })],
+      hasSelectorVariables ? [...baseParameters, createInlineParameter("annotationText", { type: "string", initializer: '""' })] : [createInlineParameter("annotationText", { type: "string", initializer: '""' })],
       (writer) => {
         writer.writeLine(`await this.${name}(${noWaitArgs});`);
       }
     );
     return [clickMethod, noWaitMethod];
   }
-  if (hasParam(params, "key")) {
+  if (hasSelectorVariables) {
     return [
       createAsyncMethod(
         name,
@@ -423,7 +722,7 @@ function generateClickMethod(methodName, formattedDataTestId, alternateFormatted
           createInlineParameter("annotationText", { type: "string", initializer: '""' })
         ],
         (writer) => {
-          writer.writeLine(`await this.clickByTestId(\`${formattedDataTestId}\`, annotationText, wait);`);
+          writer.writeLine(`await this.clickByTestId(${primaryTestIdExpr}, annotationText, wait, ${locatorDescription});`);
         }
       ),
       createAsyncMethod(
@@ -443,7 +742,7 @@ function generateClickMethod(methodName, formattedDataTestId, alternateFormatted
         createInlineParameter("annotationText", { type: "string", initializer: '""' })
       ],
       (writer) => {
-        writer.writeLine(`await this.clickByTestId("${formattedDataTestId}", annotationText, wait);`);
+        writer.writeLine(`await this.clickByTestId(${primaryTestIdExpr}, annotationText, wait, ${locatorDescription});`);
       }
     ),
     createAsyncMethod(
@@ -455,66 +754,76 @@ function generateClickMethod(methodName, formattedDataTestId, alternateFormatted
     )
   ];
 }
-function generateRadioMethod(methodName, formattedDataTestId) {
+function generateRadioMethod(componentName, methodName, selector, parameters) {
   const name = `select${methodName}`;
-  const hasKey = formattedDataTestId.includes("${key}");
-  const parameters = hasKey ? [
-    createInlineParameter("key", { type: "string" }),
-    createInlineParameter("annotationText", { type: "string", initializer: '""' })
-  ] : [createInlineParameter("annotationText", { type: "string", initializer: '""' })];
-  const testIdExpr = hasKey ? `\`${formattedDataTestId}\`` : `"${formattedDataTestId}"`;
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName,
+    nativeRole: "radio"
+  }));
+  const selectorParams = orderPomPatternParameters(parameters, [selector]);
+  const methodParameters = createParameters(selectorParams);
+  const testIdExpr = toTypeScriptPomPatternExpression(selector);
   return [
-    createAsyncMethod(name, parameters, (writer) => {
-      writer.writeLine(`await this.clickByTestId(${testIdExpr}, annotationText);`);
+    createAsyncMethod(name, methodParameters, (writer) => {
+      writer.writeLine(`await this.clickByTestId(${testIdExpr}, annotationText, true, ${locatorDescription});`);
     })
   ];
 }
-function generateSelectMethod(methodName, formattedDataTestId) {
+function generateSelectMethod(componentName, methodName, selector, parameters) {
   const name = `select${methodName}`;
-  const needsKey = formattedDataTestId.includes("${key}");
-  const selectorExpr = needsKey ? `this.selectorForTestId(\`${formattedDataTestId}\`)` : `this.selectorForTestId("${formattedDataTestId}")`;
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName,
+    nativeRole: "select"
+  }));
+  const selectorParams = orderPomPatternParameters(parameters, [selector]);
+  const testIdExpr = toTypeScriptPomPatternExpression(selector);
   return [
     createAsyncMethod(
       name,
-      [
-        createInlineParameter("value", { type: "string" }),
-        createInlineParameter("annotationText", { type: "string", initializer: '""' })
-      ],
+      createParameters(selectorParams),
       (writer) => {
-        writer.writeLine(`const selector = ${selectorExpr};`);
-        writer.writeLine("await this.animateCursorToElement(selector, false, 500, annotationText);");
-        writer.writeLine("await this.page.selectOption(selector, value);");
+        writer.writeLine(`const testId = ${testIdExpr};`);
+        writer.writeLine(`const locator = this.locatorByTestId(testId, ${locatorDescription});`);
+        writer.writeLine("await this.animateCursorToElement(locator, false, 500, annotationText);");
+        writer.writeLine("await locator.selectOption(value);");
       }
     )
   ];
 }
-function generateVSelectMethod(methodName, formattedDataTestId) {
+function generateVSelectMethod(componentName, methodName, selector, parameters) {
   const name = `select${methodName}`;
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName,
+    nativeRole: "vselect"
+  }));
+  const selectorParams = orderPomPatternParameters(parameters, [selector]);
   return [
     createAsyncMethod(
       name,
-      [
-        createInlineParameter("value", { type: "string" }),
-        createInlineParameter("timeOut", { type: "number", initializer: "500" }),
-        createInlineParameter("annotationText", { type: "string", initializer: '""' })
-      ],
+      createParameters(selectorParams),
       (writer) => {
-        writer.writeLine(`await this.selectVSelectByTestId("${formattedDataTestId}", value, timeOut, annotationText);`);
+        writer.writeLine(`await this.selectVSelectByTestId(${toTypeScriptPomPatternExpression(selector)}, value, timeOut, annotationText, ${locatorDescription});`);
       }
     )
   ];
 }
-function generateTypeMethod(methodName, formattedDataTestId) {
+function generateTypeMethod(componentName, methodName, selector, parameters) {
   const name = `type${methodName}`;
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName,
+    nativeRole: "input"
+  }));
+  const selectorParams = orderPomPatternParameters(parameters, [selector]);
   return [
     createAsyncMethod(
       name,
-      [
-        createInlineParameter("text", { type: "string" }),
-        createInlineParameter("annotationText", { type: "string", initializer: '""' })
-      ],
+      createParameters(selectorParams),
       (writer) => {
-        writer.writeLine(`await this.fillInputByTestId("${formattedDataTestId}", text, annotationText);`);
+        writer.writeLine(`await this.fillInputByTestId(${toTypeScriptPomPatternExpression(selector)}, text, annotationText, ${locatorDescription});`);
       }
     )
   ];
@@ -529,62 +838,74 @@ function isAllDigits(value) {
   }
   return true;
 }
-function generateGetElementByDataTestId(methodName, nativeRole, formattedDataTestId, alternateFormattedDataTestIds, getterNameOverride, params) {
+function generateGetElementByDataTestId(componentName, methodName, nativeRole, selector, alternateSelectors, getterNameOverride, parameters) {
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName,
+    nativeRole
+  }));
   const roleSuffix = upperFirst$1(nativeRole || "Element");
   const baseName = upperFirst$1(methodName);
   const numericSuffix = baseName.startsWith(roleSuffix) ? baseName.slice(roleSuffix.length) : "";
-  const hasRoleSuffix = baseName.endsWith(roleSuffix) || baseName.startsWith(roleSuffix) && isAllDigits(numericSuffix);
-  const propertyName = hasRoleSuffix ? `${baseName}` : `${baseName}${roleSuffix}`;
-  const needsKey = hasParam(params, "key") || formattedDataTestId.includes("${key}");
-  if (needsKey) {
-    const keyType = params.key || "string";
-    const keyedPropertyName = getterNameOverride ?? removeByKeySegment(propertyName);
+  const hasRoleSuffix2 = baseName.endsWith(roleSuffix) || baseName.startsWith(roleSuffix) && isAllDigits(numericSuffix);
+  const propertyName = hasRoleSuffix2 ? `${baseName}` : `${baseName}${roleSuffix}`;
+  const selectorParams = orderPomPatternParameters(parameters, [selector]);
+  const indexedVariable = getIndexedPomPatternVariable(selector);
+  if (indexedVariable) {
+    const keyType = getPomParameter(selectorParams, indexedVariable)?.typeExpression || "string";
+    const keyedPropertyName = getterNameOverride ?? removeByKeySegment$1(propertyName);
     return [
       createClassGetter({
         name: keyedPropertyName,
         statements: [
-          `return this.keyedLocators((key: ${keyType}) => this.locatorByTestId(\`${formattedDataTestId}\`));`
+          `return this.keyedLocators((${indexedVariable}: ${keyType}) => this.locatorByTestId(${toTypeScriptPomPatternExpression(selector)}, ${locatorDescription}));`
         ]
       })
     ];
   }
   const finalPropertyName = getterNameOverride ?? propertyName;
-  const alternates = uniqueAlternates(formattedDataTestId, alternateFormattedDataTestIds);
+  const alternates = uniquePomStringPatterns(selector, alternateSelectors).slice(1);
   if (alternates.length > 0) {
-    const all = [formattedDataTestId, ...alternates];
-    const locatorExpr = all.map((id) => `this.locatorByTestId(${testIdExpression(id)})`).reduce((acc, next) => `${acc}.or(${next})`);
+    const all = [selector, ...alternates];
+    const locatorExpr = all.map((id) => `this.locatorByTestId(${toTypeScriptPomPatternExpression(id)})`).reduce((acc, next) => `${acc}.or(${next})`);
     return [
       createClassGetter({
         name: finalPropertyName,
-        statements: [`return ${locatorExpr};`]
+        statements: [`return this.describeLocator(${locatorExpr}, ${locatorDescription});`]
       })
     ];
   }
   return [
     createClassGetter({
       name: finalPropertyName,
-      statements: [`return this.locatorByTestId("${formattedDataTestId}");`]
+      statements: [`return this.locatorByTestId(${toTypeScriptPomPatternExpression(selector)}, ${locatorDescription});`]
     })
   ];
 }
 function generateNavigationMethod(args) {
-  const { targetPageObjectModelClass: target, baseMethodName, formattedDataTestId, alternateFormattedDataTestIds, params } = args;
+  const { componentName, targetPageObjectModelClass: target, baseMethodName, selector, alternateSelectors, parameters } = args;
   const methodName = baseMethodName ? `goTo${upperFirst$1(baseMethodName)}` : `goTo${target.endsWith("Page") ? target.slice(0, -"Page".length) : target}`;
-  const parameters = createParameters(params);
-  const alternates = uniqueAlternates(formattedDataTestId, alternateFormattedDataTestIds);
-  const candidatesExpr = [formattedDataTestId, ...alternates].map(testIdExpression).join(", ");
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName: baseMethodName,
+    nativeRole: "button"
+  }));
+  const selectorParams = orderPomPatternParameters(parameters, [selector]);
+  const methodParameters = createParameters(selectorParams);
+  const alternates = uniquePomStringPatterns(selector, alternateSelectors).slice(1);
+  const candidatesExpr = [toTypeScriptPomPatternExpression(selector), ...alternates.map((id) => toTypeScriptPomPatternExpression(id))].join(", ");
   if (alternates.length > 0) {
     return [
       createClassMethod({
         name: methodName,
-        parameters,
+        parameters: methodParameters,
         returnType: `Fluent<${target}>`,
         statements: (writer) => {
           writer.write("return this.fluent(async () => ").block(() => {
             writer.writeLine(`const candidates = [${candidatesExpr}] as const;`);
             writer.writeLine("let lastError: unknown;");
             writer.write("for (const testId of candidates) ").block(() => {
-              writer.writeLine("const locator = this.locatorByTestId(testId);");
+              writer.writeLine(`const locator = this.locatorByTestId(testId, ${locatorDescription});`);
               writer.write("try ").block(() => {
                 writer.write("if (await locator.count()) ").block(() => {
                   writer.writeLine("await this.clickLocator(locator);");
@@ -605,11 +926,12 @@ function generateNavigationMethod(args) {
   return [
     createClassMethod({
       name: methodName,
-      parameters,
+      parameters: methodParameters,
       returnType: `Fluent<${target}>`,
       statements: (writer) => {
         writer.write("return this.fluent(async () => ").block(() => {
-          writer.writeLine(`await this.clickByTestId(\`${formattedDataTestId}\`);`);
+          writer.writeLine(`const locator = this.locatorByTestId(${toTypeScriptPomPatternExpression(selector)}, ${locatorDescription});`);
+          writer.writeLine("await this.clickLocator(locator);");
           writer.writeLine(`return new ${target}(this.page);`);
         });
         writer.writeLine(");");
@@ -617,41 +939,43 @@ function generateNavigationMethod(args) {
     })
   ];
 }
-function generateViewObjectModelMembers(targetPageObjectModelClass, methodName, nativeRole, formattedDataTestId, alternateFormattedDataTestIds, getterNameOverride, params) {
+function generateViewObjectModelMembers(componentName, targetPageObjectModelClass, methodName, nativeRole, selector, alternateSelectors, getterNameOverride, parameters) {
   const baseMethodName = nativeRole === "radio" ? methodName || "Radio" : methodName;
   const members = generateGetElementByDataTestId(
+    componentName,
     baseMethodName,
     nativeRole,
-    formattedDataTestId,
-    alternateFormattedDataTestIds,
+    selector,
+    alternateSelectors,
     getterNameOverride,
-    params
+    parameters
   );
   if (targetPageObjectModelClass) {
     return [
       ...members,
       ...generateNavigationMethod({
+        componentName,
         targetPageObjectModelClass,
         baseMethodName,
-        formattedDataTestId,
-        alternateFormattedDataTestIds,
-        params
+        selector,
+        alternateSelectors,
+        parameters
       })
     ];
   }
   if (nativeRole === "select") {
-    return [...members, ...generateSelectMethod(baseMethodName, formattedDataTestId)];
+    return [...members, ...generateSelectMethod(componentName, baseMethodName, selector, parameters)];
   }
   if (nativeRole === "vselect") {
-    return [...members, ...generateVSelectMethod(baseMethodName, formattedDataTestId)];
+    return [...members, ...generateVSelectMethod(componentName, baseMethodName, selector, parameters)];
   }
   if (nativeRole === "input") {
-    return [...members, ...generateTypeMethod(baseMethodName, formattedDataTestId)];
+    return [...members, ...generateTypeMethod(componentName, baseMethodName, selector, parameters)];
   }
   if (nativeRole === "radio") {
-    return [...members, ...generateRadioMethod(baseMethodName || "Radio", formattedDataTestId)];
+    return [...members, ...generateRadioMethod(componentName, baseMethodName || "Radio", selector, parameters)];
   }
-  return [...members, ...generateClickMethod(baseMethodName, formattedDataTestId, alternateFormattedDataTestIds, params)];
+  return [...members, ...generateClickMethod(componentName, baseMethodName, selector, alternateSelectors, parameters)];
 }
 function isSimpleExpressionNode(value) {
   return value !== null && "type" in value && value.type === NodeTypes.SIMPLE_EXPRESSION;
@@ -691,43 +1015,72 @@ function buildPlaceholderParams(keys) {
     params[k] = "__placeholder__";
   return params;
 }
-function getRouteLocationLikeFromToDirective(toDirective) {
-  if (!toDirective.exp)
-    return null;
-  const exp = toDirective.exp;
-  const rawSource = stringifyExpression(exp).trim();
+const isNodeType = (node, type) => {
+  return node !== null && node.type === type;
+};
+const isStringLiteralNode = (node) => {
+  return isNodeType(node, "StringLiteral") && typeof node.value === "string";
+};
+const isIdentifierNode = (node) => {
+  return isNodeType(node, "Identifier") && typeof node.name === "string";
+};
+const isObjectPropertyNode = (node) => {
+  if (!isNodeType(node, "ObjectProperty"))
+    return false;
+  const n = node;
+  return typeof n.key === "object" && n.key !== null && typeof n.value === "object" && n.value !== null;
+};
+const isObjectExpressionNode = (node) => {
+  if (!isNodeType(node, "ObjectExpression"))
+    return false;
+  const n = node;
+  return Array.isArray(n.properties);
+};
+function materializeResolvedRouteTarget(target, paramKeys) {
+  if (typeof target === "string")
+    return target;
+  if (!paramKeys.length)
+    return target;
+  return {
+    ...target,
+    params: buildPlaceholderParams(paramKeys)
+  };
+}
+function analyzeToDirectiveTarget(toDirective) {
+  if (!toDirective.exp) {
+    return {
+      kind: "unsupported",
+      rawSource: null,
+      reason: "missing-expression"
+    };
+  }
+  const rawSource = stringifyExpression(toDirective.exp).trim();
   let expr;
   try {
     expr = parseExpression(rawSource, { plugins: ["typescript"] });
-  } catch {
-    return null;
+  } catch (error) {
+    return {
+      kind: "parse-error",
+      rawSource,
+      reason: "parse-error",
+      error: error instanceof Error ? error.message : String(error)
+    };
   }
-  const isNodeType = (node, type) => {
-    return node !== null && node.type === type;
-  };
-  const isStringLiteralNode = (node) => {
-    return isNodeType(node, "StringLiteral") && typeof node.value === "string";
-  };
-  const isIdentifierNode = (node) => {
-    return isNodeType(node, "Identifier") && typeof node.name === "string";
-  };
-  const isObjectPropertyNode = (node) => {
-    if (!isNodeType(node, "ObjectProperty"))
-      return false;
-    const n = node;
-    return typeof n.key === "object" && n.key !== null && typeof n.value === "object" && n.value !== null;
-  };
-  const isObjectExpressionNode = (node) => {
-    if (!isNodeType(node, "ObjectExpression"))
-      return false;
-    const n = node;
-    return Array.isArray(n.properties);
-  };
   if (isStringLiteralNode(expr)) {
-    return expr.value;
+    return {
+      kind: "resolved",
+      rawSource,
+      target: expr.value,
+      routeNameKey: null,
+      paramKeys: []
+    };
   }
   if (!isObjectExpressionNode(expr)) {
-    return null;
+    return {
+      kind: "unsupported",
+      rawSource,
+      reason: "dynamic-expression"
+    };
   }
   const getStringField = (fieldName) => {
     const prop = expr.properties.find((p) => {
@@ -748,7 +1101,7 @@ function getRouteLocationLikeFromToDirective(toDirective) {
     const key = p.key;
     return isIdentifierNode(key) && key.name === "params" || isStringLiteralNode(key) && key.value === "params";
   });
-  let params;
+  let paramKeys = [];
   if (paramsProp && isObjectPropertyNode(paramsProp) && isObjectExpressionNode(paramsProp.value)) {
     const keys = [];
     for (const prop of paramsProp.value.properties) {
@@ -760,47 +1113,50 @@ function getRouteLocationLikeFromToDirective(toDirective) {
       else if (isStringLiteralNode(key))
         keys.push(key.value);
     }
-    if (keys.length) {
-      params = buildPlaceholderParams(Array.from(new Set(keys)));
-    }
+    paramKeys = Array.from(new Set(keys));
   }
   if (name) {
-    return { name, params };
+    const trimmed = name.trim();
+    if (!trimmed.length) {
+      return {
+        kind: "unsupported",
+        rawSource,
+        reason: "missing-name-or-path"
+      };
+    }
+    return {
+      kind: "resolved",
+      rawSource,
+      target: { name },
+      routeNameKey: toPascalCaseRouteKey(trimmed),
+      paramKeys
+    };
   }
   if (path2) {
-    return { path: path2, params };
+    return {
+      kind: "resolved",
+      rawSource,
+      target: { path: path2 },
+      routeNameKey: null,
+      paramKeys
+    };
   }
-  return null;
-}
-function toDirectiveObjectFieldNameValue$1(toDirective) {
-  const to = getRouteLocationLikeFromToDirective(toDirective);
-  if (!to || typeof to === "string")
-    return null;
-  const name = to.name;
-  if (typeof name !== "string")
-    return null;
-  const trimmed = name.trim();
-  if (!trimmed.length)
-    return null;
-  return toPascalCaseRouteKey(trimmed);
-}
-function getRouteNameKeyFromToDirective(toDirective) {
-  const objectName = toDirectiveObjectFieldNameValue$1(toDirective);
-  if (objectName)
-    return objectName;
-  return null;
+  return {
+    kind: "unsupported",
+    rawSource,
+    reason: "missing-name-or-path"
+  };
 }
 function tryResolveToDirectiveTargetComponentName(toDirective) {
-  const to = getRouteLocationLikeFromToDirective(toDirective);
-  if (to && resolveToComponentName) {
-    const resolved = resolveToComponentName(to);
+  const analysis = analyzeToDirectiveTarget(toDirective);
+  if (analysis.kind === "resolved" && resolveToComponentName) {
+    const resolved = resolveToComponentName(materializeResolvedRouteTarget(analysis.target, analysis.paramKeys));
     if (resolved)
       return resolved;
   }
-  const key = getRouteNameKeyFromToDirective(toDirective);
-  if (!key || !routeNameToComponentName)
+  if (analysis.kind !== "resolved" || !analysis.routeNameKey || !routeNameToComponentName)
     return null;
-  return routeNameToComponentName.get(key) ?? null;
+  return routeNameToComponentName.get(analysis.routeNameKey) ?? null;
 }
 function getDataTestIdFromGroupOption(text) {
   return text.replace(/[-_]/g, " ").split(" ").filter((a) => a).map((str) => {
@@ -835,11 +1191,81 @@ function staticAttributeValue(value) {
   return { kind: "static", value };
 }
 function templateAttributeValue(template) {
-  return { kind: "template", template };
+  const parsedTemplate = tryParseTemplateFragment(template);
+  if (!parsedTemplate) {
+    throw new Error(`[vue-pom-generator] Failed to parse generated template fragment: ${template}`);
+  }
+  return { kind: "template", template, parsedTemplate };
 }
 function getAttributeValueText(value) {
   return value.kind === "static" ? value.value : value.template;
 }
+function getVueExpressionSource(expression, ...preferredViews) {
+  if (!expression) {
+    return "";
+  }
+  for (const view of preferredViews) {
+    let value = "";
+    switch (view) {
+      case "content":
+        value = expression.type === NodeTypes.SIMPLE_EXPRESSION ? expression.content : "";
+        break;
+      case "loc":
+        value = expression.loc?.source ?? "";
+        break;
+      case "compiled":
+        try {
+          value = stringifyExpression(expression);
+        } catch {
+          value = "";
+        }
+        break;
+      default:
+        value = "";
+        break;
+    }
+    const trimmed = value.trim();
+    if (trimmed) {
+      return trimmed;
+    }
+  }
+  return "";
+}
+function tryGetExistingVueExpressionAst(expression) {
+  if (!expression) {
+    return null;
+  }
+  const ast = "ast" in expression ? expression.ast : null;
+  return ast && "type" in ast ? ast : null;
+}
+function tryParseBabelExpressionFromSource(source, plugins) {
+  const trimmed = source.trim();
+  if (!trimmed) {
+    return null;
+  }
+  try {
+    return parseExpression(trimmed, { plugins });
+  } catch {
+    return null;
+  }
+}
+function tryGetVueExpressionAst(expression, options) {
+  if (!expression) {
+    return null;
+  }
+  if (options?.preferExistingAst !== false) {
+    const existingAst = tryGetExistingVueExpressionAst(expression);
+    if (existingAst) {
+      return existingAst;
+    }
+  }
+  const source = getVueExpressionSource(expression, ...options?.preferredViews ?? ["content", "loc", "compiled"]);
+  return source ? tryParseBabelExpressionFromSource(source, options?.plugins ?? ["typescript"]) : null;
+}
+function tryGetDirectiveBabelAst(directive, options) {
+  const exp = directive.exp && (directive.exp.type === NodeTypes.SIMPLE_EXPRESSION || directive.exp.type === NodeTypes.COMPOUND_EXPRESSION) ? directive.exp : null;
+  return tryGetVueExpressionAst(exp, options);
+}
 function toPascalCase(str) {
   const cleaned = (str ?? "").replace(/\$\{[^}]*\}/g, " ").replace(/[^a-z0-9]+/gi, " ").trim();
   if (!cleaned) {
@@ -881,32 +1307,14 @@ function tryGetClickDirective(node) {
 function nodeHasClickDirective(node) {
   return tryGetClickDirective(node) !== void 0;
 }
-function getTemplateSlotScope(node) {
+function findTemplateSlotScopeExpression(node) {
   if (node.tag !== "template") {
     return null;
   }
   const slotProp = node.props.find((prop) => {
     return prop.type === NodeTypes.DIRECTIVE && prop.name === "slot";
   });
-  if (slotProp?.exp) {
-    if (slotProp.exp.type === NodeTypes.SIMPLE_EXPRESSION) {
-      return slotProp.exp.content;
-    }
-    if (slotProp.exp.type === NodeTypes.COMPOUND_EXPRESSION) {
-      return stringifyExpression(slotProp.exp);
-    }
-  }
-  return null;
-}
-function isSimpleScopeIdentifier(value) {
-  if (!value) {
-    return false;
-  }
-  try {
-    return isIdentifier(parseExpression(value, { plugins: ["typescript"] }));
-  } catch {
-    return false;
-  }
+  return slotProp?.exp && (slotProp.exp.type === NodeTypes.SIMPLE_EXPRESSION || slotProp.exp.type === NodeTypes.COMPOUND_EXPRESSION) ? slotProp.exp : null;
 }
 function buildSlotScopeFallbackKeyExpression(identifier) {
   return `${identifier}.key ?? ${identifier}.data?.id ?? ${identifier}.id ?? ${identifier}.value ?? ${identifier}`;
@@ -1008,43 +1416,64 @@ function tryGetSlotScopeKeyCandidate(node) {
   }
   return best;
 }
-function tryGetTemplateSlotScopeKeyExpression(scope) {
-  const trimmed = scope.trim();
-  if (!trimmed) {
+function tryGetTemplateSlotScopeBindingNode(expression) {
+  const ast = tryGetExistingVueExpressionAst(expression);
+  if (ast) {
+    if (isArrowFunctionExpression(ast)) {
+      return ast.params[0] ?? null;
+    }
+    return ast;
+  }
+  const rawSource = getVueExpressionSource(expression, "content", "loc", "compiled");
+  if (!rawSource) {
     return null;
   }
-  if (isSimpleScopeIdentifier(trimmed)) {
-    return buildSlotScopeFallbackKeyExpression(trimmed);
+  try {
+    return parseExpression(rawSource, { plugins: ["typescript"] });
+  } catch {
   }
   try {
-    const parsed = parse(`(${trimmed}) => {}`, {
+    const parsed = parse(`(${rawSource}) => {}`, {
       sourceType: "module",
       plugins: ["typescript"]
     });
     const statement = parsed.program.body[0];
     if (statement && isExpressionStatement(statement) && isArrowFunctionExpression(statement.expression)) {
-      return tryGetSlotScopeKeyCandidate(statement.expression.params[0])?.expression ?? null;
+      return statement.expression.params[0] ?? null;
     }
   } catch {
+    return null;
   }
-  if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
-    const inner = trimmed.slice(1, -1).trim();
-    let cutIdx = -1;
-    const commaIdx = inner.indexOf(",");
-    const colonIdx = inner.indexOf(":");
-    if (commaIdx !== -1 && colonIdx !== -1) {
-      cutIdx = Math.min(commaIdx, colonIdx);
-    } else if (commaIdx !== -1) {
-      cutIdx = commaIdx;
-    } else if (colonIdx !== -1) {
-      cutIdx = colonIdx;
-    }
-    const first = (cutIdx === -1 ? inner : inner.slice(0, cutIdx)).trim();
-    if (first && isSimpleScopeIdentifier(first)) {
-      return buildSlotScopeFallbackKeyExpression(first);
-    }
+  return null;
+}
+function toResolvedTemplateFragment(source) {
+  const templateLiteral = tryUnwrapTemplateLiteralSource(source);
+  if (templateLiteral) {
+    return {
+      template: templateLiteral.template,
+      rawExpression: null
+    };
   }
-  return trimmed;
+  return toInterpolatedTemplateFragment(source);
+}
+function toResolvedKeyInfo(selectorSource, runtimeSource = selectorSource) {
+  const selectorFragment = selectorSource ? toResolvedTemplateFragment(selectorSource) : null;
+  const runtimeFragment = runtimeSource ? toResolvedTemplateFragment(runtimeSource) : null;
+  const selectorTemplate = selectorFragment?.template ?? runtimeFragment?.template ?? null;
+  const runtimeTemplate = runtimeFragment?.template ?? selectorFragment?.template ?? null;
+  if (!selectorTemplate || !runtimeTemplate) {
+    return null;
+  }
+  return {
+    selectorFragment: selectorTemplate,
+    runtimeFragment: runtimeTemplate,
+    rawExpression: runtimeFragment?.rawExpression ?? selectorFragment?.rawExpression ?? null
+  };
+}
+function tryGetTemplateSlotScopeKeyInfo(expression) {
+  const bindingNode = tryGetTemplateSlotScopeBindingNode(expression);
+  const candidateExpression = bindingNode ? tryGetSlotScopeKeyCandidate(bindingNode)?.expression ?? null : null;
+  return candidateExpression ? toResolvedKeyInfo(candidateExpression) : null;
 }
 function nodeHasToDirective(node) {
   const toDirective = findDirectiveByName(node, "bind", "to");
@@ -1053,51 +1482,160 @@ function nodeHasToDirective(node) {
   }
   return void 0;
 }
-function nodeHasForDirective(node) {
-  return node.props.some(
-    (attr) => attr.type === NodeTypes.DIRECTIVE && attr.name === "for"
-  );
-}
 function getKeyDirective(node) {
   return findDirectiveByName(node, "bind", "key") ?? null;
 }
-function getKeyDirectiveValue(node, _context = null) {
-  const keyDirective = getKeyDirective(node);
-  const rawSource = keyDirective?.exp?.loc.source?.trim();
-  if (rawSource) {
-    return `\${${rawSource}}`;
+function tryUnwrapTemplateLiteralSource(source) {
+  const rawSource = source.trim();
+  if (!rawSource) {
+    return null;
   }
-  if (keyDirective?.exp) {
-    const value = stringifyExpression(keyDirective.exp);
-    if (value)
-      return `\${${value}}`;
+  let ast = null;
+  try {
+    ast = parseExpression(rawSource, { plugins: ["typescript"] });
+  } catch {
+    return null;
   }
-  return null;
+  if (!ast || !isTemplateLiteral(ast)) {
+    return null;
+  }
+  const cooked = ast.quasis.map((quasi) => quasi.value.cooked ?? "").join("");
+  try {
+    const start = typeof ast.start === "number" ? ast.start + 1 : 1;
+    const end = typeof ast.end === "number" ? ast.end - 1 : rawSource.length - 1;
+    return {
+      template: rawSource.slice(start, end) || cooked,
+      expressionCount: ast.expressions.length
+    };
+  } catch {
+    return {
+      template: cooked,
+      expressionCount: ast.expressions.length
+    };
+  }
+}
+function tryUnwrapTemplateLiteralExpressionSource(expression) {
+  const rawSource = getVueExpressionSource(expression, "loc", "compiled");
+  return rawSource ? tryUnwrapTemplateLiteralSource(rawSource) : null;
+}
+function tryParseTemplateFragment(fragment) {
+  if (!fragment) {
+    return null;
+  }
+  try {
+    const source = `\`${fragment}\``;
+    const ast = parseExpression(source, { plugins: ["typescript"] });
+    return isTemplateLiteral(ast) ? { source, templateLiteral: ast } : null;
+  } catch {
+    return null;
+  }
+}
+function getTemplateExpressionSource(parsedTemplate, index) {
+  const expression = parsedTemplate.templateLiteral.expressions[index];
+  if (!expression) {
+    return null;
+  }
+  const start = typeof expression.start === "number" ? expression.start : null;
+  const end = typeof expression.end === "number" ? expression.end : null;
+  if (start === null || end === null) {
+    return null;
+  }
+  return parsedTemplate.source.slice(start, end);
+}
+function getSingleExpressionTemplateFragment(parsedTemplate) {
+  const { templateLiteral } = parsedTemplate;
+  if (templateLiteral.expressions.length !== 1 || templateLiteral.quasis.length !== 2) {
+    return null;
+  }
+  const expressionSource = getTemplateExpressionSource(parsedTemplate, 0);
+  if (expressionSource === null) {
+    return null;
+  }
+  return {
+    prefix: templateLiteral.quasis[0]?.value.raw ?? "",
+    expressionSource,
+    suffix: templateLiteral.quasis[1]?.value.raw ?? ""
+  };
+}
+function templateFragmentContainsSingleExpression(container, candidate) {
+  const containerFragment = getSingleExpressionTemplateFragment(container);
+  const candidateFragment = getSingleExpressionTemplateFragment(candidate);
+  if (!containerFragment || !candidateFragment) {
+    return false;
+  }
+  return containerFragment.expressionSource === candidateFragment.expressionSource && containerFragment.prefix.endsWith(candidateFragment.prefix) && containerFragment.suffix.startsWith(candidateFragment.suffix);
+}
+function hasTemplateInterpolationExpressions(fragment) {
+  return (tryParseTemplateFragment(fragment)?.templateLiteral.expressions.length ?? 0) > 0;
+}
+function toInterpolatedTemplateFragment(fragment) {
+  if (!fragment) {
+    return null;
+  }
+  if (hasTemplateInterpolationExpressions(fragment)) {
+    return { template: fragment, rawExpression: null };
+  }
+  return {
+    template: `\${${fragment}}`,
+    rawExpression: fragment
+  };
+}
+function renderTemplateLiteralExpression(templateValue) {
+  const templateLiteralSource = templateValue.parsedTemplate.source;
+  const templateLiteral = templateValue.parsedTemplate.templateLiteral;
+  const writer = createTypeScriptWriter();
+  writer.write("`");
+  for (let i = 0; i < templateLiteral.quasis.length; i += 1) {
+    writer.write(templateLiteral.quasis[i]?.value.raw ?? "");
+    const interpolation = templateLiteral.expressions[i];
+    if (!interpolation) {
+      continue;
+    }
+    const start = typeof interpolation.start === "number" ? interpolation.start : null;
+    const end = typeof interpolation.end === "number" ? interpolation.end : null;
+    if (start === null || end === null) {
+      return templateLiteralSource;
+    }
+    writer.write("${");
+    writer.write(templateLiteralSource.slice(start, end));
+    writer.write("}");
+  }
+  writer.write("`");
+  return writer.toString();
+}
+function getKeyDirectiveExpression(node) {
+  const keyDirective = getKeyDirective(node);
+  return keyDirective?.exp && (keyDirective.exp.type === NodeTypes.SIMPLE_EXPRESSION || keyDirective.exp.type === NodeTypes.COMPOUND_EXPRESSION) ? keyDirective.exp : null;
+}
+function getKeyDirectiveInfo(node) {
+  const keyExpression = getKeyDirectiveExpression(node);
+  if (!keyExpression) {
+    return null;
+  }
+  const selectorSource = getVueExpressionSource(keyExpression, "compiled", "loc");
+  const runtimeSource = getVueExpressionSource(keyExpression, "loc", "compiled");
+  return toResolvedKeyInfo(selectorSource, runtimeSource);
 }
 function getModelBindingValues(node) {
   let vModel = "";
   const vModelDirective = findDirectiveByName(node, "model");
-  if (vModelDirective?.exp?.loc.source) {
-    vModel = toPascalCase(vModelDirective.exp.loc.source);
+  if (vModelDirective?.exp && (vModelDirective.exp.type === NodeTypes.SIMPLE_EXPRESSION || vModelDirective.exp.type === NodeTypes.COMPOUND_EXPRESSION)) {
+    vModel = toPascalCase(getVueExpressionSource(vModelDirective.exp, "loc", "content"));
   }
   let modelValue = null;
   const modelValueDirective = findDirectiveByName(node, "bind", "modelValue");
-  if (modelValueDirective?.exp?.ast) {
-    const { name: mv } = getClickHandlerNameFromAst(modelValueDirective.exp.ast);
+  const modelValueAst = modelValueDirective ? tryGetDirectiveBabelAst(modelValueDirective, {
+    preferredViews: ["loc", "compiled"],
+    plugins: ["typescript"],
+    preferExistingAst: false
+  }) : null;
+  if (modelValueAst) {
+    const { name: mv } = getClickHandlerNameFromAst(modelValueAst);
     modelValue = mv;
   }
   return { vModel, modelValue };
 }
-function getSelfClosingForDirectiveKeyAttrValue(node) {
-  if (node.isSelfClosing) {
-    const hasForDirective = nodeHasForDirective(node);
-    if (hasForDirective) {
-      return getKeyDirectiveValue(node);
-    }
-  }
-  return null;
-}
-function getIdOrName(node) {
+function getStaticIdOrNameHint(node) {
   let idAttr = findAttributeByKey(node, "id");
   if (!idAttr) {
     idAttr = findAttributeByKey(node, "name");
@@ -1105,8 +1643,9 @@ function getIdOrName(node) {
   let identifier = idAttr?.value?.content ?? "";
   if (!identifier) {
     const dynamicIdAttr = findDirectiveByName(node, "bind", "id");
-    if (dynamicIdAttr?.exp) {
-      identifier = `\${someUniqueValueToDifferentiateInstanceFromOthersOnPageUsuallyAnId}`;
+    const dynamicNameAttr = findDirectiveByName(node, "bind", "name");
+    if (dynamicIdAttr?.exp || dynamicNameAttr?.exp) {
+      return "";
     }
   }
   if (identifier.includes("-")) {
@@ -1117,20 +1656,20 @@ function getIdOrName(node) {
   }
   return identifier;
 }
-function getContainedInSlotDataKeyValue(node, hierarchyMap2) {
+function getContainedInSlotDataKeyInfo(node, hierarchyMap2) {
   let parent = getParent(hierarchyMap2, node);
   while (parent) {
     if (parent.type === NodeTypes.ELEMENT && parent.tag === "template") {
-      const scope = getTemplateSlotScope(parent);
-      if (scope) {
-        return tryGetTemplateSlotScopeKeyExpression(scope);
+      const slotScopeExpression = findTemplateSlotScopeExpression(parent);
+      if (slotScopeExpression) {
+        return tryGetTemplateSlotScopeKeyInfo(slotScopeExpression);
       }
     }
     parent = getParent(hierarchyMap2, parent);
   }
   return null;
 }
-function getContainedInVForDirectiveKeyValue(context, node, hierarchyMap2) {
+function getContainedInVForDirectiveKeyInfo(context, node, hierarchyMap2) {
   if (!context.scopes.vFor || context.scopes.vFor === 0) {
     return null;
   }
@@ -1139,8 +1678,7 @@ function getContainedInVForDirectiveKeyValue(context, node, hierarchyMap2) {
     if (parent.type === NodeTypes.ELEMENT) {
       const forDirective = findDirectiveByName(parent, "for");
       if (forDirective) {
-        const keyValue = getKeyDirectiveValue(parent);
-        return keyValue;
+        return getKeyDirectiveInfo(parent);
       }
     }
     parent = getParent(hierarchyMap2, parent);
@@ -1166,13 +1704,7 @@ function tryGetContainedInStaticVForSourceLiteralValues(context, _node, _hierarc
   if (simpleSourceExp.constType === ConstantTypes.NOT_CONSTANT) {
     return null;
   }
-  const iterableRaw = (() => {
-    try {
-      return stringifyExpression(simpleSourceExp).trim();
-    } catch {
-      return (simpleSourceExp.loc?.source ?? "").trim();
-    }
-  })();
+  const iterableRaw = getVueExpressionSource(simpleSourceExp, "compiled", "loc");
   if (!iterableRaw) {
     return null;
   }
@@ -1228,91 +1760,95 @@ function nodeHandlerAttributeInfo(node) {
     return null;
   }
   const exp = handlerDirective.exp;
-  const source = (exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : stringifyExpression(exp)).trim();
+  const source = getVueExpressionSource(exp, "content", "compiled");
   if (!source) {
     return null;
   }
   const mergeKey = `handler:expr:${source}`;
-  let expr;
-  try {
-    expr = parseExpression(source, { plugins: ["typescript", "jsx"] });
-  } catch {
+  const expr = tryGetDirectiveBabelAst(handlerDirective, {
+    preferredViews: ["content", "compiled"],
+    plugins: ["typescript", "jsx"],
+    // Vue's compiler AST can encode `_ctx.foo` as an Identifier name instead of a MemberExpression.
+    // That is fine for Vue codegen, but our semantic-name extraction needs a normal Babel parse tree.
+    preferExistingAst: false
+  });
+  if (!expr) {
     return null;
   }
-  const isNodeType = (node2, type) => {
+  const isNodeType2 = (node2, type) => {
     return node2 !== null && node2.type === type;
   };
-  const isIdentifierNode = (node2) => {
-    return isNodeType(node2, "Identifier") && typeof node2.name === "string";
+  const isIdentifierNode2 = (node2) => {
+    return isNodeType2(node2, "Identifier") && typeof node2.name === "string";
   };
-  const isStringLiteralNode = (node2) => {
-    return isNodeType(node2, "StringLiteral") && typeof node2.value === "string";
+  const isStringLiteralNode2 = (node2) => {
+    return isNodeType2(node2, "StringLiteral") && typeof node2.value === "string";
   };
   const isBooleanLiteralNode = (node2) => {
-    return isNodeType(node2, "BooleanLiteral") && typeof node2.value === "boolean";
+    return isNodeType2(node2, "BooleanLiteral") && typeof node2.value === "boolean";
   };
   const isNumericLiteralNode = (node2) => {
-    return isNodeType(node2, "NumericLiteral") && typeof node2.value === "number";
+    return isNodeType2(node2, "NumericLiteral") && typeof node2.value === "number";
   };
   const isNullLiteralNode = (node2) => {
-    return isNodeType(node2, "NullLiteral");
+    return isNodeType2(node2, "NullLiteral");
   };
   const isMemberExpressionNode = (node2) => {
-    if (!isNodeType(node2, "MemberExpression"))
+    if (!isNodeType2(node2, "MemberExpression"))
       return false;
     const n = node2;
     return typeof n.computed === "boolean" && typeof n.object === "object" && n.object !== null && typeof n.property === "object" && n.property !== null;
   };
   const isCallExpressionNode = (node2) => {
-    if (!isNodeType(node2, "CallExpression"))
+    if (!isNodeType2(node2, "CallExpression"))
       return false;
     const n = node2;
     return typeof n.callee === "object" && n.callee !== null && Array.isArray(n.arguments);
   };
   const isAwaitExpressionNode = (node2) => {
-    if (!isNodeType(node2, "AwaitExpression"))
+    if (!isNodeType2(node2, "AwaitExpression"))
       return false;
     const n = node2;
     return typeof n.argument === "object" && n.argument !== null;
   };
   const isAssignmentExpressionNode = (node2) => {
-    if (!isNodeType(node2, "AssignmentExpression"))
+    if (!isNodeType2(node2, "AssignmentExpression"))
       return false;
     const n = node2;
     return typeof n.left === "object" && n.left !== null && typeof n.right === "object" && n.right !== null;
   };
   const isArrowFunctionExpressionNode = (node2) => {
-    if (!isNodeType(node2, "ArrowFunctionExpression"))
+    if (!isNodeType2(node2, "ArrowFunctionExpression"))
       return false;
     const n = node2;
     return typeof n.body === "object" && n.body !== null;
   };
   const isBlockStatementNode = (node2) => {
-    if (!isNodeType(node2, "BlockStatement"))
+    if (!isNodeType2(node2, "BlockStatement"))
       return false;
     const n = node2;
     return Array.isArray(n.body);
   };
   const isExpressionStatementNode = (node2) => {
-    if (!isNodeType(node2, "ExpressionStatement"))
+    if (!isNodeType2(node2, "ExpressionStatement"))
       return false;
     const n = node2;
     return typeof n.expression === "object" && n.expression !== null;
   };
   const isReturnStatementNode = (node2) => {
-    if (!isNodeType(node2, "ReturnStatement"))
+    if (!isNodeType2(node2, "ReturnStatement"))
       return false;
     const n = node2;
     return typeof n.argument === "object" || n.argument === null;
   };
-  const isObjectExpressionNode = (node2) => {
-    if (!isNodeType(node2, "ObjectExpression"))
+  const isObjectExpressionNode2 = (node2) => {
+    if (!isNodeType2(node2, "ObjectExpression"))
       return false;
     const n = node2;
     return Array.isArray(n.properties);
   };
-  const isObjectPropertyNode = (node2) => {
-    if (!isNodeType(node2, "ObjectProperty"))
+  const isObjectPropertyNode2 = (node2) => {
+    if (!isNodeType2(node2, "ObjectProperty"))
       return false;
     const n = node2;
     return typeof n.computed === "boolean" && typeof n.key === "object" && n.key !== null && typeof n.value === "object" && n.value !== null;
@@ -1320,16 +1856,16 @@ function nodeHandlerAttributeInfo(node) {
   const getLastIdentifierFromMemberChain = (node2) => {
     if (!node2)
       return null;
-    if (isIdentifierNode(node2))
+    if (isIdentifierNode2(node2))
       return node2.name;
     if (isMemberExpressionNode(node2)) {
       const prop = node2.property;
       if (node2.computed === false) {
-        if (isIdentifierNode(prop))
+        if (isIdentifierNode2(prop))
           return prop.name;
       }
       if (node2.computed === true) {
-        if (isStringLiteralNode(prop))
+        if (isStringLiteralNode2(prop))
           return prop.value;
       }
     }
@@ -1339,7 +1875,7 @@ function nodeHandlerAttributeInfo(node) {
     if (!node2) {
       return null;
     }
-    if (isIdentifierNode(node2)) {
+    if (isIdentifierNode2(node2)) {
       return node2.name;
     }
     if (isMemberExpressionNode(node2)) {
@@ -1351,11 +1887,11 @@ function nodeHandlerAttributeInfo(node) {
     if (!lhs) {
       return null;
     }
-    if (isIdentifierNode(lhs)) {
+    if (isIdentifierNode2(lhs)) {
       return lhs.name;
     }
     if (isMemberExpressionNode(lhs)) {
-      if (lhs.computed === false && isIdentifierNode(lhs.property) && lhs.property.name === "value") {
+      if (lhs.computed === false && isIdentifierNode2(lhs.property) && lhs.property.name === "value") {
         return getLastIdentifierFromMemberChain(lhs.object);
       }
       return getLastIdentifierFromMemberChain(lhs);
@@ -1363,7 +1899,7 @@ function nodeHandlerAttributeInfo(node) {
     return null;
   };
   const isTemplateLiteralNode = (node2) => {
-    if (!isNodeType(node2, "TemplateLiteral")) {
+    if (!isNodeType2(node2, "TemplateLiteral")) {
       return false;
     }
     const n = node2;
@@ -1382,7 +1918,7 @@ function nodeHandlerAttributeInfo(node) {
     if (isNullLiteralNode(arg)) {
       return "Null";
     }
-    if (isStringLiteralNode(arg)) {
+    if (isStringLiteralNode2(arg)) {
       const cleaned = (arg.value ?? "").trim();
       if (!cleaned) {
         return null;
@@ -1408,7 +1944,7 @@ function nodeHandlerAttributeInfo(node) {
         return toPascalCase(stableName.slice(0, 24));
       }
     }
-    if (isIdentifierNode(arg)) {
+    if (isIdentifierNode2(arg)) {
       const firstChar = arg.name.charAt(0);
       const isUpperAlpha = firstChar !== "" && firstChar === firstChar.toUpperCase() && firstChar !== firstChar.toLowerCase();
       if (isUpperAlpha) {
@@ -1420,7 +1956,7 @@ function nodeHandlerAttributeInfo(node) {
   const getStableSuffixFromCall = (call) => {
     const args = call.arguments ?? [];
     const first = args.length > 0 ? args[0] : null;
-    if (!isObjectExpressionNode(first)) {
+    if (!isObjectExpressionNode2(first)) {
       const parts2 = [];
       for (const arg of args.slice(0, 4)) {
         const w = stableWordFromValue(arg ?? null);
@@ -1439,20 +1975,20 @@ function nodeHandlerAttributeInfo(node) {
     }
     const parts = [];
     for (const prop of first.properties ?? []) {
-      if (!isObjectPropertyNode(prop)) {
+      if (!isObjectPropertyNode2(prop)) {
         continue;
       }
       if (prop.computed) {
         continue;
       }
-      const keyName = isIdentifierNode(prop.key) ? prop.key.name : isStringLiteralNode(prop.key) ? prop.key.value : null;
+      const keyName = isIdentifierNode2(prop.key) ? prop.key.name : isStringLiteralNode2(prop.key) ? prop.key.value : null;
       if (!keyName) {
         continue;
       }
       let valueWord = null;
       if (isBooleanLiteralNode(prop.value)) {
         valueWord = prop.value.value ? "True" : "False";
-      } else if (isStringLiteralNode(prop.value)) {
+      } else if (isStringLiteralNode2(prop.value)) {
         const cleaned = (prop.value.value ?? "").trim();
         if (cleaned) {
           valueWord = toPascalCase(cleaned.slice(0, 24));
@@ -1581,13 +2117,18 @@ function getDataTestIdValueFromValueAttribute(node, actualFileName, attributeKey
     return staticAttributeValue(`${actualFileName}-${value}-${role}`);
   }
   const attrDynamic = findDirectiveByName(node, "bind", attributeKey);
-  if (attrDynamic && "exp" in attrDynamic && attrDynamic.exp && "ast" in attrDynamic.exp && attrDynamic.exp.ast) {
-    let value = attrDynamic.exp.loc.source;
-    if (attrDynamic.exp.ast?.type === "MemberExpression") {
+  const attrDynamicAst = attrDynamic ? tryGetDirectiveBabelAst(attrDynamic, {
+    preferredViews: ["loc", "compiled"],
+    plugins: ["typescript"],
+    preferExistingAst: false
+  }) : null;
+  if (attrDynamic?.exp && attrDynamicAst) {
+    let value = getVueExpressionSource(attrDynamic.exp, "loc", "compiled");
+    if (isMemberExpression(attrDynamicAst) || isOptionalMemberExpression(attrDynamicAst)) {
       return staticAttributeValue(`${actualFileName}-${value.replaceAll(".", "")}-${role}`);
     }
-    if (attrDynamic.exp.ast?.type === "CallExpression") {
-      value = stringifyExpression(attrDynamic.exp);
+    if (isCallExpression(attrDynamicAst) || isOptionalCallExpression(attrDynamicAst)) {
+      value = getVueExpressionSource(attrDynamic.exp, "compiled", "loc");
       return templateAttributeValue(`${actualFileName}-\${${value}}-${role}`);
     }
     return staticAttributeValue(`${actualFileName}-${value}-${role}`);
@@ -1595,16 +2136,16 @@ function getDataTestIdValueFromValueAttribute(node, actualFileName, attributeKey
   return null;
 }
 function generateToDirectiveDataTestId(componentName, node, toDirective, context, hierarchyMap2, nativeWrappers) {
-  const key = getKeyDirectiveValue(node, context) || getSelfClosingForDirectiveKeyAttrValue(node) || getContainedInVForDirectiveKeyValue(context, node, hierarchyMap2);
-  if (key) {
-    return templateAttributeValue(`${componentName}-${key}-${formatTagName(node, nativeWrappers)}`);
+  const keyInfo = getKeyDirectiveInfo(node) || getContainedInVForDirectiveKeyInfo(context, node, hierarchyMap2);
+  if (keyInfo) {
+    return templateAttributeValue(`${componentName}-${keyInfo.selectorFragment}-${formatTagName(node, nativeWrappers)}`);
   } else {
     let name = toDirectiveObjectFieldNameValue(toDirective);
     if (!name) {
       if (toDirective.exp == null) {
         return null;
       }
-      const source = stringifyExpression(toDirective.exp);
+      const source = getVueExpressionSource(toDirective.exp, "compiled", "loc");
       const toAst = toDirective.exp.ast;
       const interpolated = toAst !== void 0 && toAst !== null && toAst !== false && isTemplateLiteral(toAst);
       return templateAttributeValue(`${componentName}-\${${source}${interpolated ? ".replaceAll(' ', '')" : "?.name?.replaceAll(' ', '') ?? ''"}}${formatTagName(node, nativeWrappers)}`);
@@ -1628,44 +2169,46 @@ function toDirectiveObjectFieldNameValue(node) {
   if (!node.exp || node.exp.type !== NodeTypes.COMPOUND_EXPRESSION && node.exp.type !== NodeTypes.SIMPLE_EXPRESSION) {
     return null;
   }
-  const source = node.exp.loc.source.trim();
-  try {
-    const expr = parseExpression(source, { plugins: ["typescript"] });
-    const isNodeType = (n, type) => {
-      return n !== null && n.type === type;
-    };
-    const isStringLiteralNode = (n) => {
-      return isNodeType(n, "StringLiteral") && typeof n.value === "string";
-    };
-    const isIdentifierNode = (n) => {
-      return isNodeType(n, "Identifier") && typeof n.name === "string";
-    };
-    const isObjectPropertyNode = (n) => {
-      if (!isNodeType(n, "ObjectProperty"))
-        return false;
-      const nn = n;
-      return typeof nn.key === "object" && nn.key !== null && typeof nn.value === "object" && nn.value !== null;
-    };
-    const isObjectExpressionNode = (n) => {
-      if (!isNodeType(n, "ObjectExpression"))
-        return false;
-      const nn = n;
-      return Array.isArray(nn.properties);
-    };
-    if (!isObjectExpressionNode(expr))
-      return null;
-    const nameProp = expr.properties.find((p) => {
-      if (!isObjectPropertyNode(p))
-        return false;
-      const key = p.key;
-      return isIdentifierNode(key) && key.name === "name" || isStringLiteralNode(key) && key.value === "name";
-    });
-    if (!nameProp || !isObjectPropertyNode(nameProp) || !isStringLiteralNode(nameProp.value))
-      return null;
-    return toPascalCase(nameProp.value.value);
-  } catch {
+  const expr = tryGetDirectiveBabelAst(node, {
+    preferredViews: ["loc", "compiled"],
+    plugins: ["typescript"],
+    preferExistingAst: false
+  });
+  if (!expr) {
     return null;
   }
+  const isNodeType2 = (n, type) => {
+    return n !== null && n.type === type;
+  };
+  const isStringLiteralNode2 = (n) => {
+    return isNodeType2(n, "StringLiteral") && typeof n.value === "string";
+  };
+  const isIdentifierNode2 = (n) => {
+    return isNodeType2(n, "Identifier") && typeof n.name === "string";
+  };
+  const isObjectPropertyNode2 = (n) => {
+    if (!isNodeType2(n, "ObjectProperty"))
+      return false;
+    const nn = n;
+    return typeof nn.key === "object" && nn.key !== null && typeof nn.value === "object" && nn.value !== null;
+  };
+  const isObjectExpressionNode2 = (n) => {
+    if (!isNodeType2(n, "ObjectExpression"))
+      return false;
+    const nn = n;
+    return Array.isArray(nn.properties);
+  };
+  if (!isObjectExpressionNode2(expr))
+    return null;
+  const nameProp = expr.properties.find((p) => {
+    if (!isObjectPropertyNode2(p))
+      return false;
+    const key = p.key;
+    return isIdentifierNode2(key) && key.name === "name" || isStringLiteralNode2(key) && key.value === "name";
+  });
+  if (!nameProp || !isObjectPropertyNode2(nameProp) || !isStringLiteralNode2(nameProp.value))
+    return null;
+  return toPascalCase(nameProp.value.value);
 }
 function getComposedClickHandlerContent(node, _context, innerText, clickDirective, _options = {}) {
   const click = clickDirective ?? tryGetClickDirective(node);
@@ -1675,7 +2218,7 @@ function getComposedClickHandlerContent(node, _context, innerText, clickDirectiv
   let handlerName = "";
   if (click.exp) {
     const exp = click.exp;
-    const source = (exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : stringifyExpression(exp)).trim();
+    const source = getVueExpressionSource(exp, "content", "compiled");
     if (source) {
       const parsed = tryParseBabelAstFromHandlerSource(source);
       if (parsed) {
@@ -1696,9 +2239,9 @@ function tryParseBabelAstFromHandlerSource(source) {
   const trimmed = source.trim();
   if (!trimmed)
     return null;
-  try {
-    return parseExpression(trimmed, { plugins: ["typescript", "jsx"] });
-  } catch {
+  const expressionAst = tryParseBabelExpressionFromSource(trimmed, ["typescript", "jsx"]);
+  if (expressionAst) {
+    return expressionAst;
   }
   try {
     return parse(trimmed, { sourceType: "module", plugins: ["typescript", "jsx"] });
@@ -2037,23 +2580,24 @@ function tryGetExistingElementDataTestId(node, attributeName = "data-testid") {
     return null;
   }
   const simpleExp = exp;
-  const ast = simpleExp.ast;
-  if (ast && typeof ast === "object" && "type" in ast && ast.type === "TemplateLiteral") {
-    const tl = ast;
-    const cooked = (tl.quasis ?? []).map((q) => q.value?.cooked ?? "").join("");
-    const expressionCount = (tl.expressions ?? []).length;
-    const isStatic = expressionCount === 0;
-    const raw2 = (simpleExp.content ?? "").trim();
-    const unwrappedTemplate = raw2.startsWith("`") && raw2.endsWith("`") && raw2.length >= 2 ? raw2.slice(1, -1) : cooked;
+  const ast = tryGetVueExpressionAst(simpleExp, {
+    preferredViews: ["content", "loc", "compiled"],
+    plugins: ["typescript"]
+  });
+  const unwrappedTemplateLiteral = tryUnwrapTemplateLiteralExpressionSource(simpleExp);
+  if (unwrappedTemplateLiteral) {
+    const isStatic = unwrappedTemplateLiteral.expressionCount === 0;
     if (isStatic) {
-      return { value: unwrappedTemplate, isDynamic: false, isStaticLiteral: true };
+      return { value: unwrappedTemplateLiteral.template, isDynamic: false, isStaticLiteral: true };
     }
+    const templateValue = templateAttributeValue(unwrappedTemplateLiteral.template);
     return {
-      value: unwrappedTemplate,
+      value: templateValue.template,
       isDynamic: true,
       isStaticLiteral: false,
-      template: unwrappedTemplate,
-      templateExpressionCount: expressionCount
+      template: templateValue.template,
+      parsedTemplate: templateValue.parsedTemplate,
+      templateExpressionCount: unwrappedTemplateLiteral.expressionCount
     };
   }
   if (ast && typeof ast === "object" && "type" in ast && ast.type === "StringLiteral") {
@@ -2066,11 +2610,13 @@ function tryGetExistingElementDataTestId(node, attributeName = "data-testid") {
   }
   const preservableReference = tryGetPreservableDynamicReferenceExpression(ast);
   if (preservableReference) {
+    const templateValue = templateAttributeValue(`\${${preservableReference}}`);
     return {
       value: preservableReference,
       isDynamic: true,
       isStaticLiteral: false,
-      template: `\${${preservableReference}}`,
+      template: templateValue.template,
+      parsedTemplate: templateValue.parsedTemplate,
       templateExpressionCount: 1,
       rawExpression: preservableReference
     };
@@ -2079,46 +2625,12 @@ function tryGetExistingElementDataTestId(node, attributeName = "data-testid") {
   if (!raw) {
     return null;
   }
-  try {
-    const ast2 = parseExpression(raw, { plugins: ["typescript"] });
-    if (ast2 && typeof ast2 === "object" && "type" in ast2 && ast2.type === "TemplateLiteral") {
-      const tl = ast2;
-      const cooked = (tl.quasis ?? []).map((q) => q.value?.cooked ?? "").join("");
-      const expressionCount = (tl.expressions ?? []).length;
-      const isStatic = expressionCount === 0;
-      const unwrappedTemplate = raw.startsWith("`") && raw.endsWith("`") && raw.length >= 2 ? raw.slice(1, -1) : cooked;
-      if (isStatic) {
-        return { value: unwrappedTemplate, isDynamic: false, isStaticLiteral: true };
-      }
-      return {
-        value: unwrappedTemplate,
-        isDynamic: true,
-        isStaticLiteral: false,
-        template: unwrappedTemplate,
-        templateExpressionCount: expressionCount
-      };
-    }
-    if (ast2 && typeof ast2 === "object" && "type" in ast2 && ast2.type === "StringLiteral") {
-      const sl = ast2;
-      return { value: sl.value ?? "", isDynamic: false, isStaticLiteral: true };
-    }
-    const preservableReference2 = tryGetPreservableDynamicReferenceExpression(ast2);
-    if (preservableReference2) {
-      return {
-        value: preservableReference2,
-        isDynamic: true,
-        isStaticLiteral: false,
-        template: `\${${preservableReference2}}`,
-        templateExpressionCount: 1,
-        rawExpression: preservableReference2
-      };
-    }
-  } catch {
-  }
   return { value: raw, isDynamic: true, isStaticLiteral: false, rawExpression: raw };
 }
 function isTemplatePlaceholder(part) {
-  return part.startsWith("${") && part.endsWith("}") && part.length >= 3;
+  const parsedTemplate = tryParseTemplateFragment(part);
+  const templateFragment = parsedTemplate ? getSingleExpressionTemplateFragment(parsedTemplate) : null;
+  return !!templateFragment && templateFragment.prefix === "" && templateFragment.suffix === "";
 }
 function isAllCapsOrDigits(value) {
   if (value.length <= 1) {
@@ -2171,33 +2683,14 @@ function safeMethodNameFromParts(parts) {
   }
   return name;
 }
-function replaceAllTemplateExpressionsWithKey(template) {
+function toPomKeyPattern(templateValue) {
+  const { templateLiteral } = templateValue.parsedTemplate;
   let out = "";
-  let i = 0;
-  while (i < template.length) {
-    const start = template.indexOf("${", i);
-    if (start < 0) {
-      out += template.slice(i);
-      break;
-    }
-    out += template.slice(i, start);
-    let depth = 1;
-    let j = start + 2;
-    while (j < template.length && depth > 0) {
-      if (template[j] === "{") {
-        depth++;
-      } else if (template[j] === "}") {
-        depth--;
-      }
-      j++;
-    }
-    const end = depth === 0 ? j - 1 : -1;
-    if (end < 0) {
-      out += template.slice(start);
-      break;
+  for (let i = 0; i < templateLiteral.quasis.length; i += 1) {
+    out += templateLiteral.quasis[i]?.value.raw ?? "";
+    if (templateLiteral.expressions[i]) {
+      out += "${key}";
     }
-    out += "${key}";
-    i = end + 1;
   }
   return out;
 }
@@ -2205,8 +2698,8 @@ function applyResolvedDataTestId(args) {
   const addHtmlAttribute = args.addHtmlAttribute ?? true;
   const entryOverrides = args.entryOverrides ?? {};
   const testIdAttribute = args.testIdAttribute ?? "data-testid";
-  const existingIdBehavior = args.existingIdBehavior ?? "preserve";
-  const nameCollisionBehavior = args.nameCollisionBehavior ?? "suffix";
+  const existingIdBehavior = args.existingIdBehavior ?? "error";
+  const nameCollisionBehavior = args.nameCollisionBehavior ?? "error";
   const warn = args.warn;
   const getBestKeyAccessCandidates = (expr) => {
     if (!expr) {
@@ -2215,7 +2708,10 @@ function applyResolvedDataTestId(args) {
     return splitNullishCoalescingExpression(expr);
   };
   let dataTestId = args.preferredGeneratedValue;
+  let runtimeDataTestId = args.preferredRuntimeValue ?? args.preferredGeneratedValue;
   let fromExisting = false;
+  const bestKeyPreservePlaceholder = args.keyInfo?.runtimeFragment ?? null;
+  const bestKeyVariable = args.keyInfo?.rawExpression ?? null;
   const existing = tryGetExistingElementDataTestId(args.element, testIdAttribute);
   if (existing) {
     const loc = args.element.loc?.start;
@@ -2236,8 +2732,10 @@ Bulk cleanup: run ESLint with the @immense/vue-pom-generator/remove-existing-tes
     if (existingIdBehavior === "preserve") {
       if (existing.isDynamic) {
         if (existing.template) {
-          const existingTemplate = existing.template;
-          if ((existing.templateExpressionCount ?? 0) !== 1) {
+          const existingTemplateValue = existing.parsedTemplate ? { kind: "template", template: existing.template, parsedTemplate: existing.parsedTemplate } : templateAttributeValue(existing.template);
+          const existingTemplateFragment = getSingleExpressionTemplateFragment(existingTemplateValue.parsedTemplate);
+          const requiredKeyTemplateValue = bestKeyPreservePlaceholder ? templateAttributeValue(bestKeyPreservePlaceholder) : null;
+          if ((existing.templateExpressionCount ?? 0) !== 1 || !existingTemplateFragment) {
             throw new Error(
               `[vue-pom-generator] Existing ${attrLabel} is a template literal with multiple interpolations and cannot be preserved safely.
 Component: ${args.componentName}
@@ -2247,20 +2745,21 @@ Existing ${attrLabel}: ${JSON.stringify(existing.value)}
 Fix: reduce the template to a single key-based interpolation, or remove the explicit ${attrLabel} so it can be auto-generated.`
             );
           }
-          const hasExact = args.bestKeyPlaceholder && existingTemplate.includes(args.bestKeyPlaceholder);
-          const hasVarAccess = getBestKeyAccessCandidates(args.bestKeyVariable).some((candidate) => existingTemplate.includes(candidate));
-          if (!hasExact && !hasVarAccess && args.bestKeyPlaceholder) {
+          const hasExact = requiredKeyTemplateValue ? templateFragmentContainsSingleExpression(existingTemplateValue.parsedTemplate, requiredKeyTemplateValue.parsedTemplate) : false;
+          const hasVarAccess = getBestKeyAccessCandidates(bestKeyVariable).some((candidate) => existingTemplateFragment.expressionSource === candidate);
+          if (!hasExact && !hasVarAccess && bestKeyPreservePlaceholder) {
             throw new Error(
               `[vue-pom-generator] Existing ${attrLabel} appears to be missing the key placeholder needed to keep it unique.
 Component: ${args.componentName}
 File: ${file}:${locationHint}
 Existing ${attrLabel}: ${JSON.stringify(existing.value)}
-Required placeholder: ${JSON.stringify(args.bestKeyPlaceholder)}${args.bestKeyVariable ? ` or an access on "${args.bestKeyVariable}"` : ""}
+Required placeholder: ${JSON.stringify(bestKeyPreservePlaceholder)}${bestKeyVariable ? ` or an access on "${bestKeyVariable}"` : ""}
 
-Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} template literal, or (2) remove the explicit ${attrLabel} so it can be auto-generated.`
+Fix: either (1) include ${bestKeyPreservePlaceholder} in your :${attrLabel} template literal, or (2) remove the explicit ${attrLabel} so it can be auto-generated.`
             );
           }
-          dataTestId = templateAttributeValue(existing.template);
+          dataTestId = existingTemplateValue;
+          runtimeDataTestId = existingTemplateValue;
           fromExisting = true;
         } else {
           throw new Error(
@@ -2274,18 +2773,19 @@ If you really need a computed id, do not set existingIdBehavior="preserve".`
           );
         }
       } else {
-        if (args.bestKeyPlaceholder && existing.isStaticLiteral) {
+        if (bestKeyPreservePlaceholder && existing.isStaticLiteral) {
           throw new Error(
             `[vue-pom-generator] Existing ${attrLabel} appears to be missing the key placeholder needed to keep it unique.
 Component: ${args.componentName}
 File: ${file}:${locationHint}
 Existing ${attrLabel}: ${JSON.stringify(existing.value)}
-Required placeholder: ${JSON.stringify(args.bestKeyPlaceholder)}${args.bestKeyVariable ? ` or an access on "${args.bestKeyVariable}"` : ""}
+Required placeholder: ${JSON.stringify(bestKeyPreservePlaceholder)}${bestKeyVariable ? ` or an access on "${bestKeyVariable}"` : ""}
 
-Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} template literal, or (2) remove the explicit ${attrLabel} so it can be auto-generated.`
+Fix: either (1) include ${bestKeyPreservePlaceholder} in your :${attrLabel} template literal, or (2) remove the explicit ${attrLabel} so it can be auto-generated.`
           );
         }
         dataTestId = staticAttributeValue(existing.value);
+        runtimeDataTestId = staticAttributeValue(existing.value);
         fromExisting = true;
       }
     }
@@ -2315,8 +2815,10 @@ Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} templat
   };
   const normalizedRole = normalizeNativeRole(args.nativeRole) ?? "button";
   const targetPageObjectModelClass = entryOverrides.targetPageObjectModelClass;
-  const formattedDataTestIdForPom = dataTestId.kind === "template" ? replaceAllTemplateExpressionsWithKey(dataTestId.template) : dataTestId.value;
-  const isKeyed = formattedDataTestIdForPom.includes("${key}");
+  const formattedDataTestIdForPom = dataTestId.kind === "template" ? toPomKeyPattern(dataTestId) : dataTestId.value;
+  const selectorPatternKind = dataTestId.kind === "template" ? "parameterized" : "static";
+  const selectorPattern = createPomStringPattern(formattedDataTestIdForPom, selectorPatternKind);
+  const selectorIsParameterized = selectorPatternKind === "parameterized";
   const deriveBaseMethodNameFromHint = (hint) => {
     const hintRaw = (hint ?? "").trim();
     const trimEdgeSeparators = (value) => {
@@ -2353,7 +2855,7 @@ Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} templat
     }
     return value.slice(0, idx) + value.slice(idx + "ByKey".length);
   };
-  const hasRoleSuffix = (baseName, roleSuffix) => {
+  const hasRoleSuffix2 = (baseName, roleSuffix) => {
     if (baseName.endsWith(roleSuffix)) {
       return true;
     }
@@ -2363,14 +2865,14 @@ Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} templat
   const getPrimaryGetterName = (primaryMethodName) => {
     const roleSuffix = upperFirst(normalizedRole || "Element");
     const baseName = upperFirst(primaryMethodName);
-    const propertyName = hasRoleSuffix(baseName, roleSuffix) ? baseName : `${baseName}${roleSuffix}`;
-    return isKeyed ? removeByKeySegment2(propertyName) : propertyName;
+    const propertyName = hasRoleSuffix2(baseName, roleSuffix) ? baseName : `${baseName}${roleSuffix}`;
+    return selectorIsParameterized ? removeByKeySegment2(propertyName) : propertyName;
   };
   const getPrimaryGetterNameCandidates = (primaryMethodName) => {
     const roleSuffix = upperFirst(normalizedRole || "Element");
     const baseName = upperFirst(primaryMethodName);
-    const propertyName = hasRoleSuffix(baseName, roleSuffix) ? baseName : `${baseName}${roleSuffix}`;
-    if (!isKeyed) {
+    const propertyName = hasRoleSuffix2(baseName, roleSuffix) ? baseName : `${baseName}${roleSuffix}`;
+    if (!selectorIsParameterized) {
       return { primary: propertyName };
     }
     const stripped = removeByKeySegment2(propertyName);
@@ -2432,11 +2934,11 @@ Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} templat
       return false;
     }
     const existingSelectors = [
-      existingPom.formattedDataTestId,
-      ...existingPom.alternateFormattedDataTestIds ?? []
+      existingPom.selector,
+      ...existingPom.alternateSelectors ?? []
     ];
-    const sharesSelectorIdentity = existingSelectors.includes(formattedDataTestIdForPom);
-    if (isKeyed && !sharesSelectorIdentity) {
+    const sharesSelectorIdentity = existingSelectors.some((existingSelector) => pomStringPatternEquals(existingSelector, selectorPattern));
+    if (selectorIsParameterized && !sharesSelectorIdentity) {
       return false;
     }
     if (!mergeKey && !sharesSelectorIdentity) {
@@ -2451,12 +2953,15 @@ Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} templat
     if ((existingEntry.targetPageObjectModelClass ?? null) !== (targetPageObjectModelClass ?? null)) {
       return false;
     }
-    if (existingPom.formattedDataTestId !== formattedDataTestIdForPom) {
-      existingPom.alternateFormattedDataTestIds ??= [];
-      if (!existingPom.alternateFormattedDataTestIds.includes(formattedDataTestIdForPom)) {
-        existingPom.alternateFormattedDataTestIds.push(formattedDataTestIdForPom);
+    if (!pomStringPatternEquals(existingPom.selector, selectorPattern)) {
+      existingPom.alternateSelectors ??= [];
+      if (!(existingPom.alternateSelectors ?? []).some((existingSelector) => pomStringPatternEquals(existingSelector, selectorPattern))) {
+        existingPom.alternateSelectors.push(selectorPattern);
       }
     }
+    if (selectorIsParameterized && !existingPom.parameters.some((param) => param.name === "key")) {
+      existingPom.parameters = [createPomParameterSpec("key", keyTypeFromValues), ...existingPom.parameters];
+    }
     return true;
   };
   let methodName = "";
@@ -2469,7 +2974,7 @@ Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} templat
     let suffix = 1;
     while (true) {
       const baseWithSuffix = suffix === 1 ? base : `${base}${suffix}`;
-      const candidate = isKeyed ? `${baseWithSuffix}ByKey` : baseWithSuffix;
+      const candidate = selectorIsParameterized ? `${baseWithSuffix}ByKey` : baseWithSuffix;
       const actionName = getPrimaryActionMethodName(candidate);
       const getterCandidates = getPrimaryGetterNameCandidates(candidate);
       let chosenGetterName = getterCandidates.primary;
@@ -2493,9 +2998,9 @@ Fix: either (1) include ${args.bestKeyPlaceholder} in your :${attrLabel} templat
       if (conflicts && nameCollisionBehavior === "error") {
         const roleSuffix = upperFirst(normalizedRole || "Element");
         const baseNameUpper = upperFirst(baseWithSuffix);
-        if (!hasRoleSuffix(baseNameUpper, roleSuffix)) {
+        if (!hasRoleSuffix2(baseNameUpper, roleSuffix)) {
           const baseWithRoleSuffix = `${baseWithSuffix}${roleSuffix}`;
-          const candidateWithRoleSuffix = isKeyed ? `${baseWithRoleSuffix}ByKey` : baseWithRoleSuffix;
+          const candidateWithRoleSuffix = selectorIsParameterized ? `${baseWithRoleSuffix}ByKey` : baseWithRoleSuffix;
           const actionNameWithRoleSuffix = getPrimaryActionMethodName(candidateWithRoleSuffix);
           const getterCandidatesWithRoleSuffix = getPrimaryGetterNameCandidates(candidateWithRoleSuffix);
           let chosenGetterNameWithRoleSuffix = getterCandidatesWithRoleSuffix.primary;
@@ -2563,51 +3068,46 @@ Conflicts: getter=${last.getterName}, method=${last.actionName}
 Fix: make the element identifiable (e.g. add id/name/inner text or use a more specific click handler name), or switch generation.nameCollisionBehavior to "warn"/"suffix".`
     );
   }
-  const params = {};
-  if (isKeyed) {
-    params.key = keyTypeFromValues;
-  }
+  let parameters = selectorIsParameterized ? [createPomParameterSpec("key", keyTypeFromValues)] : [];
   switch (normalizedRole) {
     case "input":
-      params.text = "string";
-      params.annotationText = 'string = ""';
-      if (!isKeyed) delete params.key;
+      parameters = setPomParameter(parameters, "text", "string");
+      parameters = setPomParameter(parameters, "annotationText", 'string = ""');
       break;
     case "select":
-      params.value = "string";
-      params.annotationText = 'string = ""';
-      if (!isKeyed) delete params.key;
+      parameters = setPomParameter(parameters, "value", "string");
+      parameters = setPomParameter(parameters, "annotationText", 'string = ""');
       break;
     case "vselect":
-      params.value = "string";
-      params.timeOut = "number = 500";
-      params.annotationText = 'string = ""';
-      if (!isKeyed) delete params.key;
+      parameters = setPomParameter(parameters, "value", "string");
+      parameters = setPomParameter(parameters, "timeOut", "number = 500");
+      parameters = setPomParameter(parameters, "annotationText", 'string = ""');
       break;
     case "radio":
-      params.annotationText = 'string = ""';
+      parameters = setPomParameter(parameters, "annotationText", 'string = ""');
       break;
   }
-  if (keyTypeFromValues !== "string" && Object.prototype.hasOwnProperty.call(params, "key")) {
-    params.key = keyTypeFromValues;
-  }
+  const normalizedParameters = selectorIsParameterized ? setPomParameter(parameters, "key", keyTypeFromValues) : removePomParameter(parameters, "key");
   if (addHtmlAttribute && !fromExisting) {
     upsertAttribute(args.element, testIdAttribute, dataTestId);
   }
   const childComponentName = args.element.tag;
   const dataTestIdEntry = {
-    value: getAttributeValueText(dataTestId),
-    templateLiteral: void 0,
-    ...entryOverrides
+    selectorValue: entryOverrides.selectorValue ?? createPomStringPattern(
+      getAttributeValueText(dataTestId),
+      dataTestId.kind === "template" ? "parameterized" : "static"
+    ),
+    templateLiteral: entryOverrides.templateLiteral,
+    targetPageObjectModelClass: entryOverrides.targetPageObjectModelClass
   };
   dataTestIdEntry.pom = {
     nativeRole: normalizedRole,
     methodName,
     getterNameOverride,
-    formattedDataTestId: formattedDataTestIdForPom,
-    alternateFormattedDataTestIds: void 0,
+    selector: selectorPattern,
+    alternateSelectors: void 0,
     mergeKey: args.pomMergeKey,
-    params,
+    parameters: normalizedParameters,
     keyValuesOverride: args.keyValuesOverride ?? null
     // emitPrimary defaults to true; special cases (including merge) may set it to false below.
   };
@@ -2638,43 +3138,18 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
     }
   };
   const getSignatureForGeneratedMethod = () => {
-    const role = normalizedRole;
-    const isNavigation2 = !!dataTestIdEntry.targetPageObjectModelClass;
-    const needsKey2 = Object.prototype.hasOwnProperty.call(params, "key");
-    const keyType = keyTypeFromValues;
-    if (isNavigation2) {
-      if (needsKey2) {
-        return { params: `key: ${keyType}`, argNames: ["key"] };
-      }
-      return { params: "", argNames: [] };
-    }
-    switch (role) {
-      case "input":
-        return needsKey2 ? { params: `key: ${keyType}, text: string, annotationText: string = ""`, argNames: ["key", "text", "annotationText"] } : { params: 'text: string, annotationText: string = ""', argNames: ["text", "annotationText"] };
-      case "select":
-        return needsKey2 ? { params: `key: ${keyType}, value: string, annotationText: string = ""`, argNames: ["key", "value", "annotationText"] } : { params: 'value: string, annotationText: string = ""', argNames: ["value", "annotationText"] };
-      case "vselect":
-        return needsKey2 ? { params: `key: ${keyType}, value: string, timeOut = 500`, argNames: ["key", "value", "timeOut"] } : { params: "value: string, timeOut = 500", argNames: ["value", "timeOut"] };
-      case "radio":
-        return needsKey2 ? { params: `key: ${keyType}, annotationText: string = ""`, argNames: ["key", "annotationText"] } : { params: 'annotationText: string = ""', argNames: ["annotationText"] };
-      default:
-        if (needsKey2) {
-          return { params: `key: ${keyType}`, argNames: ["key"] };
-        }
-        return { params: "", argNames: [] };
-    }
+    return createPomMethodSignature(normalizedParameters);
   };
   const registerPrimaryOnce = (pom) => {
-    const stableParams = pom.params ? Object.fromEntries(Object.entries(pom.params).sort((a, b) => a[0].localeCompare(b[0]))) : void 0;
-    const alternates = (pom.alternateFormattedDataTestIds ?? []).slice().sort();
+    const alternates = (pom.alternateSelectors ?? []).slice().sort((a, b) => JSON.stringify(a).localeCompare(JSON.stringify(b)));
     const key = JSON.stringify({
       kind: "primary",
       role: pom.nativeRole,
       methodName: pom.methodName,
       getterNameOverride: pom.getterNameOverride ?? null,
-      formattedDataTestId: pom.formattedDataTestId,
-      alternateFormattedDataTestIds: alternates.length ? alternates : void 0,
-      params: stableParams,
+      selector: pom.selector,
+      alternateSelectors: alternates.length ? alternates : void 0,
+      parameters: pom.parameters,
       target: dataTestIdEntry.targetPageObjectModelClass ?? null,
       emitPrimary: pom.emitPrimary ?? true
     });
@@ -2688,8 +3163,7 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
     }
   };
   const addExtraClickMethod = (spec) => {
-    const stableParams = spec.params ? Object.fromEntries(Object.entries(spec.params).sort((a, b) => a[0].localeCompare(b[0]))) : void 0;
-    const key = JSON.stringify({ kind: spec.kind, selector: spec.selector, keyLiteral: spec.keyLiteral ?? null, params: stableParams });
+    const key = JSON.stringify({ kind: spec.kind, selector: spec.selector, keyLiteral: spec.keyLiteral ?? null, parameters: spec.parameters });
     const seen = args.generatedMethodContentByComponent.get(args.parentComponentName) ?? /* @__PURE__ */ new Set();
     if (!args.generatedMethodContentByComponent.has(args.parentComponentName)) {
       args.generatedMethodContentByComponent.set(args.parentComponentName, seen);
@@ -2712,7 +3186,7 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
     if (prev === null) {
       return;
     }
-    if (signature === null || prev.params !== signature.params) {
+    if (signature === null || !pomMethodSignatureEquals(prev, signature)) {
       args.dependencies.generatedMethods.set(name, null);
     }
   };
@@ -2728,23 +3202,10 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
     return candidate;
   };
   const tryGetDirectiveExpressionAst = (dir) => {
-    const exp = dir.exp;
-    if (!exp) {
-      return null;
-    }
-    if (exp.type === NodeTypes.SIMPLE_EXPRESSION) {
-      const simple = exp;
-      const ast = simple.ast;
-      if (ast && "type" in ast) {
-        return ast;
-      }
-    }
-    try {
-      const raw = args.context ? stringifyExpression(exp) : exp.loc.source;
-      return parseExpression(raw, { plugins: ["typescript"] });
-    } catch {
-      return null;
-    }
+    return tryGetDirectiveBabelAst(dir, {
+      preferredViews: args.context ? ["compiled", "loc"] : ["loc", "compiled"],
+      plugins: ["typescript"]
+    });
   };
   const tryGetStaticStringFromBabel = (node) => {
     if (!node) {
@@ -2841,17 +3302,17 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
           name: generatedName2,
           selector: {
             kind: "withinTestIdByLabel",
-            rootFormattedDataTestId: wrapperTestId,
-            formattedLabel: label,
+            rootTestId: createPomStringPattern(wrapperTestId, selectorPatternKind),
+            label: createPomStringPattern(label, "static"),
             exact: true
           },
-          params: { annotationText: `string = ""` }
+          parameters: [createPomParameterSpec("annotationText", `string = ""`)]
         });
         if (added2) {
-          registerGeneratedMethodSignature(generatedName2, { params: `annotationText: string = ""`, argNames: ["annotationText"] });
+          registerGeneratedMethodSignature(generatedName2, createPomMethodSignature([createPomParameterSpec("annotationText", `string = ""`)]));
         }
       }
-      return;
+      return { selectorValue: dataTestId, runtimeValue: runtimeDataTestId, fromExisting };
     }
     const generatedName = ensureUniqueGeneratedName(`select${upperFirst(methodName || "Radio")}`);
     if (dataTestIdEntry.pom) {
@@ -2863,19 +3324,25 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
       name: generatedName,
       selector: {
         kind: "withinTestIdByLabel",
-        rootFormattedDataTestId: wrapperTestId,
-        formattedLabel: "${value}",
+        rootTestId: createPomStringPattern(wrapperTestId, selectorPatternKind),
+        label: createPomStringPattern("${value}", "parameterized"),
         exact: true
       },
-      params: { value: "string", annotationText: `string = ""` }
+      parameters: [
+        createPomParameterSpec("value", "string"),
+        createPomParameterSpec("annotationText", `string = ""`)
+      ]
     });
     if (added) {
-      registerGeneratedMethodSignature(generatedName, { params: `value: string, annotationText: string = ""`, argNames: ["value", "annotationText"] });
+      registerGeneratedMethodSignature(generatedName, createPomMethodSignature([
+        createPomParameterSpec("value", "string"),
+        createPomParameterSpec("annotationText", `string = ""`)
+      ]));
     }
-    return;
+    return { selectorValue: dataTestId, runtimeValue: runtimeDataTestId, fromExisting };
   }
   const staticKeyValues = args.keyValuesOverride ?? null;
-  const needsKey = Object.prototype.hasOwnProperty.call(params, "key") && typeof formattedDataTestIdForPom === "string" && formattedDataTestIdForPom.includes("${key}");
+  const needsKey = hasPomParameter(normalizedParameters, "key") && selectorIsParameterized;
   const isNavigation = !!dataTestIdEntry.targetPageObjectModelClass;
   if (staticKeyValues && staticKeyValues.length > 0 && needsKey && !isNavigation && normalizedRole !== "input" && normalizedRole !== "select" && normalizedRole !== "vselect" && normalizedRole !== "radio") {
     if (dataTestIdEntry.pom) {
@@ -2894,19 +3361,19 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
         name: generatedName,
         selector: {
           kind: "testId",
-          formattedDataTestId: formattedDataTestIdForPom
+          testId: selectorPattern
         },
         keyLiteral: rawValue,
-        params: { wait: "boolean = true", annotationText: 'string = ""' }
+        parameters: [createPomParameterSpec("wait", "boolean = true"), createPomParameterSpec("annotationText", 'string = ""')]
       });
       if (added) {
-        registerGeneratedMethodSignature(generatedName, {
-          params: `wait: boolean = true, annotationText: string = ""`,
-          argNames: ["wait", "annotationText"]
-        });
+        registerGeneratedMethodSignature(generatedName, createPomMethodSignature([
+          createPomParameterSpec("wait", "boolean = true"),
+          createPomParameterSpec("annotationText", 'string = ""')
+        ]));
       }
     }
-    return;
+    return { selectorValue: dataTestId, runtimeValue: runtimeDataTestId, fromExisting };
   }
   if (dataTestIdEntry.pom) {
     if (dataTestIdEntry.pom.emitPrimary !== false) {
@@ -2920,6 +3387,7 @@ Fix: make the element identifiable (e.g. add id/name/inner text or use a more sp
     const generatedName = getGeneratedMethodName();
     registerGeneratedMethodSignature(generatedName, signature);
   }
+  return { selectorValue: dataTestId, runtimeValue: runtimeDataTestId, fromExisting };
 }
 function safeRealpath(value) {
   try {
@@ -3892,127 +4360,20 @@ async function parseRouterFileFromCwd(routerEntryPath, options = {}) {
         debugLog("closing internal vite server");
         await server.close();
       }
-    } finally {
-      restoreDomShim();
-    }
-  });
-}
-const GENERATED_GITATTRIBUTES_BLOCK_START = "# BEGIN vue-pom-generator generated files";
-const GENERATED_GITATTRIBUTES_BLOCK_END = "# END vue-pom-generator generated files";
-const VUE_POM_GENERATOR_ERROR_PREFIX = "[vue-pom-generator]";
-class VuePomGeneratorError extends Error {
-  constructor(message) {
-    const normalized = message.startsWith(VUE_POM_GENERATOR_ERROR_PREFIX) ? message : `${VUE_POM_GENERATOR_ERROR_PREFIX} ${message}`;
-    super(normalized);
-    this.name = "VuePomGeneratorError";
-  }
-}
-function splitParameterList(parameters) {
-  const parts = [];
-  let current = "";
-  let braceDepth = 0;
-  let bracketDepth = 0;
-  let parenDepth = 0;
-  let angleDepth = 0;
-  let inSingleQuote = false;
-  let inDoubleQuote = false;
-  let inTemplateString = false;
-  for (let index = 0; index < parameters.length; index += 1) {
-    const char = parameters[index];
-    const previous = index > 0 ? parameters[index - 1] : "";
-    if (char === "'" && !inDoubleQuote && !inTemplateString && previous !== "\\") {
-      inSingleQuote = !inSingleQuote;
-      current += char;
-      continue;
-    }
-    if (char === '"' && !inSingleQuote && !inTemplateString && previous !== "\\") {
-      inDoubleQuote = !inDoubleQuote;
-      current += char;
-      continue;
-    }
-    if (char === "`" && !inSingleQuote && !inDoubleQuote && previous !== "\\") {
-      inTemplateString = !inTemplateString;
-      current += char;
-      continue;
-    }
-    if (inSingleQuote || inDoubleQuote || inTemplateString) {
-      current += char;
-      continue;
-    }
-    switch (char) {
-      case "{":
-        braceDepth += 1;
-        break;
-      case "}":
-        braceDepth -= 1;
-        break;
-      case "[":
-        bracketDepth += 1;
-        break;
-      case "]":
-        bracketDepth -= 1;
-        break;
-      case "(":
-        parenDepth += 1;
-        break;
-      case ")":
-        parenDepth -= 1;
-        break;
-      case "<":
-        angleDepth += 1;
-        break;
-      case ">":
-        angleDepth -= 1;
-        break;
-      case ",":
-        if (braceDepth === 0 && bracketDepth === 0 && parenDepth === 0 && angleDepth === 0) {
-          const trimmed2 = current.trim();
-          if (trimmed2) {
-            parts.push(trimmed2);
-          }
-          current = "";
-          continue;
-        }
-        break;
-    }
-    current += char;
-  }
-  const trimmed = current.trim();
-  if (trimmed) {
-    parts.push(trimmed);
-  }
-  return parts;
-}
-function parseParameterSignature(parameter) {
-  const colonIndex = parameter.indexOf(":");
-  if (colonIndex < 0) {
-    return { name: parameter.trim() };
-  }
-  const rawName = parameter.slice(0, colonIndex).trim();
-  const hasQuestionToken = rawName.endsWith("?");
-  const name = hasQuestionToken ? rawName.slice(0, -1).trim() : rawName;
-  const remainder = parameter.slice(colonIndex + 1).trim();
-  const initializerIndex = remainder.lastIndexOf("=");
-  if (initializerIndex < 0) {
-    return {
-      name,
-      hasQuestionToken,
-      type: remainder || void 0
-    };
-  }
-  return {
-    name,
-    hasQuestionToken,
-    type: remainder.slice(0, initializerIndex).trim() || void 0,
-    initializer: remainder.slice(initializerIndex + 1).trim() || void 0
-  };
+    } finally {
+      restoreDomShim();
+    }
+  });
 }
-function parseParameterSignatures(parameters) {
-  const trimmed = parameters.trim();
-  if (!trimmed) {
-    return [];
+const GENERATED_GITATTRIBUTES_BLOCK_START = "# BEGIN vue-pom-generator generated files";
+const GENERATED_GITATTRIBUTES_BLOCK_END = "# END vue-pom-generator generated files";
+const VUE_POM_GENERATOR_ERROR_PREFIX = "[vue-pom-generator]";
+class VuePomGeneratorError extends Error {
+  constructor(message) {
+    const normalized = message.startsWith(VUE_POM_GENERATOR_ERROR_PREFIX) ? message : `${VUE_POM_GENERATOR_ERROR_PREFIX} ${message}`;
+    super(normalized);
+    this.name = "VuePomGeneratorError";
   }
-  return splitParameterList(trimmed).map(parseParameterSignature);
 }
 function toPosixRelativePath(fromDir, toFile) {
   let rel = path.relative(fromDir, toFile).replace(/\\/g, "/");
@@ -4033,6 +4394,21 @@ function resolveRouterEntry(projectRoot, routerEntry) {
   const root = projectRoot ?? process.cwd();
   return path.isAbsolute(routerEntry) ? routerEntry : path.resolve(root, routerEntry);
 }
+function createMissingCustomPomDirectoryError(configuredDir, resolvedDir) {
+  return new VuePomGeneratorError(
+    `Custom POM directory "${configuredDir}" does not exist.
+Resolved path: ${resolvedDir}
+Create the directory, point generation.playwright.customPoms.dir at the correct location, or remove the customPoms configuration.`
+  );
+}
+function createMissingCustomPomAttachmentClassError(missingClassNames, configuredDir) {
+  const renderedClassNames = missingClassNames.map((name) => `"${name}"`).join(", ");
+  return new VuePomGeneratorError(
+    `Custom POM attachments reference missing helper classes: ${renderedClassNames}.
+Expected matching helper files/exports under "${configuredDir}".
+Add the missing helper classes or remove the corresponding generation.playwright.customPoms.attachments entries.`
+  );
+}
 function createCustomPomImportCollisionError(exportName, requested) {
   return new VuePomGeneratorError(
     `Custom POM import name collision detected for "${exportName}".
@@ -4171,41 +4547,31 @@ function generateGoToSelfMethod(componentName) {
     })
   ];
 }
-function formatMethodParams(params) {
-  if (!params)
-    return "";
-  const preferredOrder = ["key", "value", "text", "timeOut", "annotationText", "wait"];
-  const entries = Object.entries(params);
-  if (!entries.length)
-    return "";
-  const score = (name) => {
-    const idx = preferredOrder.indexOf(name);
-    return idx < 0 ? 999 : idx;
-  };
-  return entries.slice().sort((a, b) => score(a[0]) - score(b[0]) || a[0].localeCompare(b[0])).map(([name, typeExpr]) => `${name}: ${typeExpr}`).join(", ");
+function getSelectorPatterns(selector) {
+  return selector.kind === "testId" ? [selector.testId] : [selector.rootTestId, selector.label];
 }
-function generateExtraClickMethodMembers(spec) {
+function generateExtraClickMethodMembers(spec, componentName) {
   if (spec.kind !== "click") {
     return [];
   }
-  const params = spec.params ?? {};
-  const signatureParams = formatMethodParams(params);
-  const parameters = parseParameterSignatures(signatureParams);
-  const hasAnnotationText = Object.prototype.hasOwnProperty.call(params, "annotationText");
-  const hasWait = Object.prototype.hasOwnProperty.call(params, "wait");
+  const selectorPatterns = getSelectorPatterns(spec.selector);
+  const signatureSpecs = orderPomPatternParameters(
+    spec.parameters,
+    selectorPatterns,
+    { omit: spec.keyLiteral !== void 0 ? ["key"] : [] }
+  );
+  const parameters = toTypeScriptPomParameterStructures(signatureSpecs);
+  const hasAnnotationText = signatureSpecs.some((param) => param.name === "annotationText");
+  const hasWait = signatureSpecs.some((param) => param.name === "wait");
   const annotationArg = hasAnnotationText ? "annotationText" : '""';
   const waitArg = hasWait ? "wait" : "true";
+  const locatorDescription = JSON.stringify(buildPomLocatorDescription({
+    componentName,
+    methodName: stripPomActionPrefix(spec.name),
+    nativeRole: "button"
+  }));
   if (spec.selector.kind === "testId") {
-    const needsTemplate = spec.selector.formattedDataTestId.includes("${");
-    const testIdExpr = needsTemplate ? `\`${spec.selector.formattedDataTestId}\`` : JSON.stringify(spec.selector.formattedDataTestId);
-    const clickArgs = [];
-    clickArgs.push(needsTemplate ? "testId" : testIdExpr);
-    if (hasAnnotationText || hasWait) {
-      clickArgs.push(annotationArg);
-    }
-    if (hasWait) {
-      clickArgs.push(waitArg);
-    }
+    const testIdBinding = bindTypeScriptPomPattern(spec.selector.testId, "testId");
     return [
       createClassMethod({
         name: spec.name,
@@ -4215,20 +4581,16 @@ function generateExtraClickMethodMembers(spec) {
           if (spec.keyLiteral !== void 0) {
             writer.writeLine(`const key = ${JSON.stringify(spec.keyLiteral)};`);
           }
-          if (needsTemplate) {
-            writer.writeLine(`const testId = ${testIdExpr};`);
+          for (const statement of testIdBinding.setupStatements) {
+            writer.writeLine(statement);
           }
-          writer.writeLine(`await this.clickByTestId(${clickArgs.join(", ")});`);
+          writer.writeLine(`await this.clickByTestId(${testIdBinding.expression}, ${annotationArg}, ${waitArg}, ${locatorDescription});`);
         }
       })
     ];
   }
-  const rootNeedsTemplate = spec.selector.rootFormattedDataTestId.includes("${");
-  const labelNeedsTemplate = spec.selector.formattedLabel.includes("${");
-  const rootExpr = rootNeedsTemplate ? `\`${spec.selector.rootFormattedDataTestId}\`` : JSON.stringify(spec.selector.rootFormattedDataTestId);
-  const labelExpr = labelNeedsTemplate ? `\`${spec.selector.formattedLabel}\`` : JSON.stringify(spec.selector.formattedLabel);
-  const rootArg = rootNeedsTemplate ? "rootTestId" : rootExpr;
-  const labelArg = labelNeedsTemplate ? "label" : labelExpr;
+  const rootBinding = bindTypeScriptPomPattern(spec.selector.rootTestId, "rootTestId");
+  const labelBinding = bindTypeScriptPomPattern(spec.selector.label, "label");
   return [
     createClassMethod({
       name: spec.name,
@@ -4238,45 +4600,45 @@ function generateExtraClickMethodMembers(spec) {
         if (spec.keyLiteral !== void 0) {
           writer.writeLine(`const key = ${JSON.stringify(spec.keyLiteral)};`);
         }
-        if (rootNeedsTemplate) {
-          writer.writeLine(`const rootTestId = ${rootExpr};`);
+        for (const statement of rootBinding.setupStatements) {
+          writer.writeLine(statement);
         }
-        if (labelNeedsTemplate) {
-          writer.writeLine(`const label = ${labelExpr};`);
+        for (const statement of labelBinding.setupStatements) {
+          writer.writeLine(statement);
         }
-        writer.writeLine(`await this.clickWithinTestIdByLabel(${rootArg}, ${labelArg}, ${annotationArg}, ${waitArg});`);
+        writer.writeLine(`await this.clickWithinTestIdByLabel(${rootBinding.expression}, ${labelBinding.expression}, ${annotationArg}, ${waitArg}, { description: ${locatorDescription} });`);
       }
     })
   ];
 }
-function generateMethodMembersFromPom(primary, targetPageObjectModelClass) {
+function generateMethodMembersFromPom(componentName, primary, targetPageObjectModelClass) {
   if (primary.emitPrimary === false) {
     return [];
   }
   return generateViewObjectModelMembers(
+    componentName,
     targetPageObjectModelClass,
     primary.methodName,
     primary.nativeRole,
-    primary.formattedDataTestId,
-    primary.alternateFormattedDataTestIds,
+    primary.selector,
+    primary.alternateSelectors,
     primary.getterNameOverride,
-    primary.params ?? {}
+    primary.parameters
   );
 }
-function generateMethodsContentForDependencies(dependencies) {
+function generateMethodsContentForDependencies(componentName, dependencies) {
   const entries = Array.from(dependencies.dataTestIdSet ?? []);
   const primarySpecsAll = entries.map((e) => ({ pom: e.pom, target: e.targetPageObjectModelClass })).filter((x) => !!x.pom).sort((a, b) => a.pom.methodName.localeCompare(b.pom.methodName));
   const seenPrimaryKeys = /* @__PURE__ */ new Set();
   const primarySpecs = primarySpecsAll.filter(({ pom, target }) => {
-    const stableParams = pom.params ? Object.fromEntries(Object.entries(pom.params).sort((a, b) => a[0].localeCompare(b[0]))) : void 0;
-    const alternates = (pom.alternateFormattedDataTestIds ?? []).slice().sort();
+    const alternates = (pom.alternateSelectors ?? []).slice().sort((a, b) => JSON.stringify(a).localeCompare(JSON.stringify(b)));
     const key = JSON.stringify({
       role: pom.nativeRole,
       methodName: pom.methodName,
       getterNameOverride: pom.getterNameOverride ?? null,
-      testId: pom.formattedDataTestId,
-      alternateTestIds: alternates.length ? alternates : void 0,
-      params: stableParams,
+      selector: pom.selector,
+      alternateSelectors: alternates.length ? alternates : void 0,
+      parameters: pom.parameters,
       target: target ?? null,
       emitPrimary: pom.emitPrimary ?? true
     });
@@ -4289,10 +4651,10 @@ function generateMethodsContentForDependencies(dependencies) {
   const extras = (dependencies.pomExtraMethods ?? []).slice().sort((a, b) => a.name.localeCompare(b.name));
   const members = [];
   for (const { pom, target } of primarySpecs) {
-    members.push(...generateMethodMembersFromPom(pom, target));
+    members.push(...generateMethodMembersFromPom(componentName, pom, target));
   }
   for (const extra of extras) {
-    members.push(...generateExtraClickMethodMembers(extra));
+    members.push(...generateExtraClickMethodMembers(extra, componentName));
   }
   return members;
 }
@@ -4303,6 +4665,7 @@ async function generateFiles(componentHierarchyMap, vueFilesPathMap, basePageCla
     customPomAttachments = [],
     projectRoot,
     customPomDir,
+    requireCustomPomDir,
     customPomImportAliases,
     customPomImportNameCollisionBehavior = "error",
     testIdAttribute,
@@ -4335,6 +4698,7 @@ async function generateFiles(componentHierarchyMap, vueFilesPathMap, basePageCla
       customPomAttachments,
       projectRoot,
       customPomDir,
+      requireCustomPomDir,
       customPomImportAliases,
       customPomImportNameCollisionBehavior,
       testIdAttribute,
@@ -4344,6 +4708,7 @@ async function generateFiles(componentHierarchyMap, vueFilesPathMap, basePageCla
       customPomAttachments,
       projectRoot,
       customPomDir,
+      requireCustomPomDir,
       customPomImportAliases,
       customPomImportNameCollisionBehavior,
       testIdAttribute,
@@ -4399,9 +4764,15 @@ async function generateSplitTypeScriptFiles(componentHierarchyMap, vueFilesPathM
   }
   const customPomImportResolution = resolveCustomPomImportResolution(generatedClassNames, projectRoot, {
     customPomDir: options.customPomDir,
+    requireCustomPomDir: options.requireCustomPomDir,
     customPomImportAliases: options.customPomImportAliases,
     customPomImportNameCollisionBehavior: options.customPomImportNameCollisionBehavior
   });
+  assertCustomPomAttachmentsResolved(
+    options.customPomAttachments ?? [],
+    customPomImportResolution.classIdentifierMap,
+    options.customPomDir ?? "tests/playwright/pom/custom"
+  );
   const runtimeBasePagePath = path.join(base, "_pom-runtime", "class-generation", "base-page.ts");
   const files = [];
   for (const [name, deps] of entries) {
@@ -4560,21 +4931,8 @@ function buildGeneratedGitAttributesFiles(generatedFilePaths) {
     return { filePath, content };
   });
 }
-function toCSharpTestIdExpression(formattedDataTestId) {
-  const needsInterpolation = formattedDataTestId.includes("${");
-  if (!needsInterpolation) {
-    return JSON.stringify(formattedDataTestId);
-  }
-  const inner = formattedDataTestId.replace(/\$\{/g, "{");
-  const quoted = JSON.stringify(inner);
-  return `$${quoted}`;
-}
-function toCSharpParam(paramTypeExpr) {
-  const trimmed = (paramTypeExpr ?? "").trim();
-  const eqIdx = trimmed.indexOf("=");
-  const left = eqIdx >= 0 ? trimmed.slice(0, eqIdx).trim() : trimmed;
-  const right = eqIdx >= 0 ? trimmed.slice(eqIdx + 1).trim() : void 0;
-  const typePart = left.includes("|") ? "string" : left;
+function toCSharpParam(param) {
+  const typePart = param.type?.includes("|") ? "string" : param.type ?? "string";
   let type = "string";
   if (/(?:^|\s)boolean(?:\s|$)/.test(typePart))
     type = "bool";
@@ -4582,19 +4940,17 @@ function toCSharpParam(paramTypeExpr) {
     type = "string";
   else if (/(?:^|\s)number(?:\s|$)/.test(typePart))
     type = "int";
-  else if (/\d+/.test(typePart) && typePart === "")
-    type = "int";
   else if (/\btimeOut\b/i.test(typePart))
     type = "int";
   let defaultExpr;
-  if (right !== void 0) {
+  if (param.initializer !== void 0) {
     if (type === "bool") {
-      defaultExpr = right.includes("true") ? "true" : right.includes("false") ? "false" : void 0;
+      defaultExpr = param.initializer.includes("true") ? "true" : param.initializer.includes("false") ? "false" : void 0;
     } else if (type === "int") {
-      const m = right.match(/\d+/);
+      const m = param.initializer.match(/\d+/);
       defaultExpr = m ? m[0] : void 0;
     } else {
-      if (right === '""' || right === '""' || right === "''") {
+      if (param.initializer === '""' || param.initializer === "''") {
         defaultExpr = '""';
       }
     }
@@ -4602,17 +4958,15 @@ function toCSharpParam(paramTypeExpr) {
   return { type, defaultExpr };
 }
 function formatCSharpParams(params) {
-  if (!params)
-    return { signature: "", argNames: [] };
-  const entries = Object.entries(params);
-  if (!entries.length)
+  const normalizedParams = normalizePomParameters(params);
+  if (!normalizedParams.length)
     return { signature: "", argNames: [] };
   const signatureParts = [];
   const argNames = [];
-  for (const [name, typeExpr] of entries) {
-    const { type, defaultExpr } = toCSharpParam(typeExpr);
-    argNames.push(name);
-    signatureParts.push(defaultExpr !== void 0 ? `${type} ${name} = ${defaultExpr}` : `${type} ${name}`);
+  for (const param of normalizedParams) {
+    const { type, defaultExpr } = toCSharpParam(param);
+    argNames.push(param.name);
+    signatureParts.push(defaultExpr !== void 0 ? `${type} ${param.name} = ${defaultExpr}` : `${type} ${param.name}`);
   }
   return { signature: signatureParts.join(", "), argNames };
 }
@@ -4703,23 +5057,13 @@ function generateAggregatedCSharpFiles(componentHierarchyMap, outDir, options =
       const baseMethodName = upperFirst(pom.methodName);
       const baseGetterName = upperFirst(pom.getterNameOverride ?? pom.methodName);
       const locatorName = baseGetterName.endsWith(roleSuffix) ? baseGetterName : `${baseGetterName}${roleSuffix}`;
-      const testIdExpr = toCSharpTestIdExpression(pom.formattedDataTestId);
-      const templateVarMatches = [...pom.formattedDataTestId.matchAll(/\$\{(\w+)\}/g)];
-      const templateVars = templateVarMatches.map((m) => m[1]);
-      const augmentedParams = { ...pom.params };
-      for (const v of templateVars) {
-        if (!Object.prototype.hasOwnProperty.call(augmentedParams, v)) {
-          augmentedParams[v] = "string";
-        }
-      }
-      const orderedParams = Object.fromEntries([
-        ...templateVars.map((v) => [v, augmentedParams[v]]),
-        ...Object.entries(augmentedParams).filter(([k]) => !templateVars.includes(k))
-      ]);
+      const selectorIsParameterized = isParameterizedPomPattern(pom.selector.patternKind);
+      const testIdExpr = toCSharpPomPatternExpression(pom.selector);
+      const orderedParams = orderPomPatternParameters(pom.parameters, [pom.selector]);
       const { signature, argNames } = formatCSharpParams(orderedParams);
       const args = argNames.join(", ");
-      const allTestIds = [pom.formattedDataTestId, ...pom.alternateFormattedDataTestIds ?? []].filter((v, idx, arr) => v && arr.indexOf(v) === idx);
-      if (pom.formattedDataTestId.includes("${")) {
+      const allTestIds = uniquePomStringPatterns(pom.selector, pom.alternateSelectors);
+      if (selectorIsParameterized) {
         chunks.push(`    public ILocator ${locatorName}(${signature}) => LocatorByTestId(${testIdExpr});`);
       } else {
         chunks.push(`    public ILocator ${locatorName} => LocatorByTestId(${testIdExpr});`);
@@ -4730,12 +5074,12 @@ function generateAggregatedCSharpFiles(componentHierarchyMap, outDir, options =
       if (target) {
         chunks.push(`    public async Task<${target}> ${actionName}(${sig})`);
         chunks.push("    {");
-        if (pom.formattedDataTestId.includes("${") || allTestIds.length <= 1) {
-          chunks.push(`        await ${locatorName}${pom.formattedDataTestId.includes("${") ? `(${args})` : ""}.ClickAsync();`);
+        if (selectorIsParameterized || allTestIds.length <= 1) {
+          chunks.push(`        await ${locatorName}${selectorIsParameterized ? `(${args})` : ""}.ClickAsync();`);
           chunks.push(`        return new ${target}(Page);`);
         } else {
           chunks.push("        Exception? lastError = null;");
-          chunks.push(`        foreach (var testId in new[] { ${allTestIds.map(toCSharpTestIdExpression).join(", ")} })`);
+          chunks.push(`        foreach (var testId in new[] { ${allTestIds.map((testId) => toCSharpPomPatternExpression(testId)).join(", ")} })`);
           chunks.push("        {");
           chunks.push("            try");
           chunks.push("            {");
@@ -4759,7 +5103,7 @@ function generateAggregatedCSharpFiles(componentHierarchyMap, outDir, options =
       }
       chunks.push(`    public async Task ${actionName}(${sig})`);
       chunks.push("    {");
-      const callSuffix = pom.formattedDataTestId.includes("${") ? `(${args})` : "";
+      const callSuffix = selectorIsParameterized ? `(${args})` : "";
       const emitActionCall = (locatorAccess) => {
         if (pom.nativeRole === "input") {
           chunks.push(`        var editableLocator = await ResolveEditableLocatorAsync(${locatorAccess});`);
@@ -4772,9 +5116,9 @@ function generateAggregatedCSharpFiles(componentHierarchyMap, outDir, options =
           chunks.push(`        await ${locatorAccess}.ClickAsync();`);
         }
       };
-      if (!pom.formattedDataTestId.includes("${") && allTestIds.length > 1) {
+      if (!selectorIsParameterized && allTestIds.length > 1) {
         chunks.push("        Exception? lastError = null;");
-        chunks.push(`        foreach (var testId in new[] { ${allTestIds.map(toCSharpTestIdExpression).join(", ")} })`);
+        chunks.push(`        foreach (var testId in new[] { ${allTestIds.map((testId) => toCSharpPomPatternExpression(testId)).join(", ")} })`);
         chunks.push("        {");
         chunks.push("            try");
         chunks.push("            {");
@@ -4820,7 +5164,12 @@ function generateAggregatedCSharpFiles(componentHierarchyMap, outDir, options =
     for (const extra of extras) {
       if (extra.kind !== "click")
         continue;
-      const { signature } = formatCSharpParams(extra.params);
+      const extraParams = orderPomPatternParameters(
+        extra.parameters,
+        getSelectorPatterns(extra.selector),
+        { omit: extra.keyLiteral !== void 0 ? ["key"] : [] }
+      );
+      const { signature } = formatCSharpParams(extraParams);
       const extraName = upperFirst(extra.name);
       chunks.push(`    public async Task ${extraName}Async(${signature})`);
       chunks.push("    {");
@@ -4828,29 +5177,22 @@ function generateAggregatedCSharpFiles(componentHierarchyMap, outDir, options =
         chunks.push(`        var key = ${JSON.stringify(extra.keyLiteral)};`);
       }
       if (extra.selector.kind === "testId") {
-        const needsTemplate = extra.selector.formattedDataTestId.includes("${");
-        const testIdExpr = toCSharpTestIdExpression(extra.selector.formattedDataTestId);
-        if (needsTemplate) {
-          chunks.push(`        var testId = ${testIdExpr};`);
-          chunks.push("        await LocatorByTestId(testId).ClickAsync();");
-        } else {
-          chunks.push(`        await LocatorByTestId(${testIdExpr}).ClickAsync();`);
+        const testIdBinding = bindCSharpPomPattern(extra.selector.testId, "testId");
+        for (const statement of testIdBinding.setupStatements) {
+          chunks.push(`        ${statement}`);
         }
+        chunks.push(`        await LocatorByTestId(${testIdBinding.expression}).ClickAsync();`);
       } else {
-        const rootNeedsTemplate = extra.selector.rootFormattedDataTestId.includes("${");
-        const labelNeedsTemplate = extra.selector.formattedLabel.includes("${");
-        const rootExpr = toCSharpTestIdExpression(extra.selector.rootFormattedDataTestId);
-        const labelExpr = toCSharpTestIdExpression(extra.selector.formattedLabel);
+        const rootBinding = bindCSharpPomPattern(extra.selector.rootTestId, "rootTestId");
+        const labelBinding = bindCSharpPomPattern(extra.selector.label, "label");
         const exactArg = extra.selector.exact === false ? "false" : "true";
-        if (rootNeedsTemplate) {
-          chunks.push(`        var rootTestId = ${rootExpr};`);
+        for (const statement of rootBinding.setupStatements) {
+          chunks.push(`        ${statement}`);
         }
-        if (labelNeedsTemplate) {
-          chunks.push(`        var label = ${labelExpr};`);
+        for (const statement of labelBinding.setupStatements) {
+          chunks.push(`        ${statement}`);
         }
-        const rootArg = rootNeedsTemplate ? "rootTestId" : rootExpr;
-        const labelArg = labelNeedsTemplate ? "label" : labelExpr;
-        chunks.push(`        await ClickWithinTestIdByLabelAsync(${rootArg}, ${labelArg}, ${exactArg});`);
+        chunks.push(`        await ClickWithinTestIdByLabelAsync(${rootBinding.expression}, ${labelBinding.expression}, ${exactArg});`);
       }
       chunks.push("    }");
       chunks.push("");
@@ -5166,7 +5508,7 @@ function prepareViewObjectModelClass(componentName, dependencies, componentHiera
     members.push(...generateRouteProperty(routeMeta));
     members.push(...generateGoToSelfMethod(className));
   }
-  members.push(...generateMethodsContentForDependencies(dependencies));
+  members.push(...generateMethodsContentForDependencies(componentName, dependencies));
   return {
     className,
     componentRefsForInstances,
@@ -5294,7 +5636,7 @@ function getViewPassthroughMethods(viewName, viewDependencies, childrenComponent
       if (existingOnView.has(name) || blockedMethodNames.has(name))
         continue;
       const list = methodToChildren.get(name) ?? [];
-      list.push({ childProp, params: sig.params, argNames: sig.argNames });
+      list.push({ childProp, signature: sig });
       methodToChildren.set(name, list);
     }
   }
@@ -5304,12 +5646,12 @@ function getViewPassthroughMethods(viewName, viewDependencies, childrenComponent
     return [];
   }
   return passthroughs.map(([methodName, candidates]) => {
-    const { childProp, params, argNames } = candidates[0];
-    const callArgs = argNames.join(", ");
+    const { childProp, signature } = candidates[0];
+    const callArgs = getPomParameterArgumentNames(signature.parameters).join(", ");
     return createClassMethod({
       name: methodName,
       isAsync: true,
-      parameters: parseParameterSignatures(params),
+      parameters: toTypeScriptPomParameterStructures(signature.parameters),
       statements: [
         `return await this.${childProp}.${methodName}(${callArgs});`
       ]
@@ -5333,8 +5675,7 @@ function getAttachmentPassthroughMethods(ownerName, ownerDependencies, attachmen
       const list = methodToAttachments.get(methodName) ?? [];
       list.push({
         propertyName: attachment.propertyName,
-        params: signature.params,
-        argNames: signature.argNames
+        signature
       });
       methodToAttachments.set(methodName, list);
     }
@@ -5345,12 +5686,12 @@ function getAttachmentPassthroughMethods(ownerName, ownerDependencies, attachmen
     return [];
   }
   return passthroughs.map(([methodName, candidates]) => {
-    const { propertyName, params, argNames } = candidates[0];
-    const callArgs = argNames.join(", ");
+    const { propertyName, signature } = candidates[0];
+    const callArgs = getPomParameterArgumentNames(signature.parameters).join(", ");
     const invocation = callArgs ? `this.${propertyName}.${methodName}(${callArgs})` : `this.${propertyName}.${methodName}()`;
     return createClassMethod({
       name: methodName,
-      parameters: parseParameterSignatures(params),
+      parameters: toTypeScriptPomParameterStructures(signature.parameters),
       statements: [
         `return ${invocation};`
       ]
@@ -5364,15 +5705,44 @@ function sliceNodeSource(source, node) {
   const snippet = source.slice(node.start, node.end).trim();
   return snippet.length ? snippet : null;
 }
-function getCustomPomCallArgumentName(param) {
+function getTypeAnnotationSource(source, node) {
+  const rawTypeAnnotation = node.typeAnnotation;
+  if (!rawTypeAnnotation || typeof rawTypeAnnotation !== "object" || !("type" in rawTypeAnnotation) || rawTypeAnnotation.type !== "TSTypeAnnotation" || !("typeAnnotation" in rawTypeAnnotation)) {
+    return void 0;
+  }
+  const typeAnnotation = rawTypeAnnotation.typeAnnotation;
+  return typeAnnotation && typeof typeAnnotation === "object" ? sliceNodeSource(source, typeAnnotation) ?? void 0 : void 0;
+}
+function getCustomPomParameterSpec(source, param) {
   if (param.type === "Identifier") {
-    return param.name;
+    return createPomParameterSpec(param.name, getTypeAnnotationSource(source, param), {
+      hasQuestionToken: !!param.optional
+    });
   }
   if (param.type === "AssignmentPattern") {
-    return param.left.type === "Identifier" ? param.left.name : null;
+    if (param.left.type !== "Identifier") {
+      return null;
+    }
+    const initializer = sliceNodeSource(source, param.right);
+    if (!initializer) {
+      return null;
+    }
+    return createPomParameterSpec(param.left.name, getTypeAnnotationSource(source, param.left), {
+      initializer,
+      hasQuestionToken: !!param.left.optional
+    });
   }
   if (param.type === "RestElement") {
-    return param.argument.type === "Identifier" ? `...${param.argument.name}` : null;
+    if (param.argument.type !== "Identifier") {
+      return null;
+    }
+    const typeExpression = getTypeAnnotationSource(
+      source,
+      param
+    ) ?? getTypeAnnotationSource(source, param.argument);
+    return createPomParameterSpec(param.argument.name, typeExpression, {
+      isRestParameter: true
+    });
   }
   return null;
 }
@@ -5405,29 +5775,23 @@ function extractCustomPomMethodSignatures(source, exportName) {
       if (member.key.type !== "Identifier") {
         continue;
       }
-      const params = [];
-      const argNames = [];
+      const parameters = [];
       let supported = true;
       member.params.forEach((param) => {
         if (!supported) {
           return;
         }
-        const paramSource = sliceNodeSource(source, param);
-        const argName = getCustomPomCallArgumentName(param);
-        if (!paramSource || !argName) {
+        const parameter = getCustomPomParameterSpec(source, param);
+        if (!parameter) {
           supported = false;
           return;
         }
-        params.push(paramSource);
-        argNames.push(argName);
+        parameters.push(parameter);
       });
       if (!supported) {
         continue;
       }
-      signatures.set(member.key.name, {
-        params: params.join(", "),
-        argNames
-      });
+      signatures.set(member.key.name, createPomMethodSignature(parameters));
     }
   }
   return signatures;
@@ -5610,6 +5974,9 @@ function resolveCustomPomImportResolution(generatedClassNames, projectRoot, opti
   const customDirRelOrAbs = options.customPomDir ?? "tests/playwright/pom/custom";
   const customDirAbs = path.isAbsolute(customDirRelOrAbs) ? customDirRelOrAbs : path.resolve(projectRoot, customDirRelOrAbs);
   if (!fs.existsSync(customDirAbs)) {
+    if (options.requireCustomPomDir) {
+      throw createMissingCustomPomDirectoryError(customDirRelOrAbs, customDirAbs);
+    }
     return {
       classIdentifierMap,
       methodSignaturesByClass,
@@ -5652,6 +6019,14 @@ function resolveCustomPomImportResolution(generatedClassNames, projectRoot, opti
     importSpecifiersByClass
   };
 }
+function assertCustomPomAttachmentsResolved(attachments, classIdentifierMap, configuredDir) {
+  const missingClassNames = Array.from(new Set(
+    attachments.map((attachment) => attachment.className).filter((className) => !Object.prototype.hasOwnProperty.call(classIdentifierMap, className))
+  )).sort((left, right) => left.localeCompare(right));
+  if (missingClassNames.length > 0) {
+    throw createMissingCustomPomAttachmentClassError(missingClassNames, configuredDir);
+  }
+}
 function getComposedStubBody(targetClassName, availableClassNames, depsByClassName, vueFilesPathMap, projectRoot) {
   const filePath = resolveVueSourcePath(targetClassName, vueFilesPathMap, projectRoot);
   if (!filePath)
@@ -5680,7 +6055,7 @@ function getComposedStubBody(targetClassName, availableClassNames, depsByClassNa
       if (!sig)
         continue;
       const list = methodToChildren.get(name) ?? [];
-      list.push({ child, params: sig.params, argNames: sig.argNames });
+      list.push({ child, signature: sig });
       methodToChildren.set(name, list);
     }
   }
@@ -5688,12 +6063,12 @@ function getComposedStubBody(targetClassName, availableClassNames, depsByClassNa
   for (const [methodName, candidatesForMethod] of methodToChildren.entries()) {
     if (candidatesForMethod.length !== 1 || methodName === "constructor")
       continue;
-    const { child, params, argNames } = candidatesForMethod[0];
-    const callArgs = argNames.join(", ");
+    const { child, signature } = candidatesForMethod[0];
+    const callArgs = getPomParameterArgumentNames(signature.parameters).join(", ");
     passthroughMembers.push(createClassMethod({
       name: methodName,
       isAsync: true,
-      parameters: parseParameterSignatures(params),
+      parameters: toTypeScriptPomParameterStructures(signature.parameters),
       statements: [
         `return await this.${child}.${methodName}(${callArgs});`
       ]
@@ -5742,9 +6117,15 @@ async function generateAggregatedFiles(componentHierarchyMap, vueFilesPathMap, b
     imports.push(`export * from "${runtimeClassGenRel}/base-page";`);
     const customPomImportResolution = resolveCustomPomImportResolution(generatedClassNames, projectRoot, {
       customPomDir: options.customPomDir,
+      requireCustomPomDir: options.requireCustomPomDir,
       customPomImportAliases: options.customPomImportAliases,
       customPomImportNameCollisionBehavior: options.customPomImportNameCollisionBehavior
     });
+    assertCustomPomAttachmentsResolved(
+      options.customPomAttachments ?? [],
+      customPomImportResolution.classIdentifierMap,
+      options.customPomDir ?? "tests/playwright/pom/custom"
+    );
     const customPomClassIdentifierMap = customPomImportResolution.classIdentifierMap;
     const customPomMethodSignaturesByClass = customPomImportResolution.methodSignaturesByClass;
     const customPomAvailableClassIdentifiers = customPomImportResolution.availableClassIdentifiers;
@@ -5894,8 +6275,8 @@ function getWidgetInstancesForView(componentName, dataTestIdSet, availableClassI
     return candidate;
   };
   for (const dt of dataTestIdSet) {
-    const raw = dt.value;
-    if (raw.includes("${")) {
+    const raw = dt.selectorValue.formatted;
+    if (isParameterizedPomPattern(dt.selectorValue.patternKind)) {
       continue;
     }
     const toggleSuffix = "-toggle";
@@ -5985,7 +6366,6 @@ function getConstructor(childrenComponent, componentHierarchyMap, attachmentsFor
   });
 }
 const TESTID_CLICK_EVENT_NAME = "__testid_event__";
-const TESTID_CLICK_EVENT_STRICT_FLAG = "__testid_click_event_strict__";
 const CLICK_EVENT_NAME = TESTID_CLICK_EVENT_NAME;
 const inferredNativeWrapperConfigByLookup = /* @__PURE__ */ new Map();
 const inferredSfcPathByLookup = /* @__PURE__ */ new Map();
@@ -6247,7 +6627,7 @@ function getConditionalDirectiveInfo(element) {
   if (directive.name === "else") {
     const exp2 = directive.exp;
     if (exp2 && (exp2.type === NodeTypes.SIMPLE_EXPRESSION || exp2.type === NodeTypes.COMPOUND_EXPRESSION)) {
-      const source2 = (exp2.type === NodeTypes.SIMPLE_EXPRESSION ? exp2.content : stringifyExpression(exp2)).trim();
+      const source2 = getVueExpressionSource(exp2, "content", "compiled");
       return { kind: "else-if", source: source2 };
     }
     return { kind: "else", source: "" };
@@ -6256,13 +6636,13 @@ function getConditionalDirectiveInfo(element) {
     const exp2 = directive.exp;
     if (!exp2 || exp2.type !== NodeTypes.SIMPLE_EXPRESSION && exp2.type !== NodeTypes.COMPOUND_EXPRESSION)
       return null;
-    const source2 = (exp2.type === NodeTypes.SIMPLE_EXPRESSION ? exp2.content : stringifyExpression(exp2)).trim();
+    const source2 = getVueExpressionSource(exp2, "content", "compiled");
     return { kind: "else-if", source: source2 };
   }
   const exp = directive.exp;
   if (!exp || exp.type !== NodeTypes.SIMPLE_EXPRESSION && exp.type !== NodeTypes.COMPOUND_EXPRESSION)
     return null;
-  const source = (exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : stringifyExpression(exp)).trim();
+  const source = getVueExpressionSource(exp, "content", "compiled");
   return { kind: directive.name, source };
 }
 function tryExtractStableHintFromConditionalExpressionSource(source) {
@@ -6288,26 +6668,26 @@ function tryExtractStableHintFromConditionalExpressionSource(source) {
   };
   try {
     const expr = parseExpression(src, { plugins: ["typescript"] });
-    const isNodeType = (n, type) => {
+    const isNodeType2 = (n, type) => {
       return n !== null && n.type === type;
     };
-    const isStringLiteralNode = (n) => {
-      return isNodeType(n, "StringLiteral") && typeof n.value === "string";
+    const isStringLiteralNode2 = (n) => {
+      return isNodeType2(n, "StringLiteral") && typeof n.value === "string";
     };
-    const isIdentifierNode = (n) => {
-      return isNodeType(n, "Identifier") && typeof n.name === "string";
+    const isIdentifierNode2 = (n) => {
+      return isNodeType2(n, "Identifier") && typeof n.name === "string";
     };
     const results = [];
     const walk = (n) => {
       if (!n)
         return;
-      if (isStringLiteralNode(n)) {
+      if (isStringLiteralNode2(n)) {
         const v = (n.value ?? "").trim();
         if (isIdentifierish(v)) {
           results.push(v);
         }
       }
-      if (isIdentifierNode(n)) {
+      if (isIdentifierNode2(n)) {
         const v = (n.name ?? "").trim();
         if (isIdentifierish(v)) {
           results.push(v);
@@ -6457,34 +6837,20 @@ ${buildSearchRootsKey(normalizedSearchRoots)}`;
   inferredNativeWrapperConfigByLookup.set(cacheKey, { role: "" });
   return null;
 }
-function tryWrapClickDirectiveForTestEvents(element, testIdAttribute) {
+function tryWrapClickDirectiveForTestEvents(element, testIdAttribute, resolvedRuntimeTestId) {
   const jsStringLiteral = (value) => {
     return JSON.stringify(value);
   };
   const getTestIdExpressionForNode = () => {
-    const existing = findTestIdAttribute(element, testIdAttribute);
-    if (!existing) {
-      return "undefined";
-    }
-    if (existing.type === NodeTypes.ATTRIBUTE) {
-      const v = existing.value?.content;
-      if (!v) {
-        return "undefined";
-      }
-      return jsStringLiteral(v);
-    }
-    const directive = existing;
-    const exp2 = directive.exp;
-    if (!exp2 || exp2.type !== NodeTypes.SIMPLE_EXPRESSION) {
+    if (!resolvedRuntimeTestId) {
       return "undefined";
     }
-    const content = (exp2.content ?? "").trim();
-    if (!content) {
-      return "undefined";
+    if (resolvedRuntimeTestId.kind === "static") {
+      return jsStringLiteral(resolvedRuntimeTestId.value);
     }
-    return `(${content})`;
+    return `(${renderTemplateLiteralExpression(resolvedRuntimeTestId)})`;
   };
-  const testIdExpression2 = getTestIdExpressionForNode();
+  const testIdExpression = getTestIdExpressionForNode();
   const clickDirective = tryGetClickDirective(element);
   if (!clickDirective)
     return;
@@ -6495,10 +6861,10 @@ function tryWrapClickDirectiveForTestEvents(element, testIdAttribute) {
   const exp = clickDirective.exp;
   if (!exp)
     return;
-  const existingSource = (exp.loc?.source ?? (exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : "")).trim();
+  const existingSource = getVueExpressionSource(exp, "loc", "content");
   if (existingSource.includes(CLICK_EVENT_NAME))
     return;
-  const originalExpression = (exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : exp.loc?.source ?? "").trim();
+  const originalExpression = getVueExpressionSource(exp, "content", "loc");
   if (!originalExpression)
     return;
   const isStatementBody = (() => {
@@ -6515,7 +6881,7 @@ function tryWrapClickDirectiveForTestEvents(element, testIdAttribute) {
   const statementWrappedHandler = `($event) => {
   const __win = ($event && $event.view) ? $event.view : undefined;
   const __target = ($event && $event.currentTarget) ? $event.currentTarget : undefined;
-  const __testIdFromNode = ${testIdExpression2};
+  const __testIdFromNode = ${testIdExpression};
   const __testIdFromTarget = (__target && typeof __target.getAttribute === 'function') ? __target.getAttribute(${jsStringLiteral(testIdAttribute)}) : undefined;
   const __testId = (__testIdFromNode ?? __testIdFromTarget);
   const __emit = (phase, err) => {
@@ -6526,16 +6892,12 @@ function tryWrapClickDirectiveForTestEvents(element, testIdAttribute) {
         __w.dispatchEvent(new __CustomEvent('${CLICK_EVENT_NAME}', { detail: { testId: __testId, phase, err: err ? String(err) : undefined } }));
       }
     } catch (e) {
-      // Instrumentation must never hide failures during e2e strict mode.
-      // In strict mode we rethrow so tests fail fast and the underlying problem is visible.
-      // Outside strict mode we log and continue so we don't break real user clicks.
+      // Instrumentation failures should never be silent. Log the root cause and fail fast.
       const __w = __win || (__target && __target.ownerDocument && __target.ownerDocument.defaultView);
       if (__w && __w.console && typeof __w.console.error === 'function') {
         __w.console.error('[testid-click-event] failed to emit ${CLICK_EVENT_NAME}', e);
       }
-      if (__w && (__w[${JSON.stringify(TESTID_CLICK_EVENT_STRICT_FLAG)}] === true)) {
-        throw e;
-      }
+      throw e;
     }
   };
     const __w2 = __win || (__target && __target.ownerDocument && __target.ownerDocument.defaultView);
@@ -6566,7 +6928,7 @@ function tryWrapClickDirectiveForTestEvents(element, testIdAttribute) {
   const expressionWrappedHandler = `($event) => {
   const __win = ($event && $event.view) ? $event.view : undefined;
   const __target = ($event && $event.currentTarget) ? $event.currentTarget : undefined;
-  const __testIdFromNode = ${testIdExpression2};
+  const __testIdFromNode = ${testIdExpression};
   const __testIdFromTarget = (__target && typeof __target.getAttribute === 'function') ? __target.getAttribute(${jsStringLiteral(testIdAttribute)}) : undefined;
   const __testId = (__testIdFromNode ?? __testIdFromTarget);
   const __emit = (phase, err) => {
@@ -6577,16 +6939,12 @@ function tryWrapClickDirectiveForTestEvents(element, testIdAttribute) {
         __w.dispatchEvent(new __CustomEvent('${CLICK_EVENT_NAME}', { detail: { testId: __testId, phase, err: err ? String(err) : undefined } }));
       }
     } catch (e) {
-      // Instrumentation must never hide failures during e2e strict mode.
-      // In strict mode we rethrow so tests fail fast and the underlying problem is visible.
-      // Outside strict mode we log and continue so we don't break real user clicks.
+      // Instrumentation failures should never be silent. Log the root cause and fail fast.
       const __w = __win || (__target && __target.ownerDocument && __target.ownerDocument.defaultView);
       if (__w && __w.console && typeof __w.console.error === 'function') {
         __w.console.error('[testid-click-event] failed to emit ${CLICK_EVENT_NAME}', e);
       }
-      if (__w && (__w[${JSON.stringify(TESTID_CLICK_EVENT_STRICT_FLAG)}] === true)) {
-        throw e;
-      }
+      throw e;
     }
   };
     const __w2 = __win || (__target && __target.ownerDocument && __target.ownerDocument.defaultView);
@@ -6624,10 +6982,9 @@ function tryWrapClickDirectiveForTestEvents(element, testIdAttribute) {
 let previousFileName = "";
 const hierarchyMap = /* @__PURE__ */ new Map();
 function createTestIdTransform(componentName, componentHierarchyMap, nativeWrappers = {}, excludedComponents = [], viewsDirAbs, options = {}) {
-  const existingIdBehavior = options.existingIdBehavior ?? "preserve";
+  const existingIdBehavior = options.existingIdBehavior ?? "error";
   const testIdAttribute = (options.testIdAttribute || "data-testid").trim() || "data-testid";
-  const nameCollisionBehavior = options.nameCollisionBehavior ?? "suffix";
-  const missingSemanticNameBehavior = options.missingSemanticNameBehavior ?? "error";
+  const nameCollisionBehavior = options.nameCollisionBehavior ?? "error";
   const warn = options.warn;
   const vueFilesPathMap = options.vueFilesPathMap;
   const wrapperSearchRoots = options.wrapperSearchRoots ?? [];
@@ -6703,7 +7060,7 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
           conditionalHintByIfBranch.set(branch, hint);
           continue;
         }
-        const condSource = (cond.type === NodeTypes.SIMPLE_EXPRESSION ? cond.content : stringifyExpression(cond)).trim();
+        const condSource = getVueExpressionSource(cond, "content", "compiled");
         const stable = tryExtractStableHintFromConditionalExpressionSource(condSource);
         if (stable) {
           conditionalHintByIfBranch.set(branch, stable);
@@ -6765,17 +7122,18 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
         nativeWrappers[element.tag] = { role: "grid" };
       }
     }
-    const getBestAvailableKeyValue = () => {
+    const getBestAvailableKeyInfo = () => {
       const parentNode = context.parent && typeof context.parent === "object" ? context.parent : null;
       const isDirectVForChild = parentNode?.type === NodeTypes.FOR;
-      const vForKey = (isDirectVForChild ? getKeyDirectiveValue(element, context) : null) || getContainedInVForDirectiveKeyValue(context, element, hierarchyMap);
-      if (vForKey) return vForKey;
-      return getContainedInSlotDataKeyValue(element, hierarchyMap);
+      const vForKeyInfo = (isDirectVForChild ? getKeyDirectiveInfo(element) : null) || getContainedInVForDirectiveKeyInfo(context, element, hierarchyMap);
+      if (vForKeyInfo) {
+        return vForKeyInfo;
+      }
+      return getContainedInSlotDataKeyInfo(element, hierarchyMap);
     };
-    const bestKeyInferred = getBestAvailableKeyValue();
-    const isSlotKey = bestKeyInferred && !bestKeyInferred.startsWith("${");
-    const bestKeyPlaceholder = isSlotKey ? `\${${bestKeyInferred}}` : bestKeyInferred;
-    const bestKeyVariable = isSlotKey ? bestKeyInferred : null;
+    const bestKeyInfo = getBestAvailableKeyInfo();
+    const bestKeyPlaceholder = bestKeyInfo?.selectorFragment ?? null;
+    const bestRuntimeKeyPlaceholder = bestKeyInfo?.runtimeFragment ?? null;
     const keyValuesOverride = tryGetContainedInStaticVForSourceLiteralValues(context);
     const parentKey = context?.parent ? context.parent : null;
     const conditional = getConditionalDirectiveInfo(element);
@@ -6818,7 +7176,7 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
         if (!cond) {
           conditionalHint = "else";
         } else {
-          const condSource = (cond.type === NodeTypes.SIMPLE_EXPRESSION ? cond.content : stringifyExpression(cond)).trim();
+          const condSource = getVueExpressionSource(cond, "content", "compiled");
           conditionalHint = tryExtractStableHintFromConditionalExpressionSource(condSource) ?? "if";
         }
       }
@@ -6828,7 +7186,7 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
     });
     if (showDirective?.exp && (showDirective.exp.type === NodeTypes.SIMPLE_EXPRESSION || showDirective.exp.type === NodeTypes.COMPOUND_EXPRESSION)) {
       const exp = showDirective.exp;
-      const source = (exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : stringifyExpression(exp)).trim();
+      const source = getVueExpressionSource(exp, "content", "compiled");
       const showHint = tryExtractStableHintFromConditionalExpressionSource(source);
       if (showHint) {
         conditionalHint = conditionalHint ? `${conditionalHint} ${showHint}` : showHint;
@@ -6862,13 +7220,17 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
       const tagSuffix = getTagSuffix();
       return bestKeyPlaceholder ? templateAttributeValue(`${componentName}-${bestKeyPlaceholder}${clickSuffix}${tagSuffix}`) : staticAttributeValue(`${componentName}${clickSuffix}${tagSuffix}`);
     };
+    const getClickRuntimeDataTestId = (clickSuffix) => {
+      const tagSuffix = getTagSuffix();
+      return bestRuntimeKeyPlaceholder ? templateAttributeValue(`${componentName}-${bestRuntimeKeyPlaceholder}${clickSuffix}${tagSuffix}`) : staticAttributeValue(`${componentName}${clickSuffix}${tagSuffix}`);
+    };
     const getSubmitDataTestId = (identifier) => {
       const tagSuffix = getTagSuffix();
       return `${componentName}-${identifier}${tagSuffix}`;
     };
     const applyResolvedDataTestIdForElement = (args) => {
       const nativeRole = args.nativeRoleOverride ?? getNativeRoleFromTagSuffix();
-      applyResolvedDataTestId({
+      return applyResolvedDataTestId({
         element,
         componentName,
         parentComponentName,
@@ -6878,8 +7240,8 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
         generatedMethodContentByComponent,
         nativeRole,
         preferredGeneratedValue: args.preferredGeneratedValue,
-        bestKeyPlaceholder,
-        bestKeyVariable,
+        preferredRuntimeValue: args.preferredRuntimeValue,
+        keyInfo: bestKeyInfo,
         keyValuesOverride,
         entryOverrides: args.entryOverrides,
         semanticNameHint: args.semanticNameHint,
@@ -6897,7 +7259,7 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
       return p.type === NodeTypes.DIRECTIVE && p.name === "bind" && p.arg?.type === NodeTypes.SIMPLE_EXPRESSION && p.arg.content === "handler" && !!p.exp;
     }) ?? null;
     const handlerInfo = handlerDirective ? nodeHandlerAttributeInfo(element) : null;
-    if (missingSemanticNameBehavior === "error" && nativeWrappers[element.tag]?.role === "button" && handlerDirective && !handlerInfo) {
+    if (nativeWrappers[element.tag]?.role === "button" && handlerDirective && !handlerInfo) {
       const loc = element.loc?.start;
       const locationHint = loc ? `${loc.line}:${loc.column}` : "unknown";
       const handlerSource = (handlerDirective.exp?.loc?.source ?? "").trim() || "<unknown>";
@@ -6906,7 +7268,7 @@ function createTestIdTransform(componentName, componentHierarchyMap, nativeWrapp
 Element: <${element.tag}>
 Handler: ${handlerSource}
 
-Fix: move complex inline logic into a named function (for example, const onAction = () => ...; then bind :handler="onAction"), or simplify the handler to a direct identifier/call the generator can name. You can also set errorBehavior = "ignore" to keep generic fallback behavior.`
+Fix: move complex inline logic into a named function (for example, const onAction = () => ...; then bind :handler="onAction"), or simplify the handler to a direct identifier/call the generator can name.`
       );
     }
     if (nativeWrappersValue) {
@@ -7033,20 +7395,20 @@ Fix: remove the explicit ${attrLabel}, or change existingIdBehavior to "overwrit
         contextFilename: context.filename
       });
       const clickHint = trimLeadingSeparators(clickSuffix) || void 0;
-      const idOrName = getIdOrName(element) || void 0;
+      const idOrName = getStaticIdOrNameHint(element) || void 0;
       const semanticHintCandidates = [clickHint, idOrName, innerText, conditionalHint].map((value) => (value ?? "").trim()).filter(Boolean).filter((value, index, values) => values.indexOf(value) === index);
       const [semanticNameHint2, ...semanticNameHintAlternates] = semanticHintCandidates;
       const pomMergeKey = clickHint ? `click:hint:${clickHint}` : void 0;
       const testId = getClickDataTestId(clickSuffix);
-      applyResolvedDataTestIdForElement({
+      const runtimeTestId = getClickRuntimeDataTestId(clickSuffix);
+      const resolvedDataTestId = applyResolvedDataTestIdForElement({
         preferredGeneratedValue: testId,
+        preferredRuntimeValue: runtimeTestId,
         semanticNameHint: semanticNameHint2,
         semanticNameHintAlternates,
         pomMergeKey
       });
-      {
-        tryWrapClickDirectiveForTestEvents(element, testIdAttribute);
-      }
+      tryWrapClickDirectiveForTestEvents(element, testIdAttribute, resolvedDataTestId.runtimeValue);
       return;
     }
     const existingElementDataTestId = tryGetExistingElementDataTestId(element, testIdAttribute);
@@ -7056,7 +7418,7 @@ Fix: remove the explicit ${attrLabel}, or change existingIdBehavior to "overwrit
       if (!isRecognizedInteractiveRole) {
         return;
       }
-      const identifierHint = getIdOrName(element) || nodeHandlerAttributeValue(element) || innerText || existingElementDataTestId.value || conditionalHint || void 0;
+      const identifierHint = getStaticIdOrNameHint(element) || nodeHandlerAttributeValue(element) || innerText || existingElementDataTestId.value || conditionalHint || void 0;
       const preferredGeneratedValue = existingElementDataTestId.isDynamic ? templateAttributeValue(existingElementDataTestId.template) : staticAttributeValue(existingElementDataTestId.value);
       applyResolvedDataTestIdForElement({
         preferredGeneratedValue,
@@ -7066,7 +7428,7 @@ Fix: remove the explicit ${attrLabel}, or change existingIdBehavior to "overwrit
     }
     const isSubmit = element.props.find((p) => p.type === NodeTypes.ATTRIBUTE && p.name === "type")?.value?.content === "submit";
     if (isSubmit) {
-      const identifier = getIdOrName(element) || innerText;
+      const identifier = getStaticIdOrNameHint(element) || innerText;
       if (!identifier) {
         const loc = element.loc?.start;
         const locationHint = loc ? `${loc.line}:${loc.column}` : "unknown";
@@ -7118,29 +7480,32 @@ function createBuildProcessorPlugin(options) {
     getSourceDirs,
     basePageClassPath,
     normalizedBasePagePath,
+    generation,
+    projectRootRef,
+    nativeWrappers,
+    excludedComponents,
+    getWrapperSearchRoots,
+    getResolvedRouterEntry,
+    loggerRef
+  } = options;
+  const {
     outDir,
     emitLanguages,
     typescriptOutputStructure,
     csharp,
     generateFixtures,
     customPomAttachments,
-    projectRootRef,
     customPomDir,
+    requireCustomPomDir,
     customPomImportAliases,
     customPomImportNameCollisionBehavior,
     testIdAttribute,
     nameCollisionBehavior,
-    missingSemanticNameBehavior = "error",
     existingIdBehavior,
-    nativeWrappers,
-    excludedComponents,
-    getWrapperSearchRoots,
     routerAwarePoms,
-    getResolvedRouterEntry,
     routerType,
-    routerModuleShims,
-    loggerRef
-  } = options;
+    routerModuleShims
+  } = generation;
   let lastGeneratedMetrics = {
     entryCount: 0,
     interactiveComponentCount: 0,
@@ -7239,10 +7604,9 @@ function createBuildProcessorPlugin(options) {
                 excludedComponents,
                 getViewsDirAbs(),
                 {
-                  existingIdBehavior: existingIdBehavior ?? "preserve",
+                  existingIdBehavior: existingIdBehavior ?? "error",
                   testIdAttribute,
                   nameCollisionBehavior,
-                  missingSemanticNameBehavior,
                   warn: (message) => loggerRef.current.warn(message),
                   vueFilesPathMap,
                   wrapperSearchRoots: getWrapperSearchRoots()
@@ -7342,6 +7706,7 @@ function createBuildProcessorPlugin(options) {
         customPomAttachments,
         projectRoot: projectRootRef.current,
         customPomDir,
+        requireCustomPomDir,
         customPomImportAliases,
         customPomImportNameCollisionBehavior,
         testIdAttribute,
@@ -7373,6 +7738,11 @@ function createDevProcessorPlugin(options) {
     projectRootRef,
     normalizedBasePagePath,
     basePageClassPath,
+    generation,
+    getResolvedRouterEntry,
+    loggerRef
+  } = options;
+  const {
     outDir,
     emitLanguages,
     typescriptOutputStructure,
@@ -7380,18 +7750,16 @@ function createDevProcessorPlugin(options) {
     generateFixtures,
     customPomAttachments,
     customPomDir,
+    requireCustomPomDir,
     customPomImportAliases,
     customPomImportNameCollisionBehavior,
-    nameCollisionBehavior = "suffix",
-    missingSemanticNameBehavior = "error",
+    nameCollisionBehavior,
     existingIdBehavior,
     testIdAttribute,
     routerAwarePoms,
-    getResolvedRouterEntry,
     routerType,
-    routerModuleShims,
-    loggerRef
-  } = options;
+    routerModuleShims
+  } = generation;
   let scheduleVueFileRegen = null;
   const getProjectRootCandidates = () => Array.from(/* @__PURE__ */ new Set([
     path.resolve(projectRootRef.current),
@@ -7578,9 +7946,8 @@ function createDevProcessorPlugin(options) {
               excludedComponents,
               getViewsDirAbs(),
               {
-                existingIdBehavior: existingIdBehavior ?? "preserve",
+                existingIdBehavior: existingIdBehavior ?? "error",
                 nameCollisionBehavior,
-                missingSemanticNameBehavior,
                 testIdAttribute,
                 warn: (message) => loggerRef.current.warn(message),
                 vueFilesPathMap: provisionalVuePathMap,
@@ -7631,6 +7998,7 @@ function createDevProcessorPlugin(options) {
           customPomAttachments,
           projectRoot: projectRootRef.current,
           customPomDir,
+          requireCustomPomDir,
           customPomImportAliases,
           customPomImportNameCollisionBehavior,
           pageDirs: getPageDirs(),
@@ -7805,8 +8173,119 @@ function createDevProcessorPlugin(options) {
     }
   };
 }
-function generateTestIdsModule(componentTestIds) {
-  const manifestEntries = Array.from(componentTestIds.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+function removeByKeySegment(value) {
+  const idx = value.indexOf("ByKey");
+  if (idx < 0) {
+    return value;
+  }
+  return value.slice(0, idx) + value.slice(idx + "ByKey".length);
+}
+function hasRoleSuffix(baseName, roleSuffix) {
+  if (baseName.endsWith(roleSuffix)) {
+    return true;
+  }
+  const re = new RegExp(`^${roleSuffix}\\d+$`);
+  return re.test(baseName);
+}
+function getGeneratedPropertyName(pom) {
+  if (pom.getterNameOverride) {
+    return pom.getterNameOverride;
+  }
+  const roleSuffix = upperFirst(pom.nativeRole || "Element");
+  const baseName = upperFirst(pom.methodName);
+  const propertyName = hasRoleSuffix(baseName, roleSuffix) ? baseName : `${baseName}${roleSuffix}`;
+  return pom.selector.patternKind === "parameterized" ? removeByKeySegment(propertyName) : propertyName;
+}
+function getGeneratedActionName(entry, pom) {
+  const methodNameUpper = upperFirst(pom.methodName);
+  const radioMethodNameUpper = upperFirst(pom.methodName || "Radio");
+  const isNavigation = !!entry.targetPageObjectModelClass;
+  if (isNavigation) {
+    return `goTo${methodNameUpper}`;
+  }
+  switch (pom.nativeRole) {
+    case "input":
+      return `type${methodNameUpper}`;
+    case "select":
+    case "vselect":
+      return `select${methodNameUpper}`;
+    case "radio":
+      return `select${radioMethodNameUpper}`;
+    default:
+      return `click${methodNameUpper}`;
+  }
+}
+function matchesPrimarySelector(extraMethod, pom) {
+  if (extraMethod.selector.kind !== "testId") {
+    return false;
+  }
+  return extraMethod.selector.testId.formatted === pom.selector.formatted && extraMethod.selector.testId.patternKind === pom.selector.patternKind;
+}
+function getManifestEntry(componentName, entry, componentMetadata, extraMethods) {
+  const testId = entry.selectorValue.formatted;
+  const metadata = componentMetadata?.get(testId);
+  const pom = entry.pom;
+  const generatedActionName = pom ? getGeneratedActionName(entry, pom) : null;
+  const extraActionNames = pom ? extraMethods.filter((extraMethod) => matchesPrimarySelector(extraMethod, pom)).map((extraMethod) => extraMethod.name).sort((a, b) => a.localeCompare(b)) : [];
+  const generatedActionNames = Array.from(/* @__PURE__ */ new Set([
+    ...generatedActionName ? [generatedActionName] : [],
+    ...extraActionNames.filter((name) => name !== generatedActionName)
+  ]));
+  return {
+    testId,
+    selectorPatternKind: entry.selectorValue.patternKind,
+    semanticName: metadata?.semanticName ?? (pom ? humanizePomMethodName(pom.methodName) : testId),
+    locatorDescription: pom ? buildPomLocatorDescription({
+      componentName,
+      methodName: pom.methodName,
+      nativeRole: pom.nativeRole
+    }) : componentName,
+    inferredRole: pom?.nativeRole ?? null,
+    generatedPropertyName: pom ? getGeneratedPropertyName(pom) : null,
+    generatedActionName,
+    generatedActionNames,
+    emitPrimary: pom?.emitPrimary !== false,
+    ...entry.targetPageObjectModelClass ? { targetPageObjectModelClass: entry.targetPageObjectModelClass } : {},
+    ...metadata?.tag ? { sourceTag: metadata.tag } : {},
+    ...metadata ? { sourceTagType: metadata.tagType } : {},
+    ...metadata?.patchFlag !== void 0 ? { patchFlag: metadata.patchFlag } : {},
+    ...metadata?.dynamicProps?.length ? { dynamicProps: metadata.dynamicProps } : {},
+    ...metadata?.hasClickHandler !== void 0 ? { hasClickHandler: metadata.hasClickHandler } : {},
+    ...metadata?.hasDynamicClass !== void 0 ? { hasDynamicClass: metadata.hasDynamicClass } : {},
+    ...metadata?.hasDynamicStyle !== void 0 ? { hasDynamicStyle: metadata.hasDynamicStyle } : {},
+    ...metadata?.hasDynamicText !== void 0 ? { hasDynamicText: metadata.hasDynamicText } : {}
+  };
+}
+function buildPomManifest(componentHierarchyMap, elementMetadata) {
+  const manifestEntries = Array.from(componentHierarchyMap.entries()).sort((a, b) => a[0].localeCompare(b[0])).map(([componentName, dependencies]) => {
+    const entries = Array.from(dependencies.dataTestIdSet).sort((a, b) => a.selectorValue.formatted.localeCompare(b.selectorValue.formatted)).map((entry) => getManifestEntry(componentName, entry, elementMetadata.get(componentName), dependencies.pomExtraMethods ?? []));
+    if (!entries.length) {
+      return null;
+    }
+    return [componentName, {
+      componentName,
+      className: componentName,
+      sourceFile: dependencies.filePath,
+      kind: dependencies.isView ? "view" : "component",
+      testIds: Array.from(new Set(entries.map((entry) => entry.testId))),
+      entries
+    }];
+  }).filter((entry) => entry !== null);
+  return Object.fromEntries(manifestEntries);
+}
+function buildTestIdManifest(pomManifest) {
+  return Object.fromEntries(
+    Object.entries(pomManifest).map(([componentName, component]) => [componentName, Array.from(new Set(component.testIds)).sort((a, b) => a.localeCompare(b))])
+  );
+}
+function writeConstJson(value) {
+  return (writer) => {
+    writer.write(`${JSON.stringify(value, null, 2)} as const`);
+  };
+}
+function generateTestIdsModule(componentHierarchyMap, elementMetadata) {
+  const pomManifest = buildPomManifest(componentHierarchyMap, elementMetadata);
+  const testIdManifest = buildTestIdManifest(pomManifest);
   return renderSourceFile("virtual-testids.ts", (sourceFile) => {
     sourceFile.addStatements("// Virtual module: test id manifest");
     sourceFile.addVariableStatement({
@@ -7814,16 +8293,15 @@ function generateTestIdsModule(componentTestIds) {
       isExported: true,
       declarations: [{
         name: "testIdManifest",
-        initializer: (writer) => {
-          writer.write("{").newLine();
-          writer.indent(() => {
-            manifestEntries.forEach(([componentName, testIds], index) => {
-              const suffix = index === manifestEntries.length - 1 ? "" : ",";
-              writer.writeLine(`${JSON.stringify(componentName)}: ${JSON.stringify(Array.from(testIds).sort())}${suffix}`);
-            });
-          });
-          writer.write("} as const");
-        }
+        initializer: writeConstJson(testIdManifest)
+      }]
+    });
+    sourceFile.addVariableStatement({
+      declarationKind: VariableDeclarationKind.Const,
+      isExported: true,
+      declarations: [{
+        name: "pomManifest",
+        initializer: writeConstJson(pomManifest)
       }]
     });
     sourceFile.addTypeAlias({
@@ -7836,27 +8314,67 @@ function generateTestIdsModule(componentTestIds) {
       name: "ComponentName",
       type: "keyof TestIdManifest"
     });
+    sourceFile.addTypeAlias({
+      isExported: true,
+      name: "PomManifest",
+      type: "typeof pomManifest"
+    });
+    sourceFile.addTypeAlias({
+      isExported: true,
+      name: "PomManifestComponentName",
+      type: "keyof PomManifest"
+    });
+  });
+}
+function generatePomManifestModule(componentHierarchyMap, elementMetadata) {
+  const pomManifest = buildPomManifest(componentHierarchyMap, elementMetadata);
+  return renderSourceFile("virtual-pom-manifest.ts", (sourceFile) => {
+    sourceFile.addStatements("// Virtual module: richer POM discoverability manifest");
+    sourceFile.addVariableStatement({
+      declarationKind: VariableDeclarationKind.Const,
+      isExported: true,
+      declarations: [{
+        name: "pomManifest",
+        initializer: writeConstJson(pomManifest)
+      }]
+    });
+    sourceFile.addTypeAlias({
+      isExported: true,
+      name: "PomManifest",
+      type: "typeof pomManifest"
+    });
+    sourceFile.addTypeAlias({
+      isExported: true,
+      name: "PomManifestComponentName",
+      type: "keyof PomManifest"
+    });
   });
 }
-const VIRTUAL_ID = "virtual:testids";
-const RESOLVED_ID = `\0${VIRTUAL_ID}`;
-function createTestIdsVirtualModulesPlugin(componentTestIds) {
+const TEST_IDS_VIRTUAL_ID = "virtual:testids";
+const TEST_IDS_RESOLVED_ID = `\0${TEST_IDS_VIRTUAL_ID}`;
+const POM_MANIFEST_VIRTUAL_ID = "virtual:pom-manifest";
+const POM_MANIFEST_RESOLVED_ID = `\0${POM_MANIFEST_VIRTUAL_ID}`;
+function createTestIdsVirtualModulesPlugin(componentHierarchyMap, elementMetadata) {
   return {
     name: "vue-pom-generator:virtual-testids",
     resolveId(id) {
-      if (id === VIRTUAL_ID)
-        return RESOLVED_ID;
+      if (id === TEST_IDS_VIRTUAL_ID)
+        return TEST_IDS_RESOLVED_ID;
+      if (id === POM_MANIFEST_VIRTUAL_ID)
+        return POM_MANIFEST_RESOLVED_ID;
     },
     load(id) {
-      if (id === RESOLVED_ID)
-        return generateTestIdsModule(componentTestIds);
+      if (id === TEST_IDS_RESOLVED_ID)
+        return generateTestIdsModule(componentHierarchyMap, elementMetadata);
+      if (id === POM_MANIFEST_RESOLVED_ID)
+        return generatePomManifestModule(componentHierarchyMap, elementMetadata);
     }
   };
 }
 function createSupportPlugins(options) {
   const {
-    componentTestIds,
     componentHierarchyMap,
+    elementMetadata,
     vueFilesPathMap,
     nativeWrappers,
     excludedComponents,
@@ -7866,27 +8384,30 @@ function createSupportPlugins(options) {
     getViewsDir,
     getSourceDirs,
     getWrapperSearchRoots,
-    nameCollisionBehavior = "suffix",
-    missingSemanticNameBehavior = "error",
-    existingIdBehavior,
+    generation,
+    projectRootRef,
+    basePageClassPath: basePageClassPathOverride,
+    loggerRef
+  } = options;
+  const {
     outDir,
     emitLanguages,
     typescriptOutputStructure,
     csharp,
-    routerAwarePoms,
-    routerEntry,
-    routerType,
-    routerModuleShims,
     generateFixtures,
     customPomAttachments,
-    projectRootRef,
-    basePageClassPath: basePageClassPathOverride,
     customPomDir,
+    requireCustomPomDir,
     customPomImportAliases,
     customPomImportNameCollisionBehavior,
+    nameCollisionBehavior,
+    existingIdBehavior,
     testIdAttribute,
-    loggerRef
-  } = options;
+    routerAwarePoms,
+    routerEntry,
+    routerType,
+    routerModuleShims
+  } = generation;
   const resolveRouterEntry2 = () => {
     if (!routerAwarePoms)
       return void 0;
@@ -7915,27 +8436,12 @@ function createSupportPlugins(options) {
     getSourceDirs,
     basePageClassPath,
     normalizedBasePagePath,
-    outDir,
-    emitLanguages,
-    typescriptOutputStructure,
-    csharp,
-    generateFixtures,
-    customPomAttachments,
+    generation,
     projectRootRef,
-    customPomDir,
-    customPomImportAliases,
-    customPomImportNameCollisionBehavior,
-    testIdAttribute,
-    nameCollisionBehavior,
-    missingSemanticNameBehavior,
-    existingIdBehavior,
     nativeWrappers,
     excludedComponents,
     getWrapperSearchRoots,
-    routerAwarePoms,
-    routerType,
     getResolvedRouterEntry: resolveRouterEntry2,
-    routerModuleShims,
     loggerRef
   });
   const devProcessor = createDevProcessorPlugin({
@@ -7950,26 +8456,11 @@ function createSupportPlugins(options) {
     projectRootRef,
     normalizedBasePagePath,
     basePageClassPath,
-    outDir,
-    emitLanguages,
-    typescriptOutputStructure,
-    csharp,
-    generateFixtures,
-    customPomAttachments,
-    customPomDir,
-    customPomImportAliases,
-    customPomImportNameCollisionBehavior,
-    nameCollisionBehavior,
-    missingSemanticNameBehavior,
-    existingIdBehavior,
-    testIdAttribute,
-    routerAwarePoms,
-    routerType,
+    generation,
     getResolvedRouterEntry: resolveRouterEntry2,
-    routerModuleShims,
     loggerRef
   });
-  const virtualModules = createTestIdsVirtualModulesPlugin(componentTestIds);
+  const virtualModules = createTestIdsVirtualModulesPlugin(componentHierarchyMap, elementMetadata);
   return [tsProcessor, devProcessor, virtualModules];
 }
 function findDataTestIdProp(element, attributeName = "data-testid") {
@@ -8303,8 +8794,7 @@ function createVuePluginWithTestIds(options) {
       });
       const api = viteVuePlugin?.api;
       if (!api) {
-        loggerRef.current.warn("[vue-pom-generator] Nuxt bridge could not find vite:vue plugin to patch.");
-        return;
+        throw new Error("[vue-pom-generator] Nuxt bridge could not find vite:vue plugin to patch.");
       }
       const currentOptions = api.options ?? {};
       const currentTemplate = currentOptions.template ?? {};
@@ -8370,33 +8860,6 @@ function assertOneOf(value, allowed, name) {
   }
   throw new TypeError(`${name} must be one of: ${allowed.join(", ")}.`);
 }
-function assertErrorBehavior(value, name) {
-  if (!value) {
-    return;
-  }
-  if (value === "ignore" || value === "error") {
-    return;
-  }
-  if (typeof value !== "object" || Array.isArray(value)) {
-    throw new TypeError(`${name} must be "ignore", "error", or an object.`);
-  }
-  const supportedKeys = /* @__PURE__ */ new Set(["missingSemanticNameBehavior"]);
-  for (const key of Object.keys(value)) {
-    if (!supportedKeys.has(key)) {
-      throw new TypeError(`${name} contains unsupported key "${key}".`);
-    }
-  }
-  assertOneOf(value.missingSemanticNameBehavior, ["ignore", "error"], `${name}.missingSemanticNameBehavior`);
-}
-function resolveMissingSemanticNameBehavior(value) {
-  if (!value) {
-    return "error";
-  }
-  if (value === "ignore" || value === "error") {
-    return value;
-  }
-  return value.missingSemanticNameBehavior ?? "error";
-}
 function readPackageJson(projectRoot) {
   const packageJsonPath = path.join(projectRoot, "package.json");
   if (!fs.existsSync(packageJsonPath)) {
@@ -8487,7 +8950,6 @@ function getSharedGeneratorState(key) {
   let state = sharedGeneratorStateRegistry.get(key);
   if (!state) {
     state = {
-      componentTestIds: /* @__PURE__ */ new Map(),
       elementMetadata: /* @__PURE__ */ new Map(),
       semanticNameMap: /* @__PURE__ */ new Map(),
       componentHierarchyMap: /* @__PURE__ */ new Map(),
@@ -8505,7 +8967,7 @@ function applyTemplateCompilerOptionsToResolvedVuePlugin(config, templateCompile
         '[vue-pom-generator] vuePluginOwnership="external" requires the resolved Vite Vue plugin, but none was found. Add vue() to your Vite plugins before spreading createVuePomGeneratorPlugins(...).'
       );
     }
-    throw new Error("[vue-pom-generator] Nuxt mode requires the resolved Vite Vue plugin, but none was found.");
+    throw new Error("[vue-pom-generator] Nuxt bridge could not find vite:vue plugin to patch.");
   }
   const currentOptions = viteVuePlugin.api.options ?? {};
   const currentTemplate = currentOptions.template ?? {};
@@ -8562,18 +9024,23 @@ function createVuePomGeneratorPlugins(options = {}) {
   const vueGenerationOptions = generationOptions;
   const verbosity = options.logging?.verbosity ?? "warn";
   const vueOptions = options.vueOptions;
-  const legacyVueOptions = options;
-  const pageDirsRef = { current: !isNuxt ? [legacyVueOptions.injection?.viewsDir ?? "src/views"] : ["app/pages"] };
-  const componentDirsRef = { current: !isNuxt ? legacyVueOptions.injection?.componentDirs ?? ["src/components"] : ["app/components"] };
-  const layoutDirsRef = { current: !isNuxt ? legacyVueOptions.injection?.layoutDirs ?? ["src/layouts"] : ["app/layouts"] };
-  const wrapperSearchRootsRef = { current: !isNuxt ? legacyVueOptions.injection?.wrapperSearchRoots ?? [] : [] };
-  const nativeWrappers = injection.nativeWrappers ?? {};
-  const excludedComponents = injection.excludeComponents ?? [];
-  const testIdAttribute = (injection.attribute ?? "data-testid").trim() || "data-testid";
-  const existingIdBehavior = injection.existingIdBehavior ?? "preserve";
-  const outDir = (generationOptions?.outDir ?? "tests/playwright/__generated__").trim();
-  const emitLanguages = generationOptions?.emit && generationOptions.emit.length ? generationOptions.emit : ["ts"];
-  const nameCollisionBehavior = generationOptions?.nameCollisionBehavior ?? "suffix";
+  const resolvedInjectionOptionsRef = {
+    current: resolveInjectionSupportOptions({
+      isNuxt,
+      viewsDir: injection.viewsDir,
+      componentDirs: injection.componentDirs,
+      layoutDirs: injection.layoutDirs,
+      wrapperSearchRoots: injection.wrapperSearchRoots,
+      nativeWrappers: injection.nativeWrappers,
+      excludedComponents: injection.excludeComponents,
+      existingIdBehavior: injection.existingIdBehavior,
+      testIdAttribute: injection.attribute
+    })
+  };
+  const resolvedInjectionOptions = resolvedInjectionOptionsRef.current;
+  const nativeWrappers = resolvedInjectionOptions.nativeWrappers;
+  const excludedComponents = resolvedInjectionOptions.excludedComponents;
+  const testIdAttribute = resolvedInjectionOptions.testIdAttribute;
   const routerEntry = !isNuxt ? vueGenerationOptions?.router?.entry : void 0;
   const routerType = isNuxt ? "nuxt" : vueGenerationOptions?.router?.type ?? "vue-router";
   const routerModuleShims = !isNuxt ? vueGenerationOptions?.router?.moduleShims : void 0;
@@ -8582,27 +9049,41 @@ function createVuePomGeneratorPlugins(options = {}) {
   }
   const vuePluginOwnership = isNuxt ? "external" : options.vuePluginOwnership ?? "internal";
   const usesExternalVuePlugin = vuePluginOwnership === "external";
-  const csharp = generationOptions?.csharp;
-  const errorBehavior = options.errorBehavior;
-  const missingSemanticNameBehavior = resolveMissingSemanticNameBehavior(errorBehavior);
-  const typescriptOutputStructure = generationOptions?.playwright?.outputStructure ?? "aggregated";
   const generateFixtures = generationOptions?.playwright?.fixtures;
   const customPoms = generationOptions?.playwright?.customPoms;
   const resolvedCustomPomAttachments = customPoms?.attachments ?? [];
-  const resolvedCustomPomDir = customPoms?.dir ?? "tests/playwright/pom/custom";
   const resolvedCustomPomImportAliases = customPoms?.importAliases;
-  const resolvedCustomPomImportCollisionBehavior = customPoms?.importNameCollisionBehavior ?? "error";
+  const requireCustomPomDir = customPoms?.dir !== void 0 || resolvedCustomPomAttachments.length > 0 || Object.keys(resolvedCustomPomImportAliases ?? {}).length > 0;
+  const resolvedGenerationOptions = resolveGenerationSupportOptions({
+    outDir: generationOptions?.outDir,
+    emitLanguages: generationOptions?.emit,
+    typescriptOutputStructure: generationOptions?.playwright?.outputStructure,
+    csharp: generationOptions?.csharp,
+    generateFixtures,
+    customPomAttachments: resolvedCustomPomAttachments,
+    customPomDir: customPoms?.dir,
+    requireCustomPomDir,
+    customPomImportAliases: resolvedCustomPomImportAliases,
+    customPomImportNameCollisionBehavior: customPoms?.importNameCollisionBehavior,
+    nameCollisionBehavior: generationOptions?.nameCollisionBehavior,
+    existingIdBehavior: resolvedInjectionOptions.existingIdBehavior,
+    testIdAttribute,
+    routerAwarePoms: typeof routerEntry === "string" && routerEntry.trim().length > 0 || routerType === "nuxt",
+    routerEntry,
+    routerType,
+    routerModuleShims
+  });
   const basePageClassPathOverride = generationOptions?.basePageClassPath;
-  const getPageDirs = () => pageDirsRef.current;
+  const getPageDirs = () => resolvedInjectionOptionsRef.current.pageDirs;
   const getViewsDir = () => getPageDirs()[0] ?? "src/views";
-  const getComponentDirs = () => componentDirsRef.current;
-  const getLayoutDirs = () => layoutDirsRef.current;
+  const getComponentDirs = () => resolvedInjectionOptionsRef.current.componentDirs;
+  const getLayoutDirs = () => resolvedInjectionOptionsRef.current.layoutDirs;
   const getSourceDirs = () => Array.from(/* @__PURE__ */ new Set([
     ...getPageDirs(),
     ...getComponentDirs(),
     ...getLayoutDirs()
   ]));
-  const getWrapperSearchRoots = () => wrapperSearchRootsRef.current;
+  const getWrapperSearchRoots = () => resolvedInjectionOptionsRef.current.wrapperSearchRoots;
   const sharedStateKey = JSON.stringify({
     cwd: process.cwd(),
     mode: isNuxt ? "nuxt" : "vue",
@@ -8610,9 +9091,9 @@ function createVuePomGeneratorPlugins(options = {}) {
     componentDirs: isNuxt ? null : getComponentDirs(),
     layoutDirs: isNuxt ? null : getLayoutDirs(),
     wrapperSearchRoots: isNuxt ? null : getWrapperSearchRoots(),
-    outDir,
+    outDir: resolvedGenerationOptions.outDir,
     testIdAttribute,
-    routerType,
+    routerType: resolvedGenerationOptions.routerType,
     vuePluginOwnership
   });
   const sharedState = getSharedGeneratorState(sharedStateKey);
@@ -8633,23 +9114,22 @@ function createVuePomGeneratorPlugins(options = {}) {
       if (isNuxt) {
         const nuxtDiscovery = await loadNuxtProjectDiscovery(process.cwd());
         projectRootRef.current = nuxtDiscovery.rootDir;
-        pageDirsRef.current = nuxtDiscovery.pageDirs.length ? nuxtDiscovery.pageDirs : [path.resolve(nuxtDiscovery.srcDir, "pages")];
-        componentDirsRef.current = nuxtDiscovery.componentDirs;
-        layoutDirsRef.current = nuxtDiscovery.layoutDirs;
-        wrapperSearchRootsRef.current = nuxtDiscovery.wrapperSearchRoots;
+        resolvedInjectionOptionsRef.current = applyNuxtDiscoveryToInjectionOptions(
+          resolvedInjectionOptionsRef.current,
+          nuxtDiscovery
+        );
       }
       assertNonEmptyString(testIdAttribute, "[vue-pom-generator] injection.attribute");
       assertNonEmptyString(getViewsDir(), "[vue-pom-generator] injection.viewsDir");
       assertNonEmptyStringArray(getComponentDirs(), "[vue-pom-generator] injection.componentDirs");
       assertNonEmptyStringArray(getLayoutDirs(), "[vue-pom-generator] injection.layoutDirs");
       assertNonEmptyStringArray(getWrapperSearchRoots(), "[vue-pom-generator] injection.wrapperSearchRoots");
-      assertErrorBehavior(errorBehavior, "[vue-pom-generator] errorBehavior");
       if (generationEnabled) {
-        assertNonEmptyString(outDir, "[vue-pom-generator] generation.outDir");
-        assertOneOf(typescriptOutputStructure, ["aggregated", "split"], "[vue-pom-generator] generation.playwright.outputStructure");
-        assertRouterModuleShims(routerModuleShims, "[vue-pom-generator] generation.router.moduleShims");
-        if (!isNuxt && vueGenerationOptions?.router && routerType === "vue-router") {
-          assertNonEmptyString(routerEntry, "[vue-pom-generator] generation.router.entry");
+        assertNonEmptyString(resolvedGenerationOptions.outDir, "[vue-pom-generator] generation.outDir");
+        assertOneOf(resolvedGenerationOptions.typescriptOutputStructure, ["aggregated", "split"], "[vue-pom-generator] generation.playwright.outputStructure");
+        assertRouterModuleShims(resolvedGenerationOptions.routerModuleShims, "[vue-pom-generator] generation.router.moduleShims");
+        if (!isNuxt && vueGenerationOptions?.router && resolvedGenerationOptions.routerType === "vue-router") {
+          assertNonEmptyString(resolvedGenerationOptions.routerEntry, "[vue-pom-generator] generation.router.entry");
         }
       }
       if (usesExternalVuePlugin) {
@@ -8668,11 +9148,11 @@ function createVuePomGeneratorPlugins(options = {}) {
   };
   const getViewsDirAbs = () => resolveFromProjectRoot(projectRootRef.current, getViewsDir());
   const getWrapperSearchRootsAbs = () => getWrapperSearchRoots().map((root) => resolveFromProjectRoot(projectRootRef.current, root));
-  const { componentTestIds, elementMetadata, semanticNameMap, componentHierarchyMap, vueFilesPathMap } = sharedState;
+  const { elementMetadata, semanticNameMap, componentHierarchyMap, vueFilesPathMap } = sharedState;
   const { metadataCollectorPlugin, internalVuePlugin, templateCompilerOptions } = createVuePluginWithTestIds({
     vueOptions,
-    existingIdBehavior,
-    nameCollisionBehavior,
+    existingIdBehavior: resolvedGenerationOptions.existingIdBehavior,
+    nameCollisionBehavior: resolvedGenerationOptions.nameCollisionBehavior,
     nativeWrappers,
     elementMetadata,
     semanticNameMap,
@@ -8687,10 +9167,9 @@ function createVuePomGeneratorPlugins(options = {}) {
     getProjectRoot: () => projectRootRef.current
   });
   templateCompilerOptionsForResolvedPlugin = templateCompilerOptions;
-  const routerAwarePoms = typeof routerEntry === "string" && routerEntry.trim().length > 0 || routerType === "nuxt";
   const supportPlugins = createSupportPlugins({
-    componentTestIds,
     componentHierarchyMap,
+    elementMetadata,
     vueFilesPathMap,
     nativeWrappers,
     excludedComponents,
@@ -8700,26 +9179,10 @@ function createVuePomGeneratorPlugins(options = {}) {
     getViewsDir,
     getSourceDirs,
     getWrapperSearchRoots: getWrapperSearchRootsAbs,
-    nameCollisionBehavior,
-    missingSemanticNameBehavior,
-    existingIdBehavior,
-    outDir,
-    emitLanguages,
-    typescriptOutputStructure,
-    csharp,
-    routerAwarePoms,
-    routerEntry,
-    generateFixtures,
+    generation: resolvedGenerationOptions,
     projectRootRef,
     basePageClassPath: basePageClassPathOverride,
-    customPomAttachments: resolvedCustomPomAttachments,
-    customPomDir: resolvedCustomPomDir,
-    customPomImportAliases: resolvedCustomPomImportAliases,
-    customPomImportNameCollisionBehavior: resolvedCustomPomImportCollisionBehavior,
-    testIdAttribute,
-    loggerRef,
-    routerType,
-    routerModuleShims
+    loggerRef
   });
   if (isNuxt) {
     loggerRef.current.info("Nuxt environment detected. Skipping internal @vitejs/plugin-vue to avoid conflicts.");
@@ -8733,7 +9196,7 @@ function createVuePomGeneratorPlugins(options = {}) {
     ...supportPlugins
   ];
   if (!generationEnabled) {
-    const virtualModules = createTestIdsVirtualModulesPlugin(componentTestIds);
+    const virtualModules = createTestIdsVirtualModulesPlugin(componentHierarchyMap, elementMetadata);
     return [
       configPlugin,
       metadataCollectorPlugin,