Skip to main content
Glama

focus

Focus on a webpage element using its CSS selector to enable user interaction or input, with configurable timeout and tab selection for automated browser control.

Instructions

Focus an element on the page

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for the element
timeoutNoTimeout in milliseconds
tabIdNoTab ID to operate on (uses active tab if not specified)

Implementation Reference

  • The handler function that implements the 'focus' tool logic: gets the page for the tab, waits for the selector to appear, calls element.focus() using Puppeteer, handles selector not found and other errors, returns success with focused confirmation.
    async ({ selector, timeout, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const timeoutMs = timeout ?? getDefaultTimeout(); try { const element = await page.waitForSelector(selector, { timeout: timeoutMs, }); if (!element) { return handleResult(err(selectorNotFound(selector))); } await element.focus(); return handleResult(ok({ focused: true, selector })); } catch (error) { if (error instanceof Error && error.message.includes('waiting for selector')) { return handleResult(err(selectorNotFound(selector))); } return handleResult(err(normalizeError(error))); } }
  • Zod schema defining the input parameters for the 'focus' tool: CSS selector (required), optional timeout in ms, optional tabId.
    export const focusSchema = z.object({ selector: selectorSchema, timeout: timeoutSchema, tabId: tabIdSchema, });
  • Registers the 'focus' tool on the MCP server within the registerInteractionTools function, specifying name, description, input schema, and handler.
    server.tool( 'focus', 'Focus an element on the page', focusSchema.shape, async ({ selector, timeout, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const timeoutMs = timeout ?? getDefaultTimeout(); try { const element = await page.waitForSelector(selector, { timeout: timeoutMs, }); if (!element) { return handleResult(err(selectorNotFound(selector))); } await element.focus(); return handleResult(ok({ focused: true, selector })); } catch (error) { if (error instanceof Error && error.message.includes('waiting for selector')) { return handleResult(err(selectorNotFound(selector))); } return handleResult(err(normalizeError(error))); } } );
  • src/server.ts:24-24 (registration)
    Top-level call to register interaction tools (including 'focus') on the main MCP server instance.
    registerInteractionTools(server);

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/andytango/puppeteer-mcp'

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