Skip to main content
Transform your testing process with: Real Device Features, Company-wide Licences, & Test Observability

Test File Upload Functionality

Learn how to test the file upload functionality of your web app using BrowserStack Automate.

Overview

The file upload functionality of a web app allows you to upload files for various features, such as forms, registration pages, or document uploaders. Uploading a file requires searching for the file in a specific location on your machine, and then uploading it to the web app.

BrowserStack allows you to test the Playwrights file upload functionality using the setInputFiles method of the locator element that enables file transfers from your machine to the BrowserStack remote browser. The locator.setInputFiles(files[, options]) method should always point the first argument to a file type.

Upload files from your machine

The following code example shows how the setInputFiles method is used to upload a file:

'use strict';
const {chromium} = require('playwright');
const {promisify} = require('util');
const sleep = promisify(setTimeout);

(async () => {
  const caps = {
    build: 'Playwright testing',
    browser: "chrome",
    os: "osx",
    os_version: "catalina",
    'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
    'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY'
    'browserstack.networkLogs': true,
    'browserstack.console': 'errors',
  };

  const browser = await chromium.connect({
    wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`,
  });
  const context = await browser.newContext({ignoreHTTPSErrors: true});
  const page = await context.newPage();

  await page.goto('https://www.fileconvoy.com/');
  const fileChooserPromise = page.waitForEvent('filechooser');
  await page.locator('input[name=\"upfile_0\"]').click();
  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles('/provide/absolute/path/to/file.name'); // Provide absolute path 
  await page.locator('input[name=\"readTermsOfUse\"]').check();
  await page.locator('input[name=\"upload_button\"]').click();

  await sleep(1*60*1000);
  await browser.close();
})();

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy