JavaScript testing #18. E2E Playwright tests for uploading and downloading files


This entry is part 18 of 18 in the JavaScript testing tutorial

Our applications sometimes include features that allow users to select files from their hard drives, and some functionalities might let users download files. Implementing End-to-End tests that ensure that everything works as expected might not seem straightforward at first.

In this article, we create a simple React application that lets users choose a JSON file from their machine and download a formatted version. Then, we use Playwright to test the file input and verify if the downloaded file is correct.

An application that formats JSON files

To start, let’s create a component with a file input.


Under the hood, we extract the text from the selected file and parse it as JSON. Then, we format it and send it back to the user.


If the user provides a valid JSON file, they get a formatted version with the same file name.


If the user selects an invalid file, we display the error message.

Preparing the necessary files

To test our application, we must prepare two files – one with valid JSON and one with invalid data. Let’s put them in the directory called in the folder.



Interacting with the file input

To interact with the file input through our End-to-End tests, we must first locate it on the page. One of the straightforward ways of doing that is to find it through the label text.

Now, we must provide the path to our files with the function. One way is to provide a relative path to the file. The path will be resolved relative to the current working directory containing our file.

We can use the above to test what happens when the user provides both valid and invalid files.


To use without providing the full URL we need to have the  configuration set up. If you want to know more, check out JavaScript testing #17. Introduction to End-to-End testing with Playwright

Testing the name of the downloaded file

Every time the browser downloads a file, Playwright emits an event. To start listening for it, we need to call the function, which returns a promise.

The crucial aspect is to start waiting for the event before the browser downloads the file, but don’t use the keyword until it is downloaded.

Now, we can use the function to test if the downloaded file’s name is correct.


Checking the contents of the file

We also want to check if our application correctly formatted the JSON file. We need to use the function that returns a read stream to do that.

If you want to know more about streams in Node.js, check out Node.js TypeScript #4. Paused and flowing modes of a readable stream

Playwright tests run in a Node.js environment. Thanks to that, we can use various APIs built into Node.js. The most straightforward way of reading the stream is to use the function from .


In this article, we’ve learned how to use Playwright to write End-to-End tests to verify features that include dealing with files. This included learning how to simulate choosing a file from the hard drive. Besides that, we also learned how to verify downloaded files by checking their names and content to ensure they contain the correct data. Fortunately, Playwright makes working with files very straightforward.

Series Navigation<< JavaScript testing #17. Introduction to End-to-End testing with Playwright
Notify of
Inline Feedbacks
View all comments