browser_fill

Instructions

Implementation Reference

• index.ts:316-355 (handler)

  Handler function for the browser_fill tool. It uses page.locator(selector).pressSequentially(value, { delay: 100 }) to fill an input field character by character with a delay. On strict mode violation, retries with .first(). Catches errors and returns appropriate error messages.

  case ToolName.BrowserFill:
    try {
      await page.locator(args.selector).pressSequentially(args.value, { delay: 100 });
      return {
        content: [{
          type: "text",
            text: `Filled ${args.selector} with: ${args.value}`,
          }],
        isError: false,
      };
    } catch (error) {
      if((error as Error).message.includes("strict mode violation")) {
          console.log("Strict mode violation, retrying on first element...");
          try {
              await page.locator(args.selector).first().pressSequentially(args.value, { delay: 100 });
              return {
                  content: [{
                      type: "text",
                      text: `Filled ${args.selector} with: ${args.value}`,
                  }],
                  isError: false,
              };
          } catch (error) {
              return {
                  content: [{
                      type: "text",
                      text: `Failed (twice) to fill ${args.selector}: ${(error as Error).message}`,
                  }],
                  isError: true,
              };
          }
      }
      return {
        content: [{
          type: "text",
            text: `Failed to fill ${args.selector}: ${(error as Error).message}`,
          }],
        isError: true,
      };
    }

• index.ts:83-93 (schema)

  Schema definition for browser_fill: input type is object with required properties 'selector' (CSS selector string) and 'value' (fill value string).

  {
    name: ToolName.BrowserFill,
    description: "Fill out an input field",
    inputSchema: {
      type: "object",
      properties: {
        selector: { type: "string", description: "CSS selector for input field" },
        value: { type: "string", description: "Value to fill" },
      },
      required: ["selector", "value"],
    },

• index.ts:22-33 (registration)

  Enum registration of BrowserFill = 'browser_fill' as part of ToolName enum.

  enum ToolName {
    BrowserNavigate = "browser_navigate",
    BrowserScreenshot = "browser_screenshot",
    BrowserClick = "browser_click",
    BrowserClickText = "browser_click_text",
    BrowserFill = "browser_fill",
    BrowserSelect = "browser_select",
    BrowserSelectText = "browser_select_text",
    BrowserHover = "browser_hover",
    BrowserHoverText = "browser_hover_text",
    BrowserEvaluate = "browser_evaluate"
  }

• index.ts:36-152 (registration)

  Tool registration in the TOOLS array along with other browser tools. The server registers these tools via ListToolsRequestSchema handler at line 640-642.

  const TOOLS: Tool[] = [
    {
      name: ToolName.BrowserNavigate,
      description: "Navigate to a URL",
      inputSchema: {
        type: "object",
        properties: {
          url: { type: "string" },
        },
        required: ["url"],
      },
    },
    {
      name: ToolName.BrowserScreenshot,
      description: "Take a screenshot of the current page or a specific element",
      inputSchema: {
        type: "object",
        properties: {
          name: { type: "string", description: "Name for the screenshot" },
          selector: { type: "string", description: "CSS selector for element to screenshot" },
          fullPage: { type: "boolean", description: "Take a full page screenshot (default: false)", default: false },
        },
        required: ["name"],
      },
    },
    {
      name: ToolName.BrowserClick,
      description: "Click an element on the page using CSS selector",
      inputSchema: {
        type: "object",
        properties: {
          selector: { type: "string", description: "CSS selector for element to click" },
        },
        required: ["selector"],
      },
    },
    {
      name: ToolName.BrowserClickText,
      description: "Click an element on the page by its text content",
      inputSchema: {
        type: "object",
        properties: {
          text: { type: "string", description: "Text content of the element to click" },
        },
        required: ["text"],
      },
    },
    {
      name: ToolName.BrowserFill,
      description: "Fill out an input field",
      inputSchema: {
        type: "object",
        properties: {
          selector: { type: "string", description: "CSS selector for input field" },
          value: { type: "string", description: "Value to fill" },
        },
        required: ["selector", "value"],
      },
    },
    {
      name: ToolName.BrowserSelect,
      description: "Select an element on the page with Select tag using CSS selector",
      inputSchema: {
        type: "object",
        properties: {
          selector: { type: "string", description: "CSS selector for element to select" },
          value: { type: "string", description: "Value to select" },
        },
        required: ["selector", "value"],
      },
    },
    {
      name: ToolName.BrowserSelectText,
      description: "Select an element on the page with Select tag by its text content",
      inputSchema: {
        type: "object",
        properties: {
          text: { type: "string", description: "Text content of the element to select" },
          value: { type: "string", description: "Value to select" },
        },
        required: ["text", "value"],
      },
    },
    {
      name: ToolName.BrowserHover,
      description: "Hover an element on the page using CSS selector",
      inputSchema: {
        type: "object",
        properties: {
          selector: { type: "string", description: "CSS selector for element to hover" },
        },
        required: ["selector"],
      },
    },
    {
      name: ToolName.BrowserHoverText,
      description: "Hover an element on the page by its text content",
      inputSchema: {
        type: "object",
        properties: {
          text: { type: "string", description: "Text content of the element to hover" },
        },
        required: ["text"],
      },
    },
    {
      name: ToolName.BrowserEvaluate,
      description: "Execute JavaScript in the browser console",
      inputSchema: {
        type: "object",
        properties: {
          script: { type: "string", description: "JavaScript code to execute" },
        },
        required: ["script"],
      },
    },
  ];