Playwright Upload File

In Playwright, you can use the setInputFiles() method to upload files, if the element type is input. For non-input element types or when the input type is hidden, you can use the filechooser objects.

Table of Contents

1. Syntax
2. Demo Website
3. Single File Upload
4. Buffer File Upload
5. Multiple Files Upload
6. Video Tutorial

Syntax

page.setInputFiles(selector: string, files: string | string[], [, options]) 
locator(selector: string).setInputFiles(files: string | string[], [, options])

• selector: selector that points to an input element with the type "file."
• files: File name followed by path. If paths are relative, they are resolved to the current working directory. Multiple files are specified using the array[].
• Options: 
  • {name, mimeType, buffer}: To Create File at runtime
  • timeout (number)
  • noWaitAfter (boolean)
  • strict (boolean): With Page Fixture Only.

Demo Website

Let's use the file upload functionality on the bottom of the autopract homepage for a single file upload.

For the multiple files upload, refer to multiple file upload page of autopract.

Single File Upload

test('Single File Upload', async ({page})=> 
{
    await page.goto("http://www.autopract.com");
    
    // This will close popup appears on first visit
    await page.locator('.close').click()
    
    // Locator for choose file input 
    // File Name followed by Path
    await page.setInputFiles("input[type='file']", 'tests/G.png')
    
    // Click on Upload Button
    await page.locator('.btn.btn-success').click()
});

Buffer File Upload

test('Buffer File Upload', async ({page})=> 
{
    await page.goto("http://www.autopract.com");
    await page.locator('.close').click()
    
    // Create and Upload CSV File
    await page.setInputFiles("input[type='file']", {
        name: 'file.csv',
        mimeType:'text/csv',
        buffer: Buffer.from('this,is,test')
      })
      
    await page.locator('.btn.btn-success').click()
});

The above code will create a CSV file to create other files on runtime; refer common mime types.

Multiple Files Upload

test.only('Multiple Files Upload', async ({page})=> 
{
    await page.goto("http://autopract.com/selenium/upload1/");
    
    // Locator for Add Files Button
    // Multiple files in array [,]
    await page.locator("input[type='file']").setInputFiles(['tests/G.png','tests/image.jpg'])
    
    // Locator for Start Upload Button
    await page.locator("button[type='submit']").click()
});