playwright file upload testing: setInputFiles guide

TL;DR

Use setInputFiles() on the file input with a fixture path. It works even when the input is hidden, needs no native dialog handling, and accepts multiple files.

Error

(Not an error; a technique. The failure it prevents: tests that try to drive the OS file dialog, which automation cannot do.)

Steps

1. Create a fixture file in the repo: tests/fixtures/photo.png. Expected: a small, committed test file.
2. Target the input: await page.setInputFiles('input[type="file"]', 'tests/fixtures/photo.png'). Expected: no dialog appears; the input holds the file.
3. Submit the form and assert the upload result: await expect(page.getByText('photo.png uploaded')).toBeVisible(). Expected: the app processed the file.
4. For multiple files, pass an array of paths. Expected: all files attached.
5. To clear, call setInputFiles([]). Expected: the input is empty again.

When to use

• Any [input type="file"] upload flow.
• Hidden file inputs (works without force flags).

When not to use

• Drag-and-drop zones with no file input (use drag events or dispatch drop).
• Testing the OS dialog itself (not automatable).

Tool compatibility

• Playwright 1.30 through latest; setInputFiles on locator or page.

Variant phrasings

Playwright upload file test

The general task; setInputFiles is the answer.

Playwright attach file to hidden input

Works directly; no visibility workaround needed.

Why it happens

Native file dialogs are OS-level and invisible to automation. setInputFiles bypasses the dialog by setting the input's files programmatically, which is what the dialog would have done.

Edge cases

• Drag-and-drop: dispatch a drop event with DataTransfer, or check whether the zone also has a hidden input.
• Large files slow the test; use the smallest file that exercises the path.
• The fixture path is relative to the test file; use absolute paths if the working directory varies.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_n0u3-QMEBvZAFprbfSvtbg