How do you handle file uploads and downloads in Playwright?

Product Support
,
#1

How do you handle file uploads and downloads in Playwright?

#2

Hey Tim,

Handling file uploads and downloads in Playwright involves a combination of convenient methods. Here’s a breakdown:

  1. File Uploads using setInputFiles: Playwright simplifies file uploads using the setInputFiles method. This allows you to set the files for an input element, emulating the user selecting files through the file dialog. Here’s an example using JavaScript:

    const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Assuming there's an input element with type=file on the page
  await page.setInputFiles('input[type=file]', '/path/to/your/file.txt');

  // Continue with your test logic

  await browser.close();
})();

    This snippet demonstrates how to set a file for an input element on the page.

  2. Download Interception with page.route: Intercepting downloads is essential for testing scenarios where you need to verify or manipulate downloaded files. Playwright provides the page.route method, which enables you to intercept network requests and customize their behavior. Here’s a basic example:

    const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Intercepting downloads
  await page.route('**/*', route => {
    if (route.request().resourceType() === 'document') {
      route.continue();
    } else {
      // Modify or save the downloaded file as needed
      route.continue();
    }
  });

  // Trigger a download action on the page

  // Continue with your test logic

  await browser.close();
})();

    This code intercepts all network requests, allowing you to handle download scenarios within the specified route.

By combining setInputFiles for uploads and page.route for downloads, you gain precise control over file-related interactions in your Playwright tests.

Feel free to ask if you have more questions. We are here to make your testing easy.