playwright-mcp/src/mcp/handle-browser-event.ts

Playwright integration for ModelContext

import { updateState } from './state';
import { getState } from './state';
import { preprocessBrowserEvent } from './recording/utils';
import { Page } from 'playwright';
import _ from 'lodash';

export const handleBrowserEvent = (page: Page) => {
  const eventQueue: any[] = [];

  const processEvents = _.debounce(
    () => {
      if (eventQueue.length === 0) {
        return;
      }

      // Skip events for same element and type
      while (eventQueue.length > 1) {
        const currentEvent = eventQueue[0];
        const nextEvent = eventQueue[1];
        if (
          currentEvent.type === nextEvent.type &&
          currentEvent.elementUUID === nextEvent.elementUUID
        ) {
          eventQueue.shift();
        } else {
          break;
        }
      }

      const event = eventQueue.shift();
      const state = getState();

      preprocessBrowserEvent(event);

      if (state.messages.length > 0) {
        const lastMessage = state.messages[state.messages.length - 1];
        if (lastMessage.type === 'Interaction') {
          const lastInteraction = JSON.parse(lastMessage.content);
          if (
            lastInteraction.type === 'input' &&
            lastInteraction.elementUUID === event.elementUUID
          ) {
            lastInteraction.typedText = event.typedText;
            state.messages[state.messages.length - 1] = {
              type: 'Interaction',
              content: JSON.stringify(lastInteraction),
              windowUrl: event.windowUrl,
            };
            updateState(page, state);
            return;
          }
        }
      }

      state.messages.push({
        type: 'Interaction',
        content: JSON.stringify(event),
        windowUrl: event.windowUrl,
      });
      updateState(page, state);
    },
    100,
    { maxWait: 500 }
  );

  return (event: any) => {
    const state = getState();
    if (!state.recordingInteractions || state.pickingType) {
      return;
    }

    eventQueue.push(event);
    processEvents();
  };
};