Upload a File

The concept

Clicking an upload button normally opens the operating system's file picker, which a browser test cannot drive. Playwright skips it: locator.setInputFiles() attaches files directly to an <input type="file">, and the page receives them as if the user had picked them.

You can pass a path to a real file, an array of paths, or an in-memory file described with a name, mimeType and buffer. In-memory files are handy when the file name or content has to be unique per run, and they keep tests free of fixture files.

After attaching, submit the form and assert on what the page shows, such as the file name in a confirmation.

The fragile version

await page.getByRole('button', { name: 'Choose file' }).click();
// ...test hangs waiting for a native dialog it cannot control

Why it breaks: Clicking opens the native picker, which Playwright does not automate. The test has no way to choose a file.

A robust Playwright version

const fileName = `report-${Date.now()}.txt`;
await page.getByLabel('Attachment').setInputFiles({
  name: fileName,
  mimeType: 'text/csv',
  buffer: Buffer.from('hello'),
});
await page.getByRole('button', { name: 'Attach report' }).click();
await expect(page.getByText(fileName)).toBeVisible();

The file is attached directly to the input with a run-time name, and the test checks the upload was received.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Clicking the button that opens the native picker.
• Calling setInputFiles on a styled wrapper instead of the actual file input.
• If you must click, not using page.waitForEvent('filechooser') before the click.

FAQ