chrometools-mcp 3.3.8 → 3.3.9

package/utils/code-generators/pom-integrator.js

@@ -0,0 +1,373 @@
+/**
+ * utils/code-generators/pom-integrator.js
+ *
+ * Links POM elements with scenario actions via selector matching.
+ * Also parses existing POM files to extract element metadata.
+ */
+
+/**
+ * Match action selector to POM element
+ * @param {string} actionSelector - Selector from recorded action
+ * @param {Array} pomElements - Array of POM element metadata
+ * @returns {Object|null} - Matched POM element or null
+ */
+export function matchActionToPomElement(actionSelector, pomElements) {
+  if (!actionSelector || !pomElements || pomElements.length === 0) {
+    return null;
+  }
+
+  // 1. Exact match
+  const exact = pomElements.find(el => el.selector === actionSelector);
+  if (exact) return exact;
+
+  // 2. Normalized match - strip tag prefix (e.g., "input#username" -> "#username")
+  const normalizedAction = normalizeSelector(actionSelector);
+  const normalized = pomElements.find(el => normalizeSelector(el.selector) === normalizedAction);
+  if (normalized) return normalized;
+
+  // 3. Key-based match - compare by id, name, or data-testid values
+  const actionKeys = extractSelectorKeys(actionSelector);
+  if (actionKeys) {
+    for (const el of pomElements) {
+      const elKeys = extractSelectorKeys(el.selector);
+      if (elKeys && keysMatch(actionKeys, elKeys)) {
+        return el;
+      }
+    }
+  }
+
+  // 4. No match
+  return null;
+}
+
+/**
+ * Normalize selector by stripping tag prefix
+ * "input#username" -> "#username"
+ * "input[name='email']" -> "[name='email']"
+ */
+function normalizeSelector(selector) {
+  // Strip leading tag name before #, ., or [
+  return selector.replace(/^[a-z]+(?=[#.\[])/, '');
+}
+
+/**
+ * Extract key identifiers from selector
+ * Returns { type, value } or null
+ */
+function extractSelectorKeys(selector) {
+  // ID selector: #username or input#username
+  const idMatch = selector.match(/#([a-zA-Z0-9_-]+)/);
+  if (idMatch) return { type: 'id', value: idMatch[1] };
+
+  // Name attribute: [name="email"] or input[name="email"]
+  const nameMatch = selector.match(/\[name=["']([^"']+)["']\]/);
+  if (nameMatch) return { type: 'name', value: nameMatch[1] };
+
+  // Data-testid: [data-testid="submit-btn"]
+  const testIdMatch = selector.match(/\[data-testid=["']([^"']+)["']\]/);
+  if (testIdMatch) return { type: 'data-testid', value: testIdMatch[1] };
+
+  // Data-test: [data-test="submit-btn"]
+  const dataTestMatch = selector.match(/\[data-test=["']([^"']+)["']\]/);
+  if (dataTestMatch) return { type: 'data-test', value: dataTestMatch[1] };
+
+  return null;
+}
+
+/**
+ * Compare two extracted keys
+ */
+function keysMatch(a, b) {
+  // Same type and value
+  if (a.type === b.type && a.value === b.value) return true;
+
+  // Cross-type: id matches name if values are the same
+  if (a.value === b.value) return true;
+
+  return false;
+}
+
+/**
+ * Parse existing POM file to extract element metadata
+ * @param {string} fileContent - POM file content
+ * @param {string} framework - Framework identifier
+ * @returns {Object} - { className, elements: [{name, selector, methodName, methodType}] }
+ */
+export function parsePomFile(fileContent, framework) {
+  switch (framework) {
+    case 'playwright-typescript':
+      return parsePlaywrightTypeScript(fileContent);
+    case 'playwright-python':
+      return parsePlaywrightPython(fileContent);
+    case 'selenium-python':
+      return parseSeleniumPython(fileContent);
+    case 'selenium-java':
+      return parseSeleniumJava(fileContent);
+    default:
+      throw new Error(`Unsupported framework for POM parsing: ${framework}`);
+  }
+}
+
+/**
+ * Parse Playwright TypeScript POM file
+ * Looks for: this.X = page.locator('...')
+ *            async fillX( / async clickX(
+ */
+function parsePlaywrightTypeScript(content) {
+  const classMatch = content.match(/export\s+class\s+(\w+)/);
+  const className = classMatch ? classMatch[1] : 'UnknownPage';
+
+  const elements = [];
+  // Match both: page.locator('selector') and page.locator("selector")
+  // Handle selectors that contain the other type of quotes inside
+  const locatorRegex = /this\.(\w+)\s*=\s*page\.locator\((?:'([^']*)'|"([^"]*)")\)/g;
+  let match;
+
+  while ((match = locatorRegex.exec(content)) !== null) {
+    const name = match[1];
+    const selector = match[2] || match[3]; // group 2 for single-quoted, group 3 for double-quoted
+    if (name === 'page') continue;
+
+    const methodInfo = findTypeScriptMethod(content, name);
+    elements.push({
+      name,
+      selector,
+      tag: guessTagFromSelector(selector),
+      type: guessTypeFromSelector(selector),
+      methodName: methodInfo.methodName,
+      methodType: methodInfo.methodType
+    });
+  }
+
+  return { className, elements };
+}
+
+/**
+ * Find TypeScript method for element
+ */
+function findTypeScriptMethod(content, elementName) {
+  const capName = elementName.charAt(0).toUpperCase() + elementName.slice(1);
+
+  // Check for fill method
+  const fillRegex = new RegExp(`async\\s+fill${capName}\\s*\\(`);
+  if (fillRegex.test(content)) {
+    return { methodName: `fill${capName}`, methodType: 'fill' };
+  }
+
+  // Check for click method
+  const clickRegex = new RegExp(`async\\s+click${capName}\\s*\\(`);
+  if (clickRegex.test(content)) {
+    return { methodName: `click${capName}`, methodType: 'click' };
+  }
+
+  // Check for select method
+  const selectRegex = new RegExp(`async\\s+select${capName}\\s*\\(`);
+  if (selectRegex.test(content)) {
+    return { methodName: `select${capName}`, methodType: 'select' };
+  }
+
+  // Default based on element name heuristics
+  return { methodName: elementName, methodType: 'click' };
+}
+
+/**
+ * Parse Playwright Python POM file
+ * Looks for: self.X = page.locator('...')
+ *            def fill_X( / def click_X(
+ */
+function parsePlaywrightPython(content) {
+  const classMatch = content.match(/class\s+(\w+)/);
+  const className = classMatch ? classMatch[1] : 'UnknownPage';
+
+  const elements = [];
+  const locatorRegex = /self\.(\w+)\s*=\s*page\.locator\((?:'([^']*)'|"([^"]*)")\)/g;
+  let match;
+
+  while ((match = locatorRegex.exec(content)) !== null) {
+    const name = match[1];
+    const selector = match[2] || match[3];
+    if (name === 'page') continue;
+
+    const methodInfo = findPythonMethod(content, name);
+    elements.push({
+      name,
+      selector,
+      tag: guessTagFromSelector(selector),
+      type: guessTypeFromSelector(selector),
+      methodName: methodInfo.methodName,
+      methodType: methodInfo.methodType
+    });
+  }
+
+  return { className, elements };
+}
+
+/**
+ * Find Python method for element
+ */
+function findPythonMethod(content, elementName) {
+  const fillRegex = new RegExp(`def\\s+fill_${elementName}\\s*\\(`);
+  if (fillRegex.test(content)) {
+    return { methodName: `fill_${elementName}`, methodType: 'fill' };
+  }
+
+  const clickRegex = new RegExp(`def\\s+click_${elementName}\\s*\\(`);
+  if (clickRegex.test(content)) {
+    return { methodName: `click_${elementName}`, methodType: 'click' };
+  }
+
+  const selectRegex = new RegExp(`def\\s+select_${elementName}\\s*\\(`);
+  if (selectRegex.test(content)) {
+    return { methodName: `select_${elementName}`, methodType: 'select' };
+  }
+
+  return { methodName: elementName, methodType: 'click' };
+}
+
+/**
+ * Parse Selenium Python POM file
+ * Looks for: X = (By.CSS_SELECTOR, '...')
+ *            def fill_X( / def click_X(
+ */
+function parseSeleniumPython(content) {
+  const classMatch = content.match(/class\s+(\w+)/);
+  const className = classMatch ? classMatch[1] : 'UnknownPage';
+
+  const elements = [];
+  // Match: ELEMENT_NAME = (By.ID, 'value') or (By.CSS_SELECTOR, 'value') etc.
+  const locatorRegex = /(\w+)\s*=\s*\(By\.(\w+),\s*['"]([^'"]+)['"]\)/g;
+  let match;
+
+  while ((match = locatorRegex.exec(content)) !== null) {
+    const name = match[1].toLowerCase();
+    const byType = match[2];
+    const value = match[3];
+    const selector = convertByToSelector(byType, value);
+
+    const methodInfo = findPythonMethod(content, name);
+    elements.push({
+      name,
+      selector,
+      tag: guessTagFromSelector(selector),
+      type: guessTypeFromSelector(selector),
+      methodName: methodInfo.methodName,
+      methodType: methodInfo.methodType
+    });
+  }
+
+  return { className, elements };
+}
+
+/**
+ * Parse Selenium Java POM file
+ * Looks for: By X = By.cssSelector("...")
+ *            void fillX( / void clickX(
+ */
+function parseSeleniumJava(content) {
+  const classMatch = content.match(/public\s+class\s+(\w+)/);
+  const className = classMatch ? classMatch[1] : 'UnknownPage';
+
+  const elements = [];
+  // Match: private static final By ELEMENT = By.id("value") or By.cssSelector("value")
+  const locatorRegex = /(?:private\s+)?(?:static\s+)?(?:final\s+)?By\s+(\w+)\s*=\s*By\.(\w+)\(["']([^"']+)["']\)/g;
+  let match;
+
+  while ((match = locatorRegex.exec(content)) !== null) {
+    const name = match[1].toLowerCase();
+    const byMethod = match[2];
+    const value = match[3];
+    const selector = convertJavaByToSelector(byMethod, value);
+
+    const methodInfo = findJavaMethod(content, match[1]);
+    elements.push({
+      name,
+      selector,
+      tag: guessTagFromSelector(selector),
+      type: guessTypeFromSelector(selector),
+      methodName: methodInfo.methodName,
+      methodType: methodInfo.methodType
+    });
+  }
+
+  return { className, elements };
+}
+
+/**
+ * Find Java method for element
+ */
+function findJavaMethod(content, elementName) {
+  // Convert UPPER_CASE to camelCase for method lookup
+  // e.g., SUBMIT_BTN -> submitBtn, EMAIL -> email
+  let camelName;
+  if (elementName === elementName.toUpperCase()) {
+    // ALL_CAPS: split by _, lowercase, then camelCase
+    camelName = elementName.toLowerCase().replace(/_([a-z])/g, (_, c) => c.toUpperCase());
+  } else {
+    camelName = elementName.replace(/_([a-z])/gi, (_, c) => c.toUpperCase());
+  }
+  const capName = camelName.charAt(0).toUpperCase() + camelName.slice(1);
+
+  const fillRegex = new RegExp(`void\\s+fill${capName}\\s*\\(`);
+  if (fillRegex.test(content)) {
+    return { methodName: `fill${capName}`, methodType: 'fill' };
+  }
+
+  const clickRegex = new RegExp(`void\\s+click${capName}\\s*\\(`);
+  if (clickRegex.test(content)) {
+    return { methodName: `click${capName}`, methodType: 'click' };
+  }
+
+  const selectRegex = new RegExp(`void\\s+select${capName}\\s*\\(`);
+  if (selectRegex.test(content)) {
+    return { methodName: `select${capName}`, methodType: 'select' };
+  }
+
+  return { methodName: camelName, methodType: 'click' };
+}
+
+/**
+ * Convert Selenium Python By type to CSS selector
+ */
+function convertByToSelector(byType, value) {
+  switch (byType) {
+    case 'ID': return `#${value}`;
+    case 'NAME': return `[name="${value}"]`;
+    case 'CLASS_NAME': return `.${value}`;
+    case 'CSS_SELECTOR': return value;
+    case 'TAG_NAME': return value;
+    default: return value;
+  }
+}
+
+/**
+ * Convert Selenium Java By method to CSS selector
+ */
+function convertJavaByToSelector(byMethod, value) {
+  switch (byMethod) {
+    case 'id': return `#${value}`;
+    case 'name': return `[name="${value}"]`;
+    case 'className': return `.${value}`;
+    case 'cssSelector': return value;
+    case 'tagName': return value;
+    default: return value;
+  }
+}
+
+/**
+ * Guess HTML tag from selector
+ */
+function guessTagFromSelector(selector) {
+  const tagMatch = selector.match(/^(input|textarea|select|button|a)\b/);
+  return tagMatch ? tagMatch[1] : 'element';
+}
+
+/**
+ * Guess element type from selector
+ */
+function guessTypeFromSelector(selector) {
+  if (selector.includes('type="password"')) return 'password';
+  if (selector.includes('type="email"')) return 'email';
+  if (selector.includes('type="text"')) return 'text';
+  if (selector.includes('type="submit"')) return 'submit';
+  return 'element';
+}

package/utils/code-generators/selenium-java.js

@@ -283,6 +283,78 @@ export class SeleniumJavaGenerator extends CodeGeneratorBase {
     }
   }
 
+  // ========================================
+  // POM INTEGRATION
+  // ========================================
+
+  /**
+   * Generate POM import
+   */
+  generatePomImports(className, importPath) {
+    return [`import ${importPath || 'pages'}.${className};`];
+  }
+
+  /**
+   * Generate POM instantiation
+   */
+  generatePomInstantiation(className) {
+    const varName = className.charAt(0).toLowerCase() + className.slice(1);
+    return [this.indent(`${className} ${varName} = new ${className}(driver);`), ''];
+  }
+
+  /**
+   * Generate POM goto
+   */
+  generatePomGoto(url) {
+    const varName = this.options.pomClassName.charAt(0).toLowerCase() + this.options.pomClassName.slice(1);
+    return [this.indent(`${varName}.goTo();`)];
+  }
+
+  /**
+   * Generate POM-based action
+   */
+  generatePomAction(action, pomElement) {
+    const varName = this.options.pomClassName.charAt(0).toLowerCase() + this.options.pomClassName.slice(1);
+    const lines = [];
+
+    const comment = this.generateActionComment(action);
+    if (comment.length > 0) lines.push(...comment);
+
+    switch (action.type) {
+      case 'type': {
+        const text = action.data?.text || '';
+        lines.push(this.indent(`${varName}.${pomElement.methodName}("${this.escapeString(text)}");`));
+        break;
+      }
+      case 'click':
+        if (pomElement.methodType === 'click') {
+          lines.push(this.indent(`${varName}.${pomElement.methodName}();`));
+        } else {
+          lines.push(this.indent(`${varName}.${pomElement.name}.click();`));
+        }
+        break;
+      case 'select': {
+        const value = action.data?.value || '';
+        lines.push(this.indent(`${varName}.${pomElement.methodName}("${this.escapeString(value)}");`));
+        break;
+      }
+      case 'hover': {
+        lines.push(this.indent(`WebElement element = driver.findElement(By.cssSelector("${this.escapeString(pomElement.selector)}"));`));
+        lines.push(this.indent(`Actions hoverActions = new Actions(driver);`));
+        lines.push(this.indent(`hoverActions.moveToElement(element).perform();`));
+        break;
+      }
+      case 'navigate':
+        lines.push(this.indent(`${varName}.goTo();`));
+        break;
+      default:
+        return null;
+    }
+
+    if (lines.length > 0) lines.push('');
+    return lines;
+  }
+
   /**
    * Generate URL assertion
    */

package/utils/code-generators/selenium-python.js

@@ -303,6 +303,81 @@ export class SeleniumPythonGenerator extends CodeGeneratorBase {
     }
   }
 
+  // ========================================
+  // POM INTEGRATION
+  // ========================================
+
+  /**
+   * Generate POM import
+   */
+  generatePomImports(className, importPath) {
+    if (importPath) {
+      return [`from ${importPath} import ${className}`];
+    }
+    const moduleName = className.replace(/([A-Z])/g, '_$1').toLowerCase().replace(/^_/, '');
+    return [`from ${moduleName} import ${className}`];
+  }
+
+  /**
+   * Generate POM instantiation
+   */
+  generatePomInstantiation(className) {
+    const varName = className.replace(/([A-Z])/g, '_$1').toLowerCase().replace(/^_/, '');
+    return [this.indent(`${varName} = ${className}(driver)`), ''];
+  }
+
+  /**
+   * Generate POM goto
+   */
+  generatePomGoto(url) {
+    const varName = this.options.pomClassName.replace(/([A-Z])/g, '_$1').toLowerCase().replace(/^_/, '');
+    return [this.indent(`${varName}.goto()`)];
+  }
+
+  /**
+   * Generate POM-based action
+   */
+  generatePomAction(action, pomElement) {
+    const varName = this.options.pomClassName.replace(/([A-Z])/g, '_$1').toLowerCase().replace(/^_/, '');
+    const lines = [];
+
+    const comment = this.generateActionComment(action);
+    if (comment.length > 0) lines.push(...comment);
+
+    switch (action.type) {
+      case 'type': {
+        const text = action.data?.text || '';
+        lines.push(this.indent(`${varName}.${pomElement.methodName}("${this.escapeString(text)}")`));
+        break;
+      }
+      case 'click':
+        if (pomElement.methodType === 'click') {
+          lines.push(this.indent(`${varName}.${pomElement.methodName}()`));
+        } else {
+          lines.push(this.indent(`${varName}.${pomElement.name}.click()`));
+        }
+        break;
+      case 'select': {
+        const value = action.data?.value || '';
+        lines.push(this.indent(`${varName}.${pomElement.methodName}("${this.escapeString(value)}")`));
+        break;
+      }
+      case 'hover': {
+        lines.push(this.indent(`element = ${varName}.driver.find_element(By.CSS_SELECTOR, "${this.escapeString(pomElement.selector)}")`));
+        lines.push(this.indent(`ActionChains(${varName}.driver).move_to_element(element).perform()`));
+        break;
+      }
+      case 'navigate':
+        lines.push(this.indent(`${varName}.goto()`));
+        break;
+      default:
+        return null;
+    }
+
+    if (lines.length > 0) lines.push('');
+    return lines;
+  }
+
   /**
    * Generate URL assertion
    */

package/utils/hints-generator.js

@@ -6,7 +6,10 @@
 /**
  * Generate hints after page navigation
  */
-export function generateNavigationHints(page, url) {
+export async function generateNavigationHints(page, url) {
+  // Wait for SPA frameworks (Angular, React, Vue) to render after navigation
+  await new Promise(resolve => setTimeout(resolve, 500));
+
   return page.evaluate(() => {
     // Helper to get safe class selector (filters Tailwind special chars)
     function getSafeClassSelector(element) {
@@ -30,6 +33,28 @@ export function generateNavigationHints(page, url) {
       commonSelectors: {},
     };
 
+    // Extract page heading (h1 first, then common framework title patterns)
+    // Helper: check if element is truly visible (not sr-only / visually-hidden)
+    function isReallyVisible(el) {
+      if (!el || el.offsetWidth === 0) return false;
+      if (el.offsetWidth <= 1 && el.offsetHeight <= 1) return false; // sr-only pattern
+      const style = getComputedStyle(el);
+      if (style.clip === 'rect(1px, 1px, 1px, 1px)' || style.clipPath === 'inset(50%)') return false;
+      if (style.visibility === 'hidden' || style.opacity === '0') return false;
+      return true;
+    }
+    const headingCandidates = [
+      document.querySelector('h1'),
+      document.querySelector('.page-title, [class*="page-title"]'),
+      document.querySelector('[class*="page-header"] h1, [class*="page-header"] h2'),
+    ];
+    for (const el of headingCandidates) {
+      if (el && isReallyVisible(el)) {
+        hints.heading = el.textContent.trim().substring(0, 100);
+        break;
+      }
+    }
+
     // Detect page type
     if (document.querySelector('form input[type="password"]')) {
       hints.pageType = 'login';
@@ -126,18 +151,46 @@ export async function generateClickHints(page, selector) {
       suggestedNext: [],
     };
 
-    // Check for modals
-    const modals = document.querySelectorAll('[role="dialog"], .modal, [class*="modal"]');
-    modals.forEach(modal => {
-      if (modal.offsetWidth > 0 && modal.offsetHeight > 0) {
-        hints.modalOpened = true;
-        hints.newElements.push({
-          type: 'modal',
-          selector: getSafeClassSelector(modal) || '[role="dialog"]',
-        });
-        hints.suggestedNext.push('Interact with modal or close it');
-      }
+    // Check for modals — find the topmost visible one
+    const modalEls = document.querySelectorAll('[role="dialog"], .modal, [class*="modal"], mat-dialog-container, .cdk-overlay-pane [role="dialog"], [class*="dialog"]');
+    const visibleModals = Array.from(modalEls).filter(m => m.offsetWidth > 0 && m.offsetHeight > 0);
+    // Deduplicate: skip modals nested inside another visible modal
+    const topModals = visibleModals.filter(modal => {
+      return !visibleModals.some(other => other !== modal && other.contains(modal));
     });
+    // Take only the topmost modal (highest z-index or last in DOM)
+    const topModal = topModals.length > 0 ? topModals[topModals.length - 1] : null;
+    if (topModal) {
+      hints.modalOpened = true;
+      // Extract modal title
+      const titleEl = topModal.querySelector('h1, h2, h3, .modal-title, [mat-dialog-title], .dialog-title');
+      const title = titleEl ? titleEl.textContent.trim().substring(0, 100) : null;
+      // Extract body text (excluding title and buttons)
+      let bodyText = null;
+      const bodyEl = topModal.querySelector('.modal-body, [mat-dialog-content], .dialog-content, .dialog-body');
+      if (bodyEl) {
+        bodyText = bodyEl.textContent.trim().substring(0, 200);
+      } else if (!titleEl) {
+        // Fallback: get modal text directly
+        bodyText = topModal.textContent.trim().substring(0, 200);
+      }
+      // Extract action buttons (from footer or dialog-actions, limit to 5)
+      const actionButtons = [];
+      const actionsContainer = topModal.querySelector('.modal-footer, [mat-dialog-actions], .dialog-actions, .dialog-footer');
+      const btnScope = actionsContainer || topModal;
+      btnScope.querySelectorAll('button, [mat-button], [mat-raised-button], [mat-flat-button], a[role="button"]').forEach(btn => {
+        const text = btn.textContent.trim();
+        if (text && text.length < 50 && actionButtons.length < 5) actionButtons.push(text);
+      });
+      hints.newElements.push({
+        type: 'modal',
+        selector: getSafeClassSelector(topModal) || '[role="dialog"]',
+        title: title,
+        text: bodyText,
+        actions: actionButtons.length > 0 ? actionButtons : undefined,
+      });
+      hints.suggestedNext.push('Interact with modal or close it');
+    }
 
     // Check for new alerts/notifications
     const alerts = document.querySelectorAll('.alert, [role="alert"], .notification');
@@ -152,15 +205,57 @@ export async function generateClickHints(page, selector) {
       }
     });
 
-    // Check for dropdowns
-    const dropdowns = document.querySelectorAll('[class*="dropdown"][class*="open"], [aria-expanded="true"]');
-    if (dropdowns.length > 0) {
+    // Check for dropdowns, overlays, menus
+    const overlaySelectors = [
+      '[class*="dropdown"][class*="open"]',
+      '[class*="dropdown"][class*="show"]',
+      '.cdk-overlay-pane',
+      '[role="listbox"]',
+      '[role="menu"]',
+      '.mat-select-panel',
+      '.mat-mdc-select-panel',
+      '[class*="overlay"][class*="open"]',
+      '.p-dropdown-panel',
+      '.ant-dropdown:not(.ant-dropdown-hidden)',
+      '[class*="select-options"]',
+    ].join(', ');
+    const overlayEls = document.querySelectorAll(overlaySelectors);
+    // Deduplicate: skip overlays that are children of another matched overlay
+    const overlays = Array.from(overlayEls).filter(el => el.offsetWidth > 0 && el.offsetHeight > 0);
+    const dedupedOverlays = overlays.filter(overlay => {
+      return !overlays.some(other => other !== overlay && other.contains(overlay));
+    });
+    dedupedOverlays.forEach(overlay => {
+      // Determine type: explicit menu roles, or custom select-options pattern (but NOT mat-option-text)
+      const isMenu = overlay.matches('[role="menu"]') ||
+        overlay.querySelector('[role="menuitem"]') !== null ||
+        (overlay.matches('[class*="select-options"]') && !overlay.querySelector('mat-option'));
+      const isDropdown = overlay.matches('[role="listbox"]') ||
+        overlay.querySelector('mat-option, [role="option"]') !== null;
+      const type = isMenu ? 'menu' : 'dropdown';
+      // Extract items — use specific selectors to avoid duplicates from nested matches
+      let itemEls;
+      if (isDropdown) {
+        itemEls = overlay.querySelectorAll('mat-option, [role="option"]');
+      } else if (isMenu) {
+        itemEls = overlay.querySelectorAll('[role="menuitem"], [class*="option-text"]');
+      } else {
+        itemEls = overlay.querySelectorAll('mat-option, [role="option"], [role="menuitem"], li, .dropdown-item, .p-dropdown-item, .ant-dropdown-menu-item, [class*="option-text"]');
+      }
+      const items = [];
+      const totalCount = itemEls.length;
+      itemEls.forEach((item, i) => {
+        if (i < 10 && item.textContent.trim()) {
+          items.push(item.textContent.trim().substring(0, 80));
+        }
+      });
       hints.newElements.push({
-        type: 'dropdown',
-        count: dropdowns.length,
+        type,
+        items: items.length > 0 ? items : undefined,
+        totalCount: totalCount,
       });
-      hints.suggestedNext.push('Select option from dropdown');
-    }
+      hints.suggestedNext.push(type === 'menu' ? 'Select menu item' : 'Select option from dropdown');
+    });
 
     return hints;
   }, selector);