How to Download Files Using Playwright in Typescript

Are you struggling with downloading files using Playwright in your Typescript projects? In this guide, I will walk you through a step-by-step solution to tackle this issue.

Specifically, we’ll focus on scenarios where there is a download button in the browser, and upon clicking it, a new tab opens to start the download. After the download is completed, the new tab closes automatically.

The Download Button

The first step is to create a function that clicks the download button and waits for the new tab to open. I will use Playwright waitForEvent method to handle this:

async function clickDownloadButton(){
    const [newTab] = await Promise.all([
        this.page.waitForEvent("popup"),
        this.waitAndClick(this.elements.button_downloadButton)
    ]);
    return newTab;
}

In the above function, we utilize waitForEvent("popup") to wait for the new tab to open. Once the download button is clicked, we capture the new tab object in the newTab variable and return it.

Handling the Download Event

Next, we need to handle the download event in the newly opened tab. The following code snippet does just that:

const newTab = await dashboard.clickDownloadButton();
const [download] = await Promise.all([
    newTab.waitForEvent("download")
]);
const path = download.suggestedFilename();
await download.saveAs(path);

Here, we call the clickDownloadButton() function and get the new tab object in the newTab variable. Then, we use waitForEvent("download") to wait for the download to complete. Once the download event is triggered, we obtain the suggested filename using download.suggestedFilename(). Finally, we save the downloaded file using download.saveAs(path)

Summary

With the provided code snippets, you should now be able to download files successfully using Playwright in your Typescript projects. This approach ensures you handle the download process effectively, even when dealing with new tabs and asynchronous events.

Feel free to try this solution in your projects and let me know how it works for you. Happy coding!