Widget practice · Files

Upload & Download

Playwright drives the standard HTML file input via locator.setInputFiles(...) — no OS dialog is opened. Downloads are caught with page.waitForEvent('download') + download.saveAs(). Native OS upload dialogs from custom widgets are out of scope; this page sticks to the standard, supported flow.

① Single file upload

Standard <input type="file">. Playwright sets the file directly on the input.

Pick one file

id=single-upload data-testid=single-upload · single-preview type=file (single)

② Multiple file upload

multiple attribute lets you select several. Playwright passes an array to setInputFiles.

Pick one or more files

id=multi-upload attr=multiple

③ Drag-drop zone (still uses `setInputFiles`)

The visual is a div, but the hidden input behind it is what Playwright targets. Users see a drop zone; tests target the input.

Drop files here or use the hidden input #dropzone-input for tests.

id=dropzone-input (hidden) · dropzone (visual) data-testid=dropzone-input

④ Downloads

Anchor with download attribute serves a generated Blob. Capture via page.waitForEvent('download').

Download static file

data-testid=download-text · download-json · download-static API=page.waitForEvent('download') · download.saveAs(path)

No file action yet.

What students should practise

Upload one file via setInputFiles('tests/fixtures/hello.txt'); assert preview text contains hello.txt.
Upload multiple via array; assert preview count.
Use the dropzone's hidden input — setInputFiles still works on hidden/display:none inputs.
Capture a download with Promise.all([page.waitForEvent('download'), click()]).
Assert download.suggestedFilename() + persist via download.saveAs('out/foo.txt').
Bonus — read the blob via const stream = await download.createReadStream();.

Playwright solutionsetInputFiles + download event handling. Show solution

import { Browser, chromium, Download, Page, expect } from '@playwright/test';
import path from 'path';

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const page: Page = await browser.newPage();
  await page.goto('/playwright/widgets/upload-download.html');

  // 1) single upload
  await page.getByTestId('single-upload').setInputFiles(path.resolve('tests/fixtures/hello.txt'));
  await expect(page.getByTestId('single-preview')).toContainText('hello.txt');

  // 2) multiple upload — pass an array
  await page.getByTestId('multi-upload').setInputFiles([
    path.resolve('tests/fixtures/a.txt'),
    path.resolve('tests/fixtures/b.txt')
  ]);
  await expect(page.getByTestId('multi-preview').locator('.preview-item')).toHaveCount(2);

  // 3) dropzone — target hidden input directly
  await page.getByTestId('dropzone-input').setInputFiles([
    path.resolve('tests/fixtures/photo.png')
  ]);
  await expect(page.getByTestId('dropzone-preview')).toContainText('photo.png');

  // 4) download capture
  const [download]: Download[] = await Promise.all([
    page.waitForEvent('download'),
    page.getByTestId('download-text').click()
  ]) as [Download];
  expect(download.suggestedFilename()).toBe('tta-notes.txt');
  await download.saveAs('out/tta-notes.txt');

  // 5) static link with download attribute — same capture pattern
  const [staticDl] = await Promise.all([
    page.waitForEvent('download'),
    page.getByTestId('download-static').click()
  ]);
  await staticDl.saveAs('out/' + staticDl.suggestedFilename());
})();

Upload & Download

① Single file upload

② Multiple file upload

③ Drag-drop zone (still uses setInputFiles)

④ Downloads

③ Drag-drop zone (still uses `setInputFiles`)