Uploading Files in Playwright JS

Learn how to upload files in Playwright

The HTML File Picker element is a way for us to upload local files to the web. 

If I have a recipe and I want to upload a photo to match, we can do that right with this element. Now, if uploading photos is a critical part to my web app, I want to make sure that I’m testing that that functionality works as expected.

How to Test File Uploads with Playwright

We’re going to start off with a new test inside of Playwright where I want to test that I’m able to upload a file with that picker. To do that, I’m going to start off with the await keyword where I want to say on the page object that I want to use the setInputFiles method. 

This method takes 2 arguments. The first thing I want to do is pass in the selector to actually grab that File Picker element. Then I want to also pass in the path to my actual file.

If I want to grab the selector of this File Picker, we can go inside of the dev tools. I can see that this input has an ID of “photo-upload”. So, I’m going to first update that selector with “#photo-upload”. 

Then, we can see that I have this fixtures directory with my images, particularly of some French toast. I’m going to paste that right in as my path. 

When we run that test, we can see that Playwright is going to open up the browser and it’s going to actually use that local file and upload it to the picker.

How to Verify Uploaded Files with Playwright

Typically, we also want to make sure that we verify that it’s actually worked inside of our application. 

In our instance, we don’t have an ID directly on this figure, so we need to actually traverse the DOM a little bit so that we can find this figure. I’m going to first find this File Picker element by running await and using the page where I’m going to use the dollar sign along with the selector — await page.$(‘#photo-upload’) — which is going to get me that element. 

With Playwright though, we need to actually save this into a constant so that we can run again another await command. I’m going to set that equal to “photoUpload” — const $photoUpload = await page.$(‘#photo-upload’) — where we can then use “photoUpload” in the next line.

Next, I want to find the parent of the photo upload. I’m going to create a new constant called “photoUploadParent”. I’m going to set that equal to await where I’m going to use this “photoUpload” constant, where I’m going to, again, use the dollar sign, but this time I’m going to pass in xpath.

I am going to set that equal to — const $photoUploadParent = await $photoUpload.$(‘xpath=..’) — and what that’ll do is it’ll go a level up inside of the DOM. Now that I have the parent, I can actually find that figure.

So, I’m going to say — const $photoUploadFigure = await $photoUploadParent.$$(‘figure’) — where I’m going to use the “photoUploadParent” this time and I’m going to say where I’m going to look for that figure. And instead of using a single dollar sign, I want to actually use two dollar signs here, because I want to actually verify that we have this element. So, I’m going to check that it exists as an array of elements. 

Now I can say that I want to expect that this “photoUploadFigure” to have a length of 1 — expect($photoUploadFigure).toHaveLength(1).

When I run the test we can see, just like before, Playwright is going to open the browser and run that test. But this time, when it passed, we can see that it also went through and ran this expect statement.

If we comment out that file upload and we try to run the test again, we can see that Playwright goes through. But this time it doesn’t upload the file. And we can see that it fails because the array has a length of zero.

But like before, if we un-comment that and we run our test again, we can see that Playwright does indeed find that file. 

Summing It Up – Using the setInputFiles to Upload Files in Playwright

In review, if we want to upload a file within our test, we can use the setInputFiles method on the page object to easily select a selector as well as the path where we want to upload that file from. 

We can also look inside of the DOM to find something so we can make sure we expect it to work exactly right.

Resources

• Git Repo – file-picker.spec.js
• Applitools Kitchen – Testing File Uploads