File Upload in Playwright

In this article, we will discuss how we can upload single/multiple files in playwright.

1. Single file upload – Here we are using the setInputFiles playwright method to select the files for file upload. Next, we are clicking the Upload button and finally to verify that the upload was successful, we are asserting the file name on the success page.

1
2
3
4
5
6

test('Upload a Single file and assert', async ({page}) => {
await page.goto('https://the-internet.herokuapp.com/upload')
await page.setInputFiles('input[type="file"]', 'upload/evening.png')
await page.click('#file-submit')
await expect(page.locator('#uploaded-files')).toContainText('evening.png')
})

2. Multiple File Upload – Similarly, here also we are using the setInputFiles command, but instead of one file path, we are passing an array of file paths.

1
2
3
4
5
6
7
8
9
10
11

test('Upload Multiple files and assert', async ({page}) => {
await page.goto('http://blueimp.github.io/jQuery-File-Upload/')
await page.setInputFiles('input[type="file"]', [
'upload/morning.jpg',
'upload/evening.png',
'upload/night.jpg',
])
await expect(page.locator('p.name').nth(0)).toHaveText('morning.jpg')
await expect(page.locator('p.name').nth(1)).toHaveText('evening.png')
await expect(page.locator('p.name').nth(2)).toHaveText('night.jpg')
})

3. Remove Selected Files – Here, first we are using the setInputFiles command to select the files for upload and then asserting that the intended file was selected successfully. Then, we are using the setInputFiles command again with an empty array to remove the selected file and asserting that the file was un-selected successfully.

1
2
3
4
5
6
7

test('Remove all selected Files', async ({page}) => {
await page.goto('https://west-wind.com/wconnect/wcscripts/fileupload.wwd')
await page.setInputFiles('input[type="file"]', 'upload/evening.png')
await expect(page.locator('#filename')).toContainText('1 file(s)')
await page.setInputFiles('input[type="file"]', []) //remove all selected files
await expect(page.locator('#filename')).toContainText('0 file(s)')
})

4. File(s) upload for non-input elements – In cases where there is a non-input file upload element (meaning there is no input element with the type “file”), we have to use the filechooser method. Using the fileChooser.setFiles method we are setting the values of the file input the chooser is associated with. And, then after a successful upload we are asserting all the file names on the success page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

test('Upload files for non-input element and assert', async ({page}) => {
await page.goto('https://postimages.org/')
// Note that Promise.all prevents a race condition
// between clicking and waiting for the file chooser.
const [fileChooser] = await Promise.all([
// It is important to call waitForEvent before click to set up waiting.
page.waitForEvent('filechooser'),
// Opens the file chooser.
page.locator('#uploadFile').click(),
])
await fileChooser.setFiles([
'upload/morning.jpg',
'upload/evening.png',
'upload/night.jpg',
])
await expect(page.locator('.controls > h2')).toHaveText('Upload completed!', {
timeout: 9000,
})
await expect(page.locator('.imagetitle').nth(0)).toHaveText('evening')
await expect(page.locator('.imagetitle').nth(1)).toHaveText('morning')
await expect(page.locator('.imagetitle').nth(2)).toHaveText('night')
})

Finally, upon executing all tests and we should get a pass.