Playwright File Operations

Although Playwright is mainly used for browser automation, it excels atfile upload and downloadand is powerful enough to handle common front-end file interaction scenarios.

File Upload

In web forms, file upload is usually done via<input type="file">. Playwright provides dedicated APIs to handle this:

Method 1: setInputFiles()

await page.setInputFiles('input[type="file"]', 'tests/fixtures/avatar.png');

  • Parameter description：

    • Selector: how to locate the file input element.
    • File path: relative/absolute path, supports a single file or an array of multiple files.
  • If you pass[], it clears the selected files.

Method 2: Directly via Locator

const upload = page.locator('input[type=file]');
await upload.setInputFiles(['tests/fixtures/1.png', 'tests/fixtures/2.png']);

Method 3: Simulate drag-and-drop upload (supported by some applications)

const fileChooserPromise = page.waitForEvent('filechooser');
await page.click('button#upload'); // 触发选择文件
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles('tests/fixtures/test.pdf');

File Download

Playwright can capture browser download events and get the file save path.

Basic usage: listen for downloads

Example

const [download] = await Promise.all([
  page.waitForEvent('download'),          // wait for download to start
  page.click('a#downloadButton'),         // trigger download
]);

// save file to specified path
await download.saveAs('downloads/report.pdf');

// get default save path (system temporary directory)
const path = await download.path();
console.log('Download path:', path);

// get download info
console.log(await download.url());        // download URL
console.log(await download.suggestedFilename()); // suggested filename

Screenshots and screen recording files

Playwright itself also generates files (screenshots, videos, traces, etc.):

await page.screenshot({ path: 'screenshots/home.png', fullPage: true });
await page.video()?.saveAs('videos/test.mp4');  // 在配置中开启 video 记录才可用

Complete file operations example

Example

import { test, expect } from '@playwright/test';

test('File Upload and Download Example', async ({ page }) => {
  // upload file
  await page.goto('https://the-internet.herokuapp.com/upload');
  const uploadInput = page.locator('input[type=file]');
  await uploadInput.setInputFiles('tests/fixtures/avatar.png');
  await page.click('#file-submit');
  await expect(page.locator('#uploaded-files')).toHaveText('avatar.png');

  // download file
  await page.goto('https://the-internet.herokuapp.com/download');
  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('a[href="some-file.txt"]'),
  ]);
  await download.saveAs('downloads/some-file.txt');
  console.log('Download complete:', await download.suggestedFilename());
});

File Operations API

API Purpose Parameters/Description
page.setInputFiles(selector, files) Upload file filesCan be a path string, array, orFilePayload
locator.setInputFiles(files) Upload file (Locator method)
page.waitForEvent('filechooser') Wait for file chooser dialog ReturnsFileChooser
fileChooser.setFiles(files) Set the selected files
page.waitForEvent('download') Listen for download event ReturnsDownload
download.saveAs(path) Save downloaded file Custom storage location
download.path() Get system default storage path
download.url() Get the URL of the download request
download.suggestedFilename() Get suggested filename
page.screenshot({ path }) Page screenshot
locator.screenshot({ path }) Element screenshot
page.video()?.saveAs(path) Save recorded video Requires enabling video in configuration
Other extensions