Download File Cypress

Once you click on a link or button, files will be automatically downloaded into the cypress cypress/download folder without any configuration. For the files which can be downloaded using the URL, you can use the Cypress download file plugin.

Table of Content

1. Demo Website
2. Download File in Cypress
3. Download File Plugin
4. Video Tutorial

1. Demo Website

Demo Link: http://autopract.com/selenium/download.html

2. Download File in Cypress

Clicking on the Click Here to download link or Download File button will download the sample.csv file and sample2.csv file, respectively.

it.only('Download File', () => {
    cy.visit('http://autopract.com/selenium/download.html')

    cy.get('a.mydownload').click()
    cy.get('#download').click()
})

3. Download File Plugin

You can use this plugin to download a file from the URL and save it to your desired directory and name. You can get the URL of the image by clicking on the View Image button on the demo website.

Step 1: Install the plugin

npm install cypress-downloadfile

Step 2: Add below line to to cypress/support/commands.js

require('cypress-downloadfile/lib/downloadFileCommand')

Step 3: Add downloadFile related configuration in your cypress.config.js

const {downloadFile} = require('cypress-downloadfile/lib/addPlugin')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
         on('task', {downloadFile})
      }
    }
})

Step 4: Use downloadFile method

cy.downloadFile('http://autopract.com/selenium/image.jpeg?','cypress/downloads','file.jpg') 

It will take three arguments URL, Downloaded Folder Path, and the name you want to save the file with.