browser_file_upload
Upload files to specified file input elements on a webpage using Playwright MCP Server, enabling automated interaction with web forms for testing or automation workflows.
Instructions
Upload files to file input elements on the page
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| paths | Yes | ||
| selector | Yes |
Input Schema (JSON Schema)
{
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false,
"properties": {
"paths": {
"items": {
"type": "string"
},
"minItems": 1,
"type": "array"
},
"selector": {
"type": "string"
}
},
"required": [
"selector",
"paths"
],
"type": "object"
}
Implementation Reference
- src/server.ts:492-555 (handler)The handler function that executes the browser_file_upload tool. Parses input with Zod, connects to Playwright page, validates the selector targets a file input element, checks file paths exist and are files (handling relative/absolute), and uploads files using element.setInputFiles().async (params: any) => { try { const input = z.object({ selector: z.string(), paths: z.array(z.string()).min(1) }).parse(params); await this.playwright.ensureConnected(); const page = this.playwright.getPage(); // Validate that the element exists and is a file input const element = page.locator(input.selector); const elementType = await element.getAttribute('type'); if (elementType !== 'file') { throw new Error('Target element is not a file input (type="file")'); } // Validate that files exist (for absolute paths) const fs = await import('fs'); const path = await import('path'); const validatedPaths = []; for (const filePath of input.paths) { try { // Convert relative paths to absolute paths const absolutePath = path.isAbsolute(filePath) ? filePath : path.resolve(process.cwd(), filePath); // Check if file exists if (!fs.existsSync(absolutePath)) { throw new Error(`File not found: ${filePath}`); } // Check if it's actually a file (not directory) const stats = fs.statSync(absolutePath); if (!stats.isFile()) { throw new Error(`Path is not a file: ${filePath}`); } validatedPaths.push(absolutePath); } catch (fileError) { throw new Error(`File validation failed for ${filePath}: ${fileError instanceof Error ? fileError.message : String(fileError)}`); } } // Upload the files await element.setInputFiles(validatedPaths); return { content: [{ type: 'text', text: `Successfully uploaded ${validatedPaths.length} file(s) to element: ${input.selector}` }] }; } catch (error) { return { content: [{ type: 'text', text: `File upload failed: ${error instanceof Error ? error.message : String(error)}` }], isError: true }; } }
- src/server.ts:481-491 (registration)Registration of the browser_file_upload tool in the server, including name, title, description, and inline input schema.// Browser file upload tool this.server.registerTool( 'browser_file_upload', { title: 'Upload Files to Input Element', description: 'Upload files to file input elements on the page', inputSchema: { selector: z.string(), paths: z.array(z.string()).min(1) } },
- src/types.ts:49-52 (schema)Zod schema definition for the input of browser_file_upload tool (selector and paths). Also used to infer TypeScript type.export const BrowserFileUploadInputSchema = z.object({ selector: z.string(), paths: z.array(z.string()).min(1) });