wait_for_element
Wait for a web element to reach a specified state—attached, detached, visible, or hidden—using a CSS selector and configurable timeout.
Instructions
Wait for an element to appear or disappear
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for the element | |
| timeout | No | Timeout in milliseconds | |
| state | No | State to wait for | visible |
Implementation Reference
- src/index.ts:49-53 (schema)Zod schema for the wait_for_element tool input validation: selector (string, required), timeout (number, default 30000), state (enum: attached/detached/visible/hidden, default 'visible').
const WaitForElementSchema = z.object({ selector: z.string(), timeout: z.number().default(30000), state: z.enum(['attached', 'detached', 'visible', 'hidden']).default('visible') }); - src/index.ts:256-280 (registration)Tool registration in the ListToolsRequestSchema handler: declares 'wait_for_element' with name, description, and inputSchema.
{ name: 'wait_for_element', description: 'Wait for an element to appear or disappear', inputSchema: { type: 'object', properties: { selector: { type: 'string', description: 'CSS selector for the element' }, timeout: { type: 'number', default: 30000, description: 'Timeout in milliseconds' }, state: { type: 'string', enum: ['attached', 'detached', 'visible', 'hidden'], default: 'visible', description: 'State to wait for' } }, required: ['selector'] } }, - src/index.ts:562-581 (handler)Handler implementation for the wait_for_element tool. Parses input with WaitForElementSchema, then calls Playwright's page.waitForSelector() with the provided selector, timeout, and state. Returns a success message with the selector and its current state.
case 'wait_for_element': { if (!currentPage) { throw new Error('No browser page available. Launch a browser first.'); } const params = WaitForElementSchema.parse(args); await currentPage.waitForSelector(params.selector, { timeout: params.timeout, state: params.state as any }); return { content: [ { type: 'text', text: `Element ${params.selector} is now ${params.state}` } ] }; }