Playwright MCP Server

Instructions

Implementation Reference

• src/server.ts:253-267 (handler)

  The handler function that executes the browser_type tool. It ensures the browser and page are ready, then types the provided text into the current page using Playwright's keyboard.type method, and returns a success message.

  private async handleType(element: string, ref: string, text: string) {
    await this.ensureBrowser();
    
    // Simple type implementation
    await this.browserState.page!.keyboard.type(text);
    
    return {
      content: [
        {
          type: 'text',
          text: `Typed "${text}" into ${element}`,
        },
      ],
    };
  }

• src/server.ts:101-121 (schema)

  The schema definition for the browser_type tool, including name, description, and input schema specifying element, ref, and text parameters.

    name: 'browser_type',
    description: 'Type text into an element',
    inputSchema: {
      type: 'object',
      properties: {
        element: {
          type: 'string',
          description: 'Human-readable element description',
        },
        ref: {
          type: 'string',
          description: 'Exact target element reference from page snapshot',
        },
        text: {
          type: 'string',
          description: 'Text to type into the element',
        },
      },
      required: ['element', 'ref', 'text'],
    },
  },

• src/server.ts:166-168 (registration)

  The switch case registration that dispatches calls to the browser_type tool to the handleType handler function.

  case 'browser_type':
    return await this.handleType(args?.element as string, args?.ref as string, args?.text as string);

• src/server.ts:57-149 (registration)

  The tool list registration in the ListToolsRequestSchema handler that includes the browser_type tool in the available tools list.

  server.setRequestHandler(ListToolsRequestSchema, async () => {
    return {
      tools: [
        {
          name: 'browser_navigate',
          description: 'Navigate to a URL',
          inputSchema: {
            type: 'object',
            properties: {
              url: {
                type: 'string',
                description: 'The URL to navigate to',
              },
            },
            required: ['url'],
          },
        },
        {
          name: 'browser_snapshot',
          description: 'Capture accessibility snapshot of the current page',
          inputSchema: {
            type: 'object',
            properties: {},
          },
        },
        {
          name: 'browser_click',
          description: 'Click on an element',
          inputSchema: {
            type: 'object',
            properties: {
              element: {
                type: 'string',
                description: 'Human-readable element description',
              },
              ref: {
                type: 'string',
                description: 'Exact target element reference from page snapshot',
              },
            },
            required: ['element', 'ref'],
          },
        },
        {
          name: 'browser_type',
          description: 'Type text into an element',
          inputSchema: {
            type: 'object',
            properties: {
              element: {
                type: 'string',
                description: 'Human-readable element description',
              },
              ref: {
                type: 'string',
                description: 'Exact target element reference from page snapshot',
              },
              text: {
                type: 'string',
                description: 'Text to type into the element',
              },
            },
            required: ['element', 'ref', 'text'],
          },
        },
        {
          name: 'browser_take_screenshot',
          description: 'Take a screenshot of the current page',
          inputSchema: {
            type: 'object',
            properties: {
              filename: {
                type: 'string',
                description: 'File name to save the screenshot to',
              },
              fullPage: {
                type: 'boolean',
                description: 'Take screenshot of full page',
              },
            },
          },
        },
        {
          name: 'browser_close',
          description: 'Close the browser',
          inputSchema: {
            type: 'object',
            properties: {},
          },
        },
      ] as Tool[],
    };
  });