interact
Perform browser automation interactions like clicking, filling, or selecting elements on web pages while avoiding bot detection systems.
Instructions
Perform simple interactions on a page
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| browserId | Yes | Browser ID from a previous browse operation | |
| pageId | Yes | Page ID from a previous browse operation | |
| action | Yes | The type of interaction to perform | |
| selector | Yes | CSS selector for the element to interact with | |
| value | No | Value for fill/select actions |
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}` } ] }; } } );