Table of contents

How to Download Files with Playwright

On this page

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).

const { chromium } = require('playwright')
const axios = require('axios')
const fs = require('fs')
const assert = require('chai').assert

;(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()

  await page.goto('https://danube-web.shop/')

  await page.click('#login')
  await page.type('#n-email', process.env.USER_EMAIL)
  await page.type('#n-password2', process.env.USER_PASSWORD)

  await page.click('#goto-signin-btn')

  await page.click('#account')

  await page.waitForSelector('#orders > ul > li:nth-child(1) > a')

  const downloadUrl = await page.$eval(
    '#orders > ul > li:nth-child(1) > a',
    (el) => el.href
  )

  const response = await axios.get(downloadUrl)
  const newFile = Buffer.from(response.data)

  const testFile = await fs.readFileSync('fixtures/testfile.pdf')

  assert(newFile.equals(testFile))

  await browser.close()
})()

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.

const { chromium } = require('playwright')
const fs = require('fs')
const assert = require('chai').assert

;(async () => {
  const browser = await chromium.launch()
  const context = await browser.newContext({ acceptDownloads: true })
  const page = await context.newPage()

  await page.goto('https://danube-web.shop/')

  await page.click('#login')
  await page.type('#n-email', process.env.USER_EMAIL)
  await page.type('#n-password2', process.env.USER_PASSWORD)

  await page.click('#goto-signin-btn')

  await page.click('#account')

  await page.waitForSelector('#orders > ul > li:nth-child(1) > a')

  const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('#orders > ul > li:nth-child(1) > a')
  ])

  const path = await download.path()

  const newFile = await fs.readFileSync(path)
  const testFile = await fs.readFileSync('fixtures/testfile.pdf')

  assert(newFile.equals(testFile))

  await browser.close()
})()

Both examples can be run as follows:

macOS

USER_EMAIL=user@email.com USER_PASSWORD=supersecure1 node file-download.js

Windows

SET USER_EMAIL=user@email.com
SET USER_PASSWORD=supersecure1
node file-download.js

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.

How to Download Files with Playwright

Steps

Takeaways

Further reading