Playwright MCP

Instructions

Implementation Reference

• src/mcp/index.ts:235-311 (handler)

  The async handler function for the get-context tool. It fetches the current state, processes messages into formatted text or image content (prefixing DOM/Text, parsing and cleaning Interactions, base64 images), accumulates until 20k chars, splices processed from state, updates state, appends remaining note if any, returns content array.

  async () => {
    posthogServer.capture({
      distinctId: getUserId(),
      event: 'get_context',
    });
  
    const state = getState();
  
    if (state.messages.length === 0) {
      return {
        content: [
          {
            type: "text",
            text: `No messages available`
          }
        ]
      };
    }
  
    const content: any = [];
  
    let totalLength = 0;
    let messagesProcessed = 0;
  
    while (messagesProcessed < state.messages.length && totalLength < 20000) {
      const message = state.messages[messagesProcessed];
      let currentContent = message.content
      if (message.type === 'DOM') {
        currentContent = `DOM: ${message.content}`;
      } else if (message.type === 'Text') {
        currentContent = `Text: ${message.content}`;
      } else if (message.type === 'Interaction') {
        const interaction = JSON.parse(message.content);
        delete interaction.eventId;
        delete interaction.dom;
        delete interaction.elementUUID;
        if (interaction.selectors) {
          interaction.selectors = interaction.selectors.slice(0, 10);
        }
  
        currentContent = JSON.stringify(interaction);
      } else if (message.type === 'Image') {
        currentContent = message.content;
      }
  
      totalLength += currentContent.length;
  
      const item: any = {}
      const isImage = message.type === 'Image';
      if (isImage) {
        item.type = "image";
        item.data = message.content;
        item.mimeType = "image/png";
      } else {
        item.type = "text";
        item.text = currentContent;
      }
      content.push(item);
      messagesProcessed++;
    }
  
    // Remove processed messages
    state.messages.splice(0, messagesProcessed);
    updateState(page, state);
  
    const remainingCount = state.messages.length;
    if (remainingCount > 0) {
      content.push({
        type: "text",
        text: `Remaining ${remainingCount} messages, please fetch those in next requests.\n`
      });
    }
  
    return {
      content
    };
  }

• src/mcp/index.ts:231-312 (registration)

  Registers the 'get-context' tool with McpServer using server.tool(name, description, inputSchema, handlerFn). Input schema is empty object (no params).

  server.tool(
    "get-context",
    "Get the website context which would be used to write the testcase",
    {},
    async () => {
      posthogServer.capture({
        distinctId: getUserId(),
        event: 'get_context',
      });
  
      const state = getState();
  
      if (state.messages.length === 0) {
        return {
          content: [
            {
              type: "text",
              text: `No messages available`
            }
          ]
        };
      }
  
      const content: any = [];
  
      let totalLength = 0;
      let messagesProcessed = 0;
  
      while (messagesProcessed < state.messages.length && totalLength < 20000) {
        const message = state.messages[messagesProcessed];
        let currentContent = message.content
        if (message.type === 'DOM') {
          currentContent = `DOM: ${message.content}`;
        } else if (message.type === 'Text') {
          currentContent = `Text: ${message.content}`;
        } else if (message.type === 'Interaction') {
          const interaction = JSON.parse(message.content);
          delete interaction.eventId;
          delete interaction.dom;
          delete interaction.elementUUID;
          if (interaction.selectors) {
            interaction.selectors = interaction.selectors.slice(0, 10);
          }
  
          currentContent = JSON.stringify(interaction);
        } else if (message.type === 'Image') {
          currentContent = message.content;
        }
  
        totalLength += currentContent.length;
  
        const item: any = {}
        const isImage = message.type === 'Image';
        if (isImage) {
          item.type = "image";
          item.data = message.content;
          item.mimeType = "image/png";
        } else {
          item.type = "text";
          item.text = currentContent;
        }
        content.push(item);
        messagesProcessed++;
      }
  
      // Remove processed messages
      state.messages.splice(0, messagesProcessed);
      updateState(page, state);
  
      const remainingCount = state.messages.length;
      if (remainingCount > 0) {
        content.push({
          type: "text",
          text: `Remaining ${remainingCount} messages, please fetch those in next requests.\n`
        });
      }
  
      return {
        content
      };
    }
  );

• src/mcp/state.ts:57-59 (helper)

  Helper function to get a deep-cloned copy of the global state, which contains the messages array used by get-context handler.

  const getState = () => {
    return structuredClone(globalState);
  }

• src/mcp/state.ts:61-64 (helper)

  Helper function to update the global state with new state and sync it to the React toolbox iframe via page evaluation.

  const updateState = (page: Page, state: typeof globalState) => {
    globalState = structuredClone(state);
    syncToReact(page, state);
  }