Table of contents
How to Download Files with Playwright
Websites might expose files for users to download and then access from their local machine. Common cases are downloading tickets, receipts and itineraries.
Steps
This example runs against our test webshop and proceeds to download a receipt for a previous purchase. It includes the following steps:
- Logging in to the website
- Navigating to the account page
- Downloading a linked file
We will check that the downloaded file is as expected by comparing it to a fixture file in our final assertion.
We can approach this scenario in different ways. One possibility is to perform the first two steps, then extract
the href value and use it to retrieve the file with a GET request (performed with axios, for example).
import { test, expect } from '@playwright/test'
import axios from 'axios'
import * as fs from 'fs'
test('file download', async ({ page }) => {
await page.goto('https://danube-web.shop/')
await page.getByRole('button', { name: 'Log in' }).click()
await page.getByPlaceholder('Email').fill(process.env.USER_EMAIL)
await page.getByPlaceholder('Password').fill(process.env.USER_PASSWORD)
await page.getByRole('button', { name: 'Sign In' }).click()
await page.locator('#account').click()
const link = await page.getByRole('link', { name: 'Invoice' })
const downloadUrl = await link.evaluateHandle(el => el.href)
const response = await axios.get(downloadUrl)
const newFile = Buffer.from(response.data)
const testFile = fs.readFileSync('fixtures/testfile.pdf')
expect(newFile.equals(testFile)).toBe(true)
})
We could also click the link directly and wait for the download event, then proceed with the comparison. Note that in this case, we need to enable downloads in the browser context before proceeding.
import { test, expect } from '@playwright/test'
import * as fs from 'fs'
test('file download alternative', async ({ page }) => {
await page.goto('https://danube-web.shop/')
await page.getByRole('button', { name: 'Log in' }).click()
await page.getByPlaceholder('Email').fill(process.env.USER_EMAIL)
await page.getByPlaceholder('Password').fill(process.env.USER_PASSWORD)
await page.getByRole('button', { name: 'Sign In' }).click()
await page.locator('#account').click()
const downloadPromise = page.waitForEvent('download')
await page.getByRole('link', { name: 'Invoice' }).click()
const download = await downloadPromise
await download.saveAs('/path/to/save/at/' + download.suggestedFilename())
const path = await download.path()
const newFile = await fs.readFileSync(path)
const testFile = await fs.readFileSync('fixtures/testfile.pdf')
expect(newFile.equals(testFile)).toBe(true)
})
Both examples can be run as follows:
USER_EMAIL=user@email.com USER_PASSWORD=supersecure1 npx playwright test file-download.spec.ts
SET USER_EMAIL=user@email.com
SET USER_PASSWORD=supersecure1
npx playwright test file-download.spec.ts
Takeaways
- Use environment variables to inject secrets.
- Compare the expected file with the newly downloaded one.
- There is more than one way to download a file within our script.
Further reading
- Playwright’s documentation on downloading files.