@tontoko/fast-playwright-mcp 0.0.4

package/lib/diagnostics/element-discovery.js

@@ -0,0 +1,441 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/diagnostics/element-discovery.ts
+import debug from "debug";
+import { DiagnosticBase } from "./common/diagnostic-base.js";
+import { safeDispose } from "./common/error-enrichment-utils.js";
+import { SmartHandleBatch } from "./smart-handle.js";
+var elementDiscoveryDebug = debug("pw:mcp:element-discovery");
+
+class ElementDiscovery extends DiagnosticBase {
+  smartHandleBatch;
+  maxBatchSize = 100;
+  constructor(page) {
+    super(page, "ElementDiscovery");
+    this.smartHandleBatch = new SmartHandleBatch;
+  }
+  async performDispose() {
+    await safeDispose(this.smartHandleBatch, "SmartHandleBatch", "dispose");
+  }
+  async safeDispose(element, operation) {
+    await safeDispose(element, "ElementHandle", operation);
+  }
+  async safeDisposePublic(element, operation) {
+    if ("dispose" in element) {
+      await safeDispose(element, "Element", operation);
+    } else {
+      await safeDispose(element, "ElementHandle", operation);
+    }
+  }
+  async findAlternativeElements(options) {
+    this.getPage();
+    const { searchCriteria, maxResults = 10 } = options;
+    const alternatives = [];
+    const effectiveMaxResults = Math.min(maxResults, this.maxBatchSize);
+    try {
+      if (searchCriteria.text) {
+        const textMatches = await this.findByText(searchCriteria.text, effectiveMaxResults);
+        alternatives.push(...textMatches);
+      }
+      if (searchCriteria.role) {
+        const roleMatches = await this.findByRole(searchCriteria.role, effectiveMaxResults);
+        alternatives.push(...roleMatches);
+      }
+      if (searchCriteria.tagName) {
+        const tagMatches = await this.findByTagName(searchCriteria.tagName, effectiveMaxResults);
+        alternatives.push(...tagMatches);
+      }
+      if (searchCriteria.attributes) {
+        const attributeMatches = await this.findByAttributes(searchCriteria.attributes, effectiveMaxResults);
+        alternatives.push(...attributeMatches);
+      }
+      const uniqueAlternatives = this.deduplicateAndSort(alternatives);
+      return uniqueAlternatives.slice(0, effectiveMaxResults);
+    } catch (error) {
+      await safeDispose(this.smartHandleBatch, "SmartHandleBatch", "findAlternativeElements");
+      throw error;
+    }
+  }
+  async findByText(text, maxResults) {
+    const page = this.getPage();
+    const strategies = this.getTextSearchStrategies(text);
+    const alternatives = [];
+    await this.processTextSearchStrategies(page, strategies, text, alternatives, maxResults);
+    return alternatives;
+  }
+  async processTextSearchStrategies(page, strategies, text, alternatives, maxResults) {
+    let totalFound = 0;
+    const processStrategiesSequentially = async (index) => {
+      if (index >= strategies.length || totalFound >= maxResults) {
+        return;
+      }
+      const selector = strategies[index];
+      totalFound = await this.processTextStrategy(page, selector, text, alternatives, totalFound, maxResults);
+      await processStrategiesSequentially(index + 1);
+    };
+    await processStrategiesSequentially(0);
+  }
+  getTextSearchStrategies(text) {
+    return [
+      `text=${text}`,
+      `text*=${text}`,
+      `[value="${text}"]`,
+      `[placeholder="${text}"]`,
+      `[aria-label="${text}"]`
+    ];
+  }
+  async processTextStrategy(page, selector, text, alternatives, totalFound, maxResults) {
+    try {
+      const elements = await page.$$(selector);
+      return await this.processTextElements(elements, text, alternatives, totalFound, maxResults);
+    } catch {
+      return totalFound;
+    }
+  }
+  async processTextElements(elements, text, alternatives, totalFound, maxResults) {
+    const result = await elements.reduce(async (previousPromise, element) => {
+      const currentFound = await previousPromise;
+      if (currentFound >= maxResults) {
+        await this.safeDispose(element, `findByText-excess-${currentFound}`);
+        return currentFound;
+      }
+      const elementProcessed = await this.processTextElement(element, text, alternatives, currentFound);
+      return elementProcessed ? currentFound + 1 : currentFound;
+    }, Promise.resolve(totalFound));
+    return result;
+  }
+  async processTextElement(element, text, alternatives, totalFound) {
+    try {
+      const elementText = await this.extractElementText(element);
+      const confidence = this.calculateTextSimilarity(text, elementText);
+      return await this.handleTextMatchResult(element, elementText, confidence, alternatives, totalFound);
+    } catch (elementError) {
+      elementDiscoveryDebug("Element processing failed:", elementError);
+      await this.safeDispose(element, `findByText-element-${totalFound}`);
+      return false;
+    }
+  }
+  async extractElementText(element) {
+    const [textContent, value, placeholder, ariaLabel] = await Promise.all([
+      element.textContent().then((content) => content ?? ""),
+      element.getAttribute("value").then((attr) => attr ?? ""),
+      element.getAttribute("placeholder").then((attr) => attr ?? ""),
+      element.getAttribute("aria-label").then((attr) => attr ?? "")
+    ]);
+    return [textContent, value, placeholder, ariaLabel].join(" ").trim();
+  }
+  async handleTextMatchResult(element, elementText, confidence, alternatives, totalFound) {
+    if (confidence > 0.3) {
+      const smartElement = this.smartHandleBatch.add(element);
+      alternatives.push({
+        selector: await this.generateSelector(element),
+        confidence,
+        reason: `text match: "${elementText.substring(0, 50).trim()}"`,
+        element: smartElement,
+        elementId: `text_${totalFound}`
+      });
+      return true;
+    }
+    await this.safeDispose(element, `findByText-threshold-${totalFound}`);
+    return false;
+  }
+  async findByRole(role, maxResults) {
+    const page = this.getPage();
+    const alternatives = [];
+    try {
+      const elements = await page.$$(`[role="${role}"]`);
+      const totalFound = await elements.reduce(async (previousPromise, element) => {
+        const currentFound = await previousPromise;
+        if (currentFound >= maxResults) {
+          await this.safeDispose(element, `findByRole-excess-${currentFound}`);
+          return currentFound;
+        }
+        try {
+          const confidence = 0.7;
+          const smartElement = this.smartHandleBatch.add(element);
+          alternatives.push({
+            selector: await this.generateSelector(element),
+            confidence,
+            reason: `role match: "${role}"`,
+            element: smartElement,
+            elementId: `role_${currentFound}`
+          });
+          return currentFound + 1;
+        } catch (elementError) {
+          elementDiscoveryDebug("Element role processing failed:", elementError);
+          await this.safeDispose(element, `findByRole-element-${currentFound}`);
+          return currentFound;
+        }
+      }, Promise.resolve(0));
+      if (totalFound < maxResults) {
+        const implicitRoleElements = await this.findImplicitRoleElements(role, maxResults - totalFound);
+        alternatives.push(...implicitRoleElements);
+      }
+    } catch {}
+    return alternatives;
+  }
+  async findByTagName(tagName, maxResults) {
+    const page = this.getPage();
+    const alternatives = [];
+    try {
+      const elements = await page.$$(tagName);
+      await elements.reduce(async (previousPromise, element) => {
+        const currentFound = await previousPromise;
+        if (currentFound >= maxResults) {
+          await this.safeDispose(element, `findByTagName-excess-${currentFound}`);
+          return currentFound;
+        }
+        try {
+          const confidence = 0.5;
+          const smartElement = this.smartHandleBatch.add(element);
+          alternatives.push({
+            selector: await this.generateSelector(element),
+            confidence,
+            reason: `tag name match: "${tagName}"`,
+            element: smartElement,
+            elementId: `tag_${currentFound}`
+          });
+          return currentFound + 1;
+        } catch (elementError) {
+          elementDiscoveryDebug("Element tag processing failed:", elementError);
+          await this.safeDispose(element, `findByTagName-element-${currentFound}`);
+          return currentFound;
+        }
+      }, Promise.resolve(0));
+    } catch {}
+    return alternatives;
+  }
+  async findByAttributes(attributes, maxResults) {
+    const alternatives = [];
+    await this.processAttributeEntries(Object.entries(attributes), alternatives, maxResults);
+    return alternatives;
+  }
+  async processAttributeEntries(attributeEntries, alternatives, maxResults) {
+    let totalFound = 0;
+    const processEntriesSequentially = async (index) => {
+      if (index >= attributeEntries.length || totalFound >= maxResults) {
+        return;
+      }
+      const [attrName, attrValue] = attributeEntries[index];
+      totalFound = await this.processAttributeEntry(attrName, attrValue, alternatives, totalFound, maxResults);
+      await processEntriesSequentially(index + 1);
+    };
+    await processEntriesSequentially(0);
+  }
+  async processAttributeEntry(attrName, attrValue, alternatives, totalFound, maxResults) {
+    const page = this.getPage();
+    try {
+      const elements = await page.$$(`[${attrName}="${attrValue}"]`);
+      return await this.processAttributeElements(elements, attrName, attrValue, alternatives, totalFound, maxResults);
+    } catch {
+      return totalFound;
+    }
+  }
+  async processAttributeElements(elements, attrName, attrValue, alternatives, totalFound, maxResults) {
+    let currentFound = totalFound;
+    const processElementsSequentially = async (index) => {
+      if (index >= elements.length) {
+        return;
+      }
+      const element = elements[index];
+      if (currentFound >= maxResults) {
+        await this.safeDispose(element, `findByAttributes-excess-${currentFound}`);
+        return processElementsSequentially(index + 1);
+      }
+      const processResult = await this.processAttributeElement(element, attrName, attrValue, alternatives, currentFound);
+      if (processResult) {
+        currentFound++;
+      }
+      await processElementsSequentially(index + 1);
+    };
+    await processElementsSequentially(0);
+    return currentFound;
+  }
+  async processAttributeElement(element, attrName, attrValue, alternatives, currentFound) {
+    try {
+      const smartElement = this.smartHandleBatch.add(element);
+      alternatives.push({
+        selector: await this.generateSelector(element),
+        confidence: 0.9,
+        reason: `attribute match: ${attrName}="${attrValue}"`,
+        element: smartElement,
+        elementId: `attr_${currentFound}`
+      });
+      return true;
+    } catch (elementError) {
+      elementDiscoveryDebug("Element attribute processing failed:", elementError);
+      await this.safeDispose(element, `findByAttributes-element-${currentFound}`);
+      return false;
+    }
+  }
+  async findImplicitRoleElements(role, maxResults) {
+    const roleTagMapping = {
+      button: ["button", 'input[type="button"]', 'input[type="submit"]'],
+      textbox: ['input[type="text"]', 'input[type="email"]', "textarea"],
+      link: ["a[href]"],
+      checkbox: ['input[type="checkbox"]'],
+      radio: ['input[type="radio"]']
+    };
+    const tags = roleTagMapping[role] ?? [];
+    const alternatives = [];
+    await this.processImplicitRoleTags(tags, role, alternatives, maxResults);
+    return alternatives;
+  }
+  async processImplicitRoleTags(tags, role, alternatives, maxResults) {
+    let totalFound = 0;
+    const processTagsSequentially = async (index) => {
+      if (index >= tags.length || totalFound >= maxResults) {
+        return;
+      }
+      const tagSelector = tags[index];
+      totalFound = await this.processImplicitRoleTag(tagSelector, role, alternatives, totalFound, maxResults);
+      await processTagsSequentially(index + 1);
+    };
+    await processTagsSequentially(0);
+  }
+  async processImplicitRoleTag(tagSelector, role, alternatives, totalFound, maxResults) {
+    const page = this.getPage();
+    try {
+      const elements = await page.$$(tagSelector);
+      return await this.processImplicitRoleElements(elements, tagSelector, role, alternatives, totalFound, maxResults);
+    } catch {
+      return totalFound;
+    }
+  }
+  async processImplicitRoleElements(elements, tagSelector, role, alternatives, totalFound, maxResults) {
+    let currentFound = totalFound;
+    const processElementsSequentially = async (index) => {
+      if (index >= elements.length) {
+        return;
+      }
+      const element = elements[index];
+      if (currentFound >= maxResults) {
+        await this.safeDispose(element, `findImplicitRole-excess-${currentFound}`);
+        return processElementsSequentially(index + 1);
+      }
+      const processResult = await this.processImplicitRoleElement(element, tagSelector, role, alternatives, currentFound);
+      if (processResult) {
+        currentFound++;
+      }
+      await processElementsSequentially(index + 1);
+    };
+    await processElementsSequentially(0);
+    return currentFound;
+  }
+  async processImplicitRoleElement(element, tagSelector, role, alternatives, currentFound) {
+    try {
+      const smartElement = this.smartHandleBatch.add(element);
+      alternatives.push({
+        selector: await this.generateSelector(element),
+        confidence: 0.6,
+        reason: `implicit role match: "${role}" via ${tagSelector}`,
+        element: smartElement,
+        elementId: `implicit_${currentFound}`
+      });
+      return true;
+    } catch (elementError) {
+      elementDiscoveryDebug("Implicit role element processing failed:", elementError);
+      await this.safeDispose(element, `findImplicitRole-element-${currentFound}`);
+      return false;
+    }
+  }
+  async generateSelector(element) {
+    return await element.evaluate((el) => {
+      if (!(el instanceof Element)) {
+        return "unknown";
+      }
+      const tag = el.tagName.toLowerCase();
+      const id = el.id ? `#${el.id}` : "";
+      const classes = el.className ? `.${el.className.split(" ").join(".")}` : "";
+      if (id) {
+        return `${tag}${id}`;
+      }
+      if (classes) {
+        return `${tag}${classes}`;
+      }
+      const parent = el.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children);
+        const index = siblings.indexOf(el) + 1;
+        return `${parent.tagName.toLowerCase()} > ${tag}:nth-child(${index})`;
+      }
+      return tag;
+    });
+  }
+  calculateTextSimilarity(target, candidate) {
+    const targetLower = target.toLowerCase().trim();
+    const candidateLower = candidate.toLowerCase().trim();
+    if (targetLower === candidateLower) {
+      return 1;
+    }
+    if (candidateLower.includes(targetLower)) {
+      return 0.8;
+    }
+    if (targetLower.includes(candidateLower)) {
+      return 0.6;
+    }
+    const distance = this.levenshteinDistance(targetLower, candidateLower);
+    const maxLen = Math.max(targetLower.length, candidateLower.length);
+    return 1 - distance / maxLen;
+  }
+  levenshteinDistance(a, b) {
+    if (a.length === 0) {
+      return b.length;
+    }
+    if (b.length === 0) {
+      return a.length;
+    }
+    const matrix = new Array(b.length + 1).fill(null).map(() => new Array(a.length + 1).fill(null));
+    for (let i = 0;i <= a.length; i++) {
+      matrix[0][i] = i;
+    }
+    for (let j = 0;j <= b.length; j++) {
+      matrix[j][0] = j;
+    }
+    for (let j = 1;j <= b.length; j++) {
+      for (let i = 1;i <= a.length; i++) {
+        const indicator = a[i - 1] === b[j - 1] ? 0 : 1;
+        matrix[j][i] = Math.min(matrix[j][i - 1] + 1, matrix[j - 1][i] + 1, matrix[j - 1][i - 1] + indicator);
+      }
+    }
+    return matrix[b.length][a.length];
+  }
+  deduplicateAndSort(alternatives) {
+    const seen = new Set;
+    const unique = [];
+    for (const alt of alternatives) {
+      if (!seen.has(alt.selector)) {
+        seen.add(alt.selector);
+        unique.push(alt);
+      }
+    }
+    return unique.sort((a, b) => b.confidence - a.confidence);
+  }
+  getMemoryStats() {
+    return {
+      activeHandles: this.smartHandleBatch.getActiveCount(),
+      isDisposed: this.disposed,
+      maxBatchSize: this.maxBatchSize
+    };
+  }
+}
+export {
+  ElementDiscovery
+};