playwright-mcp/src/mcp/recording/utils.ts

Playwright integration for ModelContext

import { BrowserEvent, BrowserEventType } from './events.js';
import { getSelectors } from './selector-engine.js';
import { Window } from 'happy-dom';

const parseDom = (html: string) => {
  const window = new Window({
    settings: {
      disableJavaScriptEvaluation: true,
    },
  });
  window.document.write(html);
  return window.document as unknown as Document;
};

export const preprocessBrowserEvent = (event: BrowserEvent) => {
  if (
    event.type === BrowserEventType.Click ||
    event.type === BrowserEventType.Input
  ) {
    const dom = parseDom(event.dom);
    event.selectors = getSelectors(dom, event.elementUUID);

    const element = dom.querySelector(`[uuid="${event.elementUUID}"]`);
    event.elementName = element ? getElementName(element) : 'unknown';
    event.elementType = element ? getElementType(element) : 'unknown';
    // for efficiency, we don't need to preserve it for now
    event.dom = '';
  }
};

const extractText = (element: Element): string => {
  if (element.childNodes.length === 0) {
    return element.textContent?.trim() || '';
  }

  const texts = Array.from(element.childNodes).map(node =>
    extractText(node as unknown as Element)
  );
  return texts
    .filter(text => text.trim().length > 0)
    .map(text => text.trim())
    .join('\n');
};

const extractTextsFromSiblings = (element: Element): string[] => {
  const siblings = Array.from(element.parentElement?.childNodes || []);
  return siblings
    .map(sibling => extractText(sibling as unknown as Element))
    .map(text => text.trim())
    .filter(text => text.length > 0);
};

const getElementName = (element: Element) => {
  let text = '';
  const priorityAttrs = ['aria-label', 'title', 'placeholder', 'name', 'alt'];
  for (const attr of priorityAttrs) {
    if (!text) {
      text = element?.getAttribute(attr) || '';
    }
  }
  if (!text) {
    text = extractText(element);
  }
  if (!text) {
    text = extractTextsFromSiblings(element).join('\n');
  }
  if (!text) {
    text = 'unknown';
  }
  return text;
};

const getElementType = (element: Element) => {
  const tagName = element?.tagName.toLowerCase();
  let elementType: 'button' | 'link' | 'input' | 'textarea' | 'element' =
    'element';
  if (tagName === 'a') {
    elementType = 'link';
  } else if (tagName === 'button') {
    elementType = 'button';
  } else if (tagName === 'textarea') {
    elementType = 'textarea';
  } else if (tagName === 'input') {
    elementType = 'input';
  }
  return elementType;
};