Testing File Upload and Download in Playwright

Modern web applications often involve file uploads and downloads, whether it’s a user uploading a profile picture or downloading a report. As a result, testing these functionalities is critical to ensure a smooth and bug-free user experience. Playwright, a fast-growing end-to-end testing framework developed by Microsoft, provides robust support for automating file uploads and downloads across Chromium, Firefox, and WebKit browsers.

In this blog, we’ll explore how to test file uploads and downloads using Playwright with practical examples in JavaScript/TypeScript.

🔼 File Upload in Playwright

Uploading files in Playwright is a simple and effective process. Playwright allows you to set files directly to an <input type="file"> element without requiring the traditional click-and-select flow from the OS.

🧪 Example: File Upload

javascript

const { test, expect } = require('@playwright/test');

const path = require('path');

test('File upload test', async ({ page }) => {

  await page.goto('https://example.com/upload');

  // Get the input element and upload a file

  const filePath = path.join(__dirname, 'files/sample.pdf');

  await page.setInputFiles('input[type="file"]', filePath);

  // Submit the form or trigger upload logic

  await page.click('button#upload');

  // Validate the success message or file name

  await expect(page.locator('#success-message')).toHaveText('Upload successful!');

});

✅ Tips for File Upload

• You can upload multiple files by passing an array to setInputFiles().
• Playwright does not support drag-and-drop upload directly; use setInputFiles() for consistent results.
• Always validate that the file was uploaded correctly by checking confirmation messages or backend responses.

⬇️ File Download in Playwright

Playwright makes it easy to handle file downloads by providing a built-in page.waitForEvent('download') method. This allows your script to capture the download, save the file, and perform assertions.

🧪 Example: File Download

javascript

const { test, expect } = require('@playwright/test');

const fs = require('fs');

test('File download test', async ({ page }) => {

  await page.goto('https://example.com/download');

  // Trigger the download and wait for the event

  const [ download ] = await Promise.all([

    page.waitForEvent('download'),

    page.click('a#download-button'), // or any trigger

  ]);

  // Save to a desired location

  const downloadPath = await download.path();

  const fileName = download.suggestedFilename();

  await download.saveAs(`downloads/${fileName}`);

  // Assert file existence

  expect(fs.existsSync(`downloads/${fileName}`)).toBeTruthy();

});

✅ Tips for File Download

• Ensure the download path exists before saving files.
• Use suggestedFilename() for consistency with actual download names.
• Clean up files after test execution to avoid cluttering your environment.

🛠 Handling Common Scenarios

• Download prompts: If a file triggers a browser download dialog, Playwright bypasses it automatically by managing downloads in a headless environment.
• Hidden input fields: Some file upload inputs might be hidden. Playwright can still interact with them using setInputFiles() without needing visibility.
• Cross-browser tests: File operations work across all major browsers supported by Playwright.

✅ Conclusion

Testing file upload and download functionality is crucial for web applications dealing with document management, reports, images, and more. Playwright simplifies these scenarios with its intuitive and powerful APIs. Whether you're working on a simple form or a complex data export feature, Playwright gives you full control over how files are handled during automation.

By using setInputFiles() for uploads and page.waitForEvent('download') for downloads, you can build reliable, cross-browser tests that validate real-world file workflows.

Learn Playwright Testing Training
Read More: Handling Auto-Complete Fields in Playwright

Visit IHUB Talent Institute Hyderabad
Get Direction