For test automation engineers and developers, puppeteer has rapidly become a vital tool to automate and test web applications using Chrome or Chromium. Understanding how to manipulate file uploads can be particularly valuable. This guide will explore different ways to upload file in Puppeteer, focusing specifically on FileChooser.accept() and page.uploadFile(). By providing comprehensive explanations and examples, we’ll ensure you’re well-equipped to handle file uploads in your automated testing scripts.
Table of Contents
Upload File Using FileChooser
The FileChooser API in Puppeteer triggers when a file input is activated. You can intercept the file chooser event using page.waitForFileChooser() and then use FileChooser.accept() to programmatically set the file(s) you want to upload.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
page.once('filechooser', async (fileChooser) => {
await fileChooser.accept(['/path/to/file.txt']);
});
// Assume there is a file input on the page with id 'upload'
await page.click('#upload');
// Rest of your code...
await browser.close();
})();
Upload File Using page.uploadFile()
An alternative approach is to use the page.uploadFile() method, which allows you to directly set files on an input element.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// The selector for your file input
const input = await page.$('#upload');
// Calling uploadFile on the input element
await input.uploadFile('/path/to/file.txt');
// Rest of your code...
await browser.close();
})();
Output: The file is assigned to the file input element, just as if a user had manually selected the file.
Uploading Multiple Files
To upload multiple files, you can pass several file paths to FileChooser.accept() or input.uploadFile().
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Using FileChooser to accept multiple files
page.once('filechooser', async (fileChooser) => {
await fileChooser.accept(['/path/to/file1.txt', '/path/to/file2.jpg']);
});
await page.click('#file-upload');
// Or using uploadFile to set multiple files
const filesToUpload = ['/path/to/first.file', '/path/to/second.file'];
await page.uploadFile('#multi-file-upload', ...filesToUpload);
// Rest of your code...
await browser.close();
})();
Summary
We have demonstrated two approaches to upload files with Puppeteer: FileChooser.accept() can be used when dealing with dynamic file input, and page.uploadFile() is straightforward when you have direct access to the file element. For multiple files, simply provide an array of file paths to these functions. Puppeteer’s ability to automate file uploads is a powerful feature for testing workflows involving file inputs, ensuring your web applications handle uploads as expected.
References
- Puppeteer’s documentation on FileChooser
- Using files from web applications on MDN
