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
| 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') |
Input Schema (JSON Schema)
{
"properties": {
"includeAttributes": {
"default": true,
"description": "Incluir todos os atributos do elemento",
"type": "boolean"
},
"includeStyles": {
"default": true,
"description": "Incluir estilos computados do elemento",
"type": "boolean"
},
"selector": {
"description": "Seletor CSS do elemento (ex: '#id', '.class', 'div.container')",
"type": "string"
}
},
"required": [
"selector"
],
"type": "object"
}
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; };