interact

Instructions

Implementation Reference

• src/index.ts:143-213 (handler)

  Handler function for the 'interact' tool. Retrieves the browser instance and page using provided IDs, performs the specified action (click, fill, or select) on the given CSS selector, waits, takes a screenshot, gets current URL, and returns success or error message.

  async ({ browserId, pageId, action, selector, value }: { 
    browserId: string; 
    pageId: string; 
    action: "click" | "fill" | "select"; 
    selector: string; 
    value?: string 
  }) => {
    try {
      // Get the browser instance and page
      const instance = browserInstances.get(browserId);
      if (!instance) {
        throw new Error(`Browser instance not found: ${browserId}`);
      }
      
      const page = instance.pages.get(pageId);
      if (!page) {
        throw new Error(`Page not found: ${pageId}`);
      }
      
      // Perform the requested action
      let actionResult = '';
      switch (action) {
        case "click":
          await page.click(selector);
          actionResult = `Clicked on element: ${selector}`;
          break;
        case "fill":
          if (!value) {
            throw new Error("Value is required for fill action");
          }
          await page.fill(selector, value);
          actionResult = `Filled element ${selector} with value: ${value}`;
          break;
        case "select":
          if (!value) {
            throw new Error("Value is required for select action");
          }
          await page.selectOption(selector, value);
          actionResult = `Selected option ${value} in element: ${selector}`;
          break;
      }
      
      // Wait a moment for any results of the interaction
      await page.waitForTimeout(1000);
      
      // Take a screenshot of the result
      const screenshotPath = path.join(TEMP_DIR, `screenshot-${pageId}-${Date.now()}.png`);
      await page.screenshot({ path: screenshotPath });
      
      // Get current URL after interaction
      const currentUrl = page.url();
      
      return {
        content: [
          {
            type: "text",
            text: `Successfully performed action.\n\n${actionResult}\n\nCurrent URL: ${currentUrl}\n\nScreenshot saved to: ${screenshotPath}`
          }
        ]
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text",
            text: `Failed to interact with page: ${error}`
          }
        ]
      };
    }
  }

• src/index.ts:136-142 (schema)

  Zod schema defining input parameters for the 'interact' tool: browserId, pageId, action (enum), selector, optional value.

  {
    browserId: z.string().describe("Browser ID from a previous browse operation"),
    pageId: z.string().describe("Page ID from a previous browse operation"),
    action: z.enum(["click", "fill", "select"]).describe("The type of interaction to perform"),
    selector: z.string().describe("CSS selector for the element to interact with"),
    value: z.string().optional().describe("Value for fill/select actions")
  },

• src/index.ts:133-214 (registration)

  Registration of the 'interact' tool using server.tool() with name, description, schema, and handler function.

  server.tool(
    "interact",
    "Perform simple interactions on a page",
    {
      browserId: z.string().describe("Browser ID from a previous browse operation"),
      pageId: z.string().describe("Page ID from a previous browse operation"),
      action: z.enum(["click", "fill", "select"]).describe("The type of interaction to perform"),
      selector: z.string().describe("CSS selector for the element to interact with"),
      value: z.string().optional().describe("Value for fill/select actions")
    },
    async ({ browserId, pageId, action, selector, value }: { 
      browserId: string; 
      pageId: string; 
      action: "click" | "fill" | "select"; 
      selector: string; 
      value?: string 
    }) => {
      try {
        // Get the browser instance and page
        const instance = browserInstances.get(browserId);
        if (!instance) {
          throw new Error(`Browser instance not found: ${browserId}`);
        }
        
        const page = instance.pages.get(pageId);
        if (!page) {
          throw new Error(`Page not found: ${pageId}`);
        }
        
        // Perform the requested action
        let actionResult = '';
        switch (action) {
          case "click":
            await page.click(selector);
            actionResult = `Clicked on element: ${selector}`;
            break;
          case "fill":
            if (!value) {
              throw new Error("Value is required for fill action");
            }
            await page.fill(selector, value);
            actionResult = `Filled element ${selector} with value: ${value}`;
            break;
          case "select":
            if (!value) {
              throw new Error("Value is required for select action");
            }
            await page.selectOption(selector, value);
            actionResult = `Selected option ${value} in element: ${selector}`;
            break;
        }
        
        // Wait a moment for any results of the interaction
        await page.waitForTimeout(1000);
        
        // Take a screenshot of the result
        const screenshotPath = path.join(TEMP_DIR, `screenshot-${pageId}-${Date.now()}.png`);
        await page.screenshot({ path: screenshotPath });
        
        // Get current URL after interaction
        const currentUrl = page.url();
        
        return {
          content: [
            {
              type: "text",
              text: `Successfully performed action.\n\n${actionResult}\n\nCurrent URL: ${currentUrl}\n\nScreenshot saved to: ${screenshotPath}`
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Failed to interact with page: ${error}`
            }
          ]
        };
      }
    }
  );