Modern QA2026File Upload and Download — tiles
Log inJoin
107 / 139 · 13 Browser Automation with Playwright · Visual Testing and Edge Cases← prev⊞ allnext →☰ Read as one page

12.4File Upload and Download

File Upload

test('upload a profile photo', async ({ page }) => {
  await page.goto('/profile');

  // Standard file input
  await page.getByLabel('Profile photo').setInputFiles('test-data/photo.jpg');

  // Multiple files
  await page.getByLabel('Attachments').setInputFiles([
    'test-data/doc1.pdf',
    'test-data/doc2.pdf',
  ]);

  // Clear file selection
  await page.getByLabel('Profile photo').setInputFiles([]);
});

// Drag-and-drop file upload (non-input)
test('drag and drop file upload', async ({ page }) => {
  await page.goto('/upload');
  const fileChooserPromise = page.waitForEvent('filechooser');
  await page.getByText('Drop files here').click();
  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles('test-data/document.pdf');
});

File Download

test('download a report', async ({ page }) => {
  const downloadPromise = page.waitForEvent('download');
  await page.getByRole('button', { name: 'Export CSV' }).click();
  const download = await downloadPromise;

  expect(download.suggestedFilename()).toBe('report.csv');
  await download.saveAs('test-results/report.csv');
});