Skip to main content
Glama

click

Simulate user interaction by clicking elements on a webpage using CSS selectors. Enables automated web testing and browser automation on ARM64 devices like Raspberry Pi within the Chromium environment.

Instructions

Click an element on the page

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for the element to click

Implementation Reference

  • The core handler function for the 'click' tool. It uses Chrome DevTools Protocol (CDP) to find the element by CSS selector, compute its center position, and dispatch mouse press/release events to simulate a click.
    async click(selector) { await this.ensureChromium(); // Find element const doc = await this.sendCDPCommand('DOM.getDocument'); const element = await this.sendCDPCommand('DOM.querySelector', { nodeId: doc.root.nodeId, selector }); if (!element.nodeId) { throw new Error(`Element not found: ${selector}`); } // Get element box const box = await this.sendCDPCommand('DOM.getBoxModel', { nodeId: element.nodeId }); const quad = box.model.content; const x = (quad[0] + quad[4]) / 2; const y = (quad[1] + quad[5]) / 2; // Click await this.sendCDPCommand('Input.dispatchMouseEvent', { type: 'mousePressed', x, y, button: 'left', clickCount: 1 }); await this.sendCDPCommand('Input.dispatchMouseEvent', { type: 'mouseReleased', x, y, button: 'left', clickCount: 1 }); return { content: [{ type: 'text', text: `Clicked element: ${selector}` }], }; }
  • Input schema definition for the 'click' tool, specifying that it requires a 'selector' parameter of type string.
    name: 'click', description: 'Click an element on the page', inputSchema: { type: 'object', properties: { selector: { type: 'string', description: 'CSS selector for the element to click', }, }, required: ['selector'], }, },
  • index.js:355-356 (registration)
    Registration of the 'click' tool handler in the CallToolRequestSchema switch statement, delegating to the click method.
    case 'click': return await this.click(args.selector);
  • index.js:103-343 (registration)
    Tool registration in the ListToolsRequestSchema handler, where 'click' is listed among available tools.
    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ { name: 'navigate', description: 'Navigate to a URL', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'The URL to navigate to', }, }, required: ['url'], }, }, { name: 'screenshot', description: 'Take a screenshot of the current page', inputSchema: { type: 'object', properties: { name: { type: 'string', description: 'Name for the screenshot file', default: 'screenshot.png', }, fullPage: { type: 'boolean', description: 'Capture full page', default: false, }, }, }, }, { name: 'click', description: 'Click an element on the page', inputSchema: { type: 'object', properties: { selector: { type: 'string', description: 'CSS selector for the element to click', }, }, required: ['selector'], }, }, { name: 'fill', description: 'Fill an input field', inputSchema: { type: 'object', properties: { selector: { type: 'string', description: 'CSS selector for the input field', }, value: { type: 'string', description: 'Value to fill', }, }, required: ['selector', 'value'], }, }, { name: 'evaluate', description: 'Execute JavaScript in the browser', inputSchema: { type: 'object', properties: { script: { type: 'string', description: 'JavaScript code to execute', }, }, required: ['script'], }, }, { name: 'get_content', description: 'Get page content (HTML or text)', inputSchema: { type: 'object', properties: { type: { type: 'string', enum: ['html', 'text'], description: 'Type of content to get', default: 'text', }, }, }, }, { name: 'hover', description: 'Hover over an element on the page', inputSchema: { type: 'object', properties: { selector: { type: 'string', description: 'CSS selector for the element to hover', }, }, required: ['selector'], }, }, { name: 'select', description: 'Select an option from a dropdown', inputSchema: { type: 'object', properties: { selector: { type: 'string', description: 'CSS selector for the select element', }, value: { type: 'string', description: 'Value to select', }, }, required: ['selector', 'value'], }, }, { name: 'get_console_logs', description: 'Get browser console logs', inputSchema: { type: 'object', properties: {}, }, }, { name: 'get_console_errors', description: 'Get browser console errors', inputSchema: { type: 'object', properties: {}, }, }, { name: 'get_network_logs', description: 'Get network activity logs', inputSchema: { type: 'object', properties: {}, }, }, { name: 'get_network_errors', description: 'Get network error logs', inputSchema: { type: 'object', properties: {}, }, }, { name: 'wipe_logs', description: 'Clear all stored logs from memory', inputSchema: { type: 'object', properties: {}, }, }, { name: 'get_selected_element', description: 'Get information about the currently selected element', inputSchema: { type: 'object', properties: {}, }, }, { name: 'run_accessibility_audit', description: 'Run an accessibility audit on the current page', inputSchema: { type: 'object', properties: {}, }, }, { name: 'run_performance_audit', description: 'Run a performance audit on the current page', inputSchema: { type: 'object', properties: {}, }, }, { name: 'run_seo_audit', description: 'Run an SEO audit on the current page', inputSchema: { type: 'object', properties: {}, }, }, { name: 'run_best_practices_audit', description: 'Run a best practices audit on the current page', inputSchema: { type: 'object', properties: {}, }, }, { name: 'run_nextjs_audit', description: 'Run a Next.js specific audit on the current page', inputSchema: { type: 'object', properties: {}, }, }, { name: 'run_debugger_mode', description: 'Run debugger mode to debug issues in the application', inputSchema: { type: 'object', properties: {}, }, }, { name: 'run_audit_mode', description: 'Run comprehensive audit mode for optimization', inputSchema: { type: 'object', properties: {}, }, }, { name: 'close_browser', description: 'Close the browser instance', inputSchema: { type: 'object', properties: {}, }, }, ],

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/nfodor/claude-arm64-browser'

If you have feedback or need assistance with the MCP directory API, please join our Discord server