query_selector
Extract element information from web pages using CSS selectors to locate and retrieve specific content for automation tasks.
Instructions
Get information about an element matching a CSS selector
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for the element | |
| tabId | No | Tab ID to operate on (uses active tab if not specified) |
Implementation Reference
- dist/tools/content.js:68-112 (registration)Registers the 'query_selector' MCP tool with its inline handler function. The handler fetches the page, queries for the CSS selector using Puppeteer, and if found, evaluates and returns element details including tag name, truncated text, attributes, and bounding box; if not found, returns existence false.server.tool('query_selector', 'Get information about an element matching a CSS selector', querySelectorSchema.shape, async ({ selector, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; try { const element = await page.$(selector); if (!element) { return handleResult(ok({ exists: false, selector, })); } const info = await element.evaluate((el) => { const rect = el.getBoundingClientRect(); const attributes = {}; for (let i = 0; i < el.attributes.length; i++) { const attr = el.attributes[i]; if (attr) { attributes[attr.name] = attr.value; } } return { tagName: el.tagName.toLowerCase(), textContent: el.textContent?.slice(0, 1000) ?? '', attributes, boundingBox: { x: rect.x, y: rect.y, width: rect.width, height: rect.height, }, }; }); return handleResult(ok({ exists: true, selector, ...info, })); } catch (error) { return handleResult(err(normalizeError(error))); } });
- dist/tools/content.js:68-112 (handler)The core handler logic for executing the 'query_selector' tool using Puppeteer to query DOM elements and extract detailed information.server.tool('query_selector', 'Get information about an element matching a CSS selector', querySelectorSchema.shape, async ({ selector, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; try { const element = await page.$(selector); if (!element) { return handleResult(ok({ exists: false, selector, })); } const info = await element.evaluate((el) => { const rect = el.getBoundingClientRect(); const attributes = {}; for (let i = 0; i < el.attributes.length; i++) { const attr = el.attributes[i]; if (attr) { attributes[attr.name] = attr.value; } } return { tagName: el.tagName.toLowerCase(), textContent: el.textContent?.slice(0, 1000) ?? '', attributes, boundingBox: { x: rect.x, y: rect.y, width: rect.width, height: rect.height, }, }; }); return handleResult(ok({ exists: true, selector, ...info, })); } catch (error) { return handleResult(err(normalizeError(error))); } });
- dist/schemas.js:102-105 (schema)Zod input schema definition for the 'query_selector' tool, requiring a CSS selector and optional tabId.export const querySelectorSchema = z.object({ selector: selectorSchema, tabId: tabIdSchema, });