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.

JsonFormatter.tsx

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.

useJsonFormatter.tsx

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 resources in the tests folder.

tests/resources/data.json

tests/resources/invalidData.txt

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 setInputFiles 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 package.json file.

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

JsonFormatter.test.tsx

To use page.goto('/') without providing the full URL we need to have the baseURL 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 waitForEvent 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 await keyword until it is downloaded.

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

JsonFormatter.test.tsx

Checking the contents of the file

We also want to check if our application correctly formatted the JSON file. We need to use the createReadStream 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 text function from node:stream/consumers.

Summary

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.