Principle:Getgauge Taiko File Attachment

Knowledge Sources	Taiko
Domains	Browser_Automation, Form_Interaction
Last Updated	2026-02-12 00:00 GMT

Overview

Technique for programmatically attaching files to file input elements in browser automation.

Description

File attachment sets files on HTML <input type="file"> elements via the CDP DOM.setFileInputFiles API, bypassing the native file picker dialog. In a normal browser session, clicking a file input opens the operating system's file picker dialog, which cannot be controlled by standard DOM APIs or JavaScript. Browser automation frameworks solve this by using the DevTools Protocol to directly set the file paths on the input element, simulating a completed file selection.

The implementation validates file existence before attempting attachment. If a specified file path does not exist on the filesystem, an error is thrown immediately rather than allowing the upload to proceed with an invalid path. File paths are resolved relative to the current working directory, making it convenient to reference test fixture files.

Both single and multiple file uploads are supported. For single file inputs, a single file path string is provided. For multi-file inputs (those with the multiple attribute), an array of file paths can be specified to attach several files at once.

After the files are set on the input element, a change event is dispatched to notify the application that files have been selected. This triggers any upload handlers, file preview logic, or validation that the application performs when files are chosen.

Usage

Use file attachment when automating:

• Document uploads -- Attach resumes, reports, or other documents to upload forms.
• Image uploads -- Attach profile pictures, product images, or other media files.
• Batch file uploads -- Attach multiple files at once to multi-file input elements.
• File type validation testing -- Attach files of various types to verify that the application's file type restrictions work correctly.
• File size validation testing -- Attach files of different sizes to test upload size limits.

Theoretical Basis

The file attachment mechanism bypasses the browser's native file picker through these steps:

1. Locate the file input -- Find the <input type="file"> element by its label, attributes, or CSS selector.
2. Resolve file paths -- Convert relative file paths to absolute paths using the current working directory as the base. This ensures that the CDP command receives valid filesystem paths.
3. Validate file existence -- Check that each specified file exists on the local filesystem. Throw a descriptive error if any file is missing, preventing silent failures.
4. Set files via CDP -- Call DOM.setFileInputFiles with the resolved file paths and the element's node ID. This directly sets the files property of the input element, equivalent to the user having selected those files through the file picker dialog.
5. Dispatch change event -- Fire a change event on the file input element to trigger any application-level handlers for file selection.

Key considerations:

• The files must exist on the machine running the browser (not on a remote machine if using remote browser connections).
• The accept attribute on the file input (e.g., accept=".pdf,.doc") is a UI hint for the file picker dialog and is not enforced when setting files programmatically. Application-level validation may still reject files of incorrect types.
• For security reasons, the file paths are not exposed to JavaScript running in the page context. The page can only access the file contents through the File API.

Related Pages

Implemented By

• Implementation:Getgauge_Taiko_Attach