Why doesn't clicking the file input open an OS dialog in Playwright?

Playwright's setInputFiles injects the file directly into the input's FileList without triggering the native OS dialog. This is intentional — OS dialogs cannot be automated reliably in CI environments. Never use click() on a file input; always use setInputFiles instead.

How do I upload a file to a drag-and-drop zone that has no visible input?

Most drag-and-drop zones have a hidden inside them that collects the file from the drop event. Locate it with: page.locator('[data-testid="fu-drop-zone"] input[type="file"]') and use setInputFiles. If no hidden input exists, dispatch a drop event with a DataTransfer object containing a File.

How do I automate a custom upload button that hides the real file input?

Do not click the styled button. Locate the hidden inside the same container and call setInputFiles on it directly. Playwright's setInputFiles works even when the input is not visible. In Selenium, use JavascriptExecutor to remove the display:none style before calling sendKeys.

How do I assert a file size or type validation error that has no data-testid?

Scope your locator to the parent container that does have a data-testid, then find the error element inside it by class, role, or text: page.getByTestId('fu-size-panel').locator('.error-msg'). In XPath: //*[@data-testid='fu-size-panel']//p[contains(@class,'error-msg')]. Never rely on positional selectors like nth-child for error messages.

How to Handle File Upload in Selenium and Playwright

Practice file upload automation — single file, multiple files, drag and drop, type restrictions, size validation, hidden inputs, and upload progress in Playwright, Selenium & Cypress.

Intermediate15 min8 scenarios14 test cases

Interactive Scenarios

S01Scenario 1: Upload a Single File

No file selected

S02Scenario 2: Upload Multiple Files

No files selected

S03Scenario 3: Assert File Name After Selection (Medium)

🗂️No file chosen

Inner <span> has no data-testid. Target via [data-testid="fu-filename-display"] span[role="status"].

Filename not asserted

S04Scenario 4: Drag & Drop Upload Zone (Hard)

📂Drag & drop a file hereor click to browse · hidden input inside zone

Automation tip: target [data-testid="fu-drop-input"] inside the zone and use setInputFiles().

No file dropped

S05Scenario 5: File Type Restriction (Medium)

Input has accept="image/*". Upload a non-image file to trigger the error.

Type not validated

S06Scenario 6: File Size Validation (Hard)

Max size: 2 MB. Error paragraph has no data-testid — locate via .error-msg class inside the panel.

Size not validated

S07Scenario 7: Custom Button Triggers Hidden Input (Challenge)CHALLENGE

The styled button triggers a visually hidden input[type="file"]. The input has no data-testid. Target via: [data-testid="fu-hidden-zone"] input[type="file"].

Hidden input not targeted

S08Scenario 8: Upload Progress Bar (Challenge)CHALLENGE

Progress bar has no data-testid. Use getByRole('progressbar') to locate it.

Progress not tracked

Showing 14 test cases

ID	Scenario	Type	Priority
FU_001	Upload a single file via native file input Expected: File input reflects the selected file; file name is displayed. ✅ positivehigh	positive	high
FU_002	Upload multiple files via multi-file input Expected: All selected files are reflected; count matches number of files set. ✅ positivehigh	positive	high
FU_003	Clear previously selected file Expected: File input is reset; display reverts to empty state. ✅ positivemedium	positive	medium
FU_004	Assert file name displayed after selection (no testid on label) Expected: Filename span inside fu-filename-display shows selected file name. ✅ positivehigh	positive	high
FU_005	Assert accept attribute on type-restricted input Expected: Input has accept='image/*' attribute. ✅ positivemedium	positive	medium
FU_006	Upload invalid file type triggers error message Expected: Error element fu-type-error is visible with descriptive text. ❌ negativehigh	negative	high
FU_007	Upload file within size limit succeeds Expected: No error shown; success state displayed. ✅ positivehigh	positive	high
FU_008	Upload file exceeding size limit shows error (no testid on error) Expected: Error paragraph inside fu-size-panel is visible. ❌ negativehigh	negative	high
FU_009	Drop zone accepts dragover and shows active state Expected: Drop zone has active/highlight class while dragging over. ✅ positivemedium	positive	medium
FU_010	File input inside drop zone can be targeted directly Expected: Hidden file input inside drop zone accepts setInputFiles. ✅ positivehigh	positive	high
FU_011	Custom button triggers visually hidden file input Expected: File is selected despite input being hidden. ✅ positivehigh	positive	high
FU_012	Upload progress bar role is assertable via ARIA Expected: Progressbar role is present; aria-valuenow reaches 100. ✅ positivehigh	positive	high
FU_013	Progress bar disappears after upload completes Expected: Progressbar is detached/hidden; success state shows. ✅ positivemedium	positive	medium
FU_014	No file selected — upload button remains disabled Expected: fu-upload-btn is disabled when no file is set. ⚠️ edgemedium	edge	medium

Overview

File upload inputs are among the most common — and most misunderstood — elements to automate. Native <input type='file'> is handled differently by each framework: Playwright uses setInputFiles and bypasses the OS dialog entirely; Selenium uses sendKeys with the absolute file path; Cypress uses selectFile. Drag-and-drop zones and hidden inputs require extra care.

1 · setInputFiles

setInputFiles (Playwright) and sendKeys (Selenium) both write a file path directly to the file input without triggering the OS dialog. This is the preferred approach in CI environments where no OS dialog can appear. Pass an array to set multiple files. Pass an empty array to clear the selection.

TypeScript

// Upload a single file
await page.getByTestId('fu-single-input').setInputFiles('tests/fixtures/sample.pdf');

// Upload multiple files
await page.getByTestId('fu-multi-input').setInputFiles([
  'tests/fixtures/invoice.pdf',
  'tests/fixtures/photo.png',
]);

// Clear file selection
await page.getByTestId('fu-single-input').setInputFiles([]);

// Assert file name displayed
await expect(page.getByTestId('fu-filename-display').getByRole('status'))
  .toContainText('sample.pdf');

2 · Drag & Drop

Drag-and-drop upload zones are typically built as a div with dragover and drop event listeners that read e.dataTransfer.files. In Playwright, the easiest approach is to find the hidden <input type='file'> inside the zone and use setInputFiles. Cypress provides selectFile with { action: 'drag-drop' }. In Selenium you need to use Robot or JavascriptExecutor to construct and dispatch the DataTransfer event.

TypeScript

// Easiest: target the hidden input inside the drop zone
const dropInput = page.locator('[data-testid="fu-drop-zone"] input[type="file"]');
await dropInput.setInputFiles('tests/fixtures/sample.pdf');

// XPath alternative for the hidden input
// //*[@data-testid="fu-drop-zone"]//input[@type="file"]

// Full drag-and-drop simulation via DataTransfer
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
await page.dispatchEvent('[data-testid="fu-drop-zone"]', 'dragover', { dataTransfer });
await page.dispatchEvent('[data-testid="fu-drop-zone"]', 'drop',     { dataTransfer });

3 · Hidden File Inputs

Custom styled upload buttons hide the native file input with display:none or opacity:0 and then programmatically click it. Playwright's setInputFiles works on hidden inputs because it bypasses the DOM click. In Selenium, make the input visible first with JavascriptExecutor before calling sendKeys, or dispatch the file selection via JS.

TypeScript

// setInputFiles works on hidden inputs — no need to make visible
const hiddenInput = page.locator(
  '[data-testid="fu-hidden-zone"] input[type="file"]'
);

// Or by XPath
// //*[@data-testid="fu-hidden-zone"]//input[@type="file"]

await hiddenInput.setInputFiles('tests/fixtures/sample.pdf');

// Do NOT click the custom button if you want CI-safe uploads
// — the styled button triggers the OS dialog in real browsers.
// setInputFiles bypasses the dialog entirely.

4 · Validation Assertions

Client-side validation (type restrictions, size limits) happens in JavaScript before any network call. Assert the error message element after setting an invalid file. Locate error elements via the parent container's data-testid when no direct testid exists on the error itself.

TypeScript

// Assert file type validation error
await page.getByTestId('fu-type-input').setInputFiles({
  name: 'document.pdf',
  mimeType: 'application/pdf',
  buffer: Buffer.from('fake-content'),
});
await expect(page.getByTestId('fu-type-error')).toBeVisible();
await expect(page.getByTestId('fu-type-error')).toContainText('image');

// Assert size error (no testid — scope from parent)
const panel = page.getByTestId('fu-size-panel');
await expect(panel.locator('.error-msg')).toBeVisible();
await expect(panel.locator('.error-msg')).toContainText('2 MB');

// XPath for error without testid
// //*[@data-testid="fu-size-panel"]//p[contains(@class,"error-msg")]

Method Summary

Action	Selenium	Playwright JS	Playwright PY	Cypress
Upload single file	`element.sendKeys('/abs/path')`	`setInputFiles('path')`	`set_input_files('path')`	`.selectFile('fixtures/f')`
Upload multiple files	`sendKeys('a\nb') or loop`	`setInputFiles(['a','b'])`	`set_input_files(['a','b'])`	`.selectFile(['a','b'])`
Clear file selection	`JS: input.value=''`	`setInputFiles([])`	`set_input_files([])`	`.invoke('val','')`
Hidden input	`JS removeStyle + sendKeys`	`setInputFiles() (works hidden)`	`set_input_files() (works hidden)`	`.selectFile(…, { force: true })`
Drag-and-drop zone	`JS DataTransfer dispatch`	`dispatchEvent('drop', dt)`	`dispatch_event('drop', dt)`	`.selectFile(…, { action: 'drag-drop' })`

FAQ