Skip to main content
Glama

query_selector_all

Find all HTML elements matching a CSS selector to inspect and analyze webpage structure for debugging and testing purposes.

Instructions

Busca todos os elementos que correspondem ao seletor CSS

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
limitNoLimitar número de resultados
selectorYesSeletor CSS

Implementation Reference

  • The handler function that performs querySelectorAll on the current page using Puppeteer, limits results, summarizes elements (tag, class, id, text, outerHTML), and returns JSON with count and elements list.
    export async function handleQuerySelectorAll(
      args: unknown,
      currentPage: Page
    ): Promise<ToolResponse> {
      const typedArgs = args as unknown as QuerySelectorAllArgs;
      const { selector, limit = 100 } = typedArgs;
    
      const elements = await currentPage.evaluate(
        (sel: string, lim: number): ElementSummary[] => {
          const elements = Array.from(document.querySelectorAll(sel));
          return elements.slice(0, lim).map((el) => ({
            tagName: el.tagName,
            className: (el as HTMLElement).className || '',
            id: (el as HTMLElement).id || '',
            textContent: (el.textContent || '').substring(0, 100),
            outerHTML: el.outerHTML.substring(0, 200),
          }));
        },
        selector,
        limit
      );
    
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(
              {
                count: elements.length,
                elements: elements,
              },
              null,
              2
            ),
          },
        ],
      };
    }
  • src/tools.ts:165-182 (registration)
    Tool registration in the tools array, defining name, description, and input schema for MCP.
    {
      name: 'query_selector_all',
      description: 'Busca todos os elementos que correspondem ao seletor CSS',
      inputSchema: {
        type: 'object',
        properties: {
          selector: {
            type: 'string',
            description: 'Seletor CSS',
          },
          limit: {
            type: 'number',
            description: 'Limitar número de resultados',
            default: 100,
          },
        },
        required: ['selector'],
      },
  • TypeScript interface defining the input arguments for the query_selector_all tool.
    export interface QuerySelectorAllArgs {
      selector: string;
      limit?: number;
    }
  • src/index.ts:95-98 (registration)
    Dispatch case in the main tool handler switch statement that initializes the browser page and calls the specific handler.
    case 'query_selector_all': {
      const currentPage = await initBrowser();
      return await handleQuerySelectorAll(args, currentPage);
    }
  • TypeScript interface for the summarized element data returned by the handler.
    export interface ElementSummary {
      tagName: string;
      className: string;
      id: string;
      textContent: string;
      outerHTML: string;
    }
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure. While 'Busca' implies a read-only operation, it doesn't specify whether this is a synchronous or asynchronous operation, whether it waits for page load, what happens when no elements match, or any performance implications. For a DOM query tool with zero annotation coverage, this leaves significant behavioral questions unanswered.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence in Portuguese that directly states the tool's function. Every word contributes to understanding what the tool does - 'Busca' (action), 'todos os elementos' (scope), 'que correspondem ao' (matching criteria), 'seletor CSS' (method). There's no wasted verbiage or unnecessary elaboration.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given that this is a DOM query tool with no annotations and no output schema, the description is insufficiently complete. It doesn't explain what format the results return (array of elements? their properties?), whether the limit parameter applies per page or globally, or how this tool interacts with page state. For a tool that presumably returns structured DOM data, more context about the return value would be helpful.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with both parameters clearly documented in the schema. The description doesn't add any parameter semantics beyond what's already in the schema - it mentions CSS selectors but doesn't provide examples, syntax guidance, or explain the relationship between selector and limit parameters. The baseline score of 3 is appropriate when the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('Busca' - searches/finds) and resource ('todos os elementos' - all elements) with the specific mechanism ('seletor CSS' - CSS selector). It distinguishes itself from siblings like 'get_element' (which presumably gets a single element) and 'evaluate_xpath' (which uses XPath instead of CSS). However, it doesn't explicitly contrast with these alternatives in the description text itself.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'get_element' (for single elements), 'evaluate_xpath' (for XPath queries), or 'execute_js' (for JavaScript-based DOM queries). There's no mention of prerequisites, performance considerations, or typical use cases for CSS selector queries versus other DOM interaction methods.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

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/EmmanuelBarbosaMonteiro/mcp-server-browser'

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