Playwright File Upload Download

A job portal asks a candidate to upload a resume. A tax website lets a user download a filled form. File uploads and downloads appear across countless websites, and Playwright handles both without ever needing a real file picker window to open on screen.

The Upload Journey

Test Script
    |
    v
File Input Element on the Page
    |
    v
File Attached Directly (No Dialog Box Needed)
    |
    v
File Sent to the Server

Uploading a Single File

await page.getByLabel('Upload Resume').setInputFiles('resume.pdf');

This line attaches the file named "resume.pdf" straight to the file input. Playwright skips the operating system's file browser window entirely, making the test faster and more reliable.

Uploading Multiple Files at Once

await page.getByLabel('Attach Documents').setInputFiles([
  'id-proof.pdf',
  'address-proof.pdf',
]);

Passing an array of file names uploads several documents together, matching forms that accept multiple attachments in one step.

Uploading a File Created on the Fly

await page.getByLabel('Upload File').setInputFiles({
  name: 'notes.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('This is a test file'),
});

This creates a small text file directly in memory without needing an actual file saved on the computer beforehand, useful for quick, disposable test files.

Removing an Uploaded File

await page.getByLabel('Upload Resume').setInputFiles([]);

Passing an empty array clears any previously attached file from the input.

The Download Journey

Click Download Button
      |
      v
Browser Starts the Download
      |
      v
Playwright Listens for the Download Event
      |
      v
File Saved for Inspection

Capturing a Download

const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.getByRole('button', { name: 'Download Invoice' }).click(),
]);
await download.saveAs('invoice.pdf');

Playwright waits for the download to start at the same moment the button gets clicked, then saves the resulting file under a chosen name.

Checking the Downloaded File Name

console.log(download.suggestedFilename());

This confirms the website suggested the correct file name, catching bugs where a download arrives with a broken or generic name.

A Real-World Example

An online banking test uploads a scanned ID document during account verification, then later downloads a monthly statement to confirm it generates correctly. Both actions run within seconds, without ever showing an actual file dialog window.

Quick Practice Task

Find a website offering a free downloadable file, such as a sample PDF. Write a test that clicks the download link and saves the file locally.

Key Takeaways

  • setInputFiles attaches files without opening a real file picker window.
  • Multiple files and in-memory files both work with setInputFiles.
  • waitForEvent captures downloads triggered by a button click.
  • Downloaded files can be saved and checked within the same test.

Leave a Comment

Your email address will not be published. Required fields are marked *