Test the file upload functionality
Learn how to test the file upload functionality of your web app in Playwright using BrowserStack Automate.
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
- RESOURCES
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!