get_element
Inspect specific web elements using CSS selectors to retrieve computed styles, attributes, and DOM properties for debugging and analysis.
Instructions
Inspeciona um elemento específico usando seletor CSS
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| includeAttributes | No | Incluir todos os atributos do elemento | |
| includeStyles | No | Incluir estilos computados do elemento | |
| selector | Yes | Seletor CSS do elemento (ex: '#id', '.class', 'div.container') |
Implementation Reference
- src/browserTools.ts:115-183 (handler)The handler function that executes the get_element tool: queries the DOM for the selector, extracts tag, HTML, text, attributes, computed styles, and bounding box using page.evaluate, returns JSON or error.export async function handleGetElement(args: unknown, currentPage: Page): Promise<ToolResponse> { const typedArgs = args as unknown as GetElementArgs; const { selector, includeStyles = true, includeAttributes = true } = typedArgs; const elementInfo = await currentPage.evaluate( (sel: string, incStyles: boolean, incAttrs: boolean): ElementInfo | null => { const element = document.querySelector(sel); if (!element) return null; const info: ElementInfo = { tagName: element.tagName, innerHTML: element.innerHTML, outerHTML: element.outerHTML, textContent: element.textContent || '', boundingBox: { x: 0, y: 0, width: 0, height: 0 }, }; if (incAttrs) { info.attributes = {}; for (let i = 0; i < element.attributes.length; i++) { const attr = element.attributes[i]; info.attributes[attr.name] = attr.value; } } if (incStyles) { const styles = window.getComputedStyle(element); info.computedStyles = {}; for (let i = 0; i < styles.length; i++) { const prop = styles[i]; info.computedStyles[prop] = styles.getPropertyValue(prop); } } const rect = element.getBoundingClientRect(); info.boundingBox = { x: rect.x, y: rect.y, width: rect.width, height: rect.height, }; return info; }, selector, includeStyles, includeAttributes ); if (!elementInfo) { return { content: [ { type: 'text', text: JSON.stringify({ error: `Elemento não encontrado: ${selector}` }, null, 2), }, ], }; } return { content: [ { type: 'text', text: JSON.stringify(elementInfo, null, 2), }, ], }; }
- src/types.ts:38-42 (schema)TypeScript interface defining the input parameters for the get_element tool.export interface GetElementArgs { selector: string; includeStyles?: boolean; includeAttributes?: boolean; }
- src/tools.ts:42-63 (registration)MCP tool definition and input schema registration for get_element in the tools array.name: 'get_element', description: 'Inspeciona um elemento específico usando seletor CSS', inputSchema: { type: 'object', properties: { selector: { type: 'string', description: "Seletor CSS do elemento (ex: '#id', '.class', 'div.container')", }, includeStyles: { type: 'boolean', description: 'Incluir estilos computados do elemento', default: true, }, includeAttributes: { type: 'boolean', description: 'Incluir todos os atributos do elemento', default: true, }, }, required: ['selector'], },
- src/index.ts:75-77 (registration)Dispatch/registration in the main switch case handler for calling the get_element tool handler.case 'get_element': { const currentPage = await initBrowser(); return await handleGetElement(args, currentPage);
- src/types.ts:90-102 (schema)TypeScript interface for the output structure returned by the get_element handler.export interface ElementInfo { tagName: string; innerHTML: string; outerHTML: string; textContent: string; attributes?: Record<string, string>; computedStyles?: Record<string, string>; boundingBox: { x: number; y: number; width: number; height: number; };