Test File Download in Cypress

Learn how to test file downloads for your Cypress test running on BrowserStack.

In Cypress, you can download a file from a web app using the cypress-downloadfile NPM package. The downloaded file is available in the ./Downloads directory within the BrowserStack machine running your Cypress tests. If such a directory does not exist, Cypress creates it and saves the file in that directory.

Depending on the type of file that you download, you can verify this file using:

cy.readFile: For files such as .doc, .csv, .pdf, etc.
cy.verifyDownload: For for files such as .zip, .png, .jpg, etc.

In this guide, you will learn how to:

Download a file
Verify the downloaded file

Download the file in Cypress

Use the following steps to download a file from within your Cypress test:

Install the node module using the following command:

npm i --save-dev cypress-downloadfile

Alternatively, you can specify the npm_dependencies in browserstack.json as shown in the following example:

browserstack.json

"run_settings": {
     ...
     "npm_dependencies": {
         "cypress-downloadfile": "^1.2.1",
     },
     ...
 },

Update the commands.js file with the downloadFileCommand dependency in the cypress/support directory using the following code:

cypress/support/commands.js
```
require('cypress-downloadfile/lib/downloadFileCommand');
```

Update the index.js file with the downloadFile plugin support in the cypress/plugins directory using the following code:

cypress/plugins/index.js

const {downloadFile} = require('cypress-downloadfile/lib/addPlugin');
module.exports = (on, config) => {
   on('task', {downloadFile});
}  

Use the cy.downloadFile command in your test script to download a file from a specific URL as shown in the following code:
```
context('downloadFile', () => {
 it('download file in mentioned dir', () => {
   cy.downloadFile('https://sample-videos.com/doc/Sample-doc-file-100kb.doc','Downloads','cypress-example.doc')
 })
})
```
The Downloads argument in the above sample script downloads the specified file to the ./Downloads directory within the BrowserStack machine running your Cypress tests. You can also specify a different download directory.

Verify the file

After the file downloads, you can access the file using any of the following Cypress commands. If the file is a document such as .doc, .csv, .pdf, etc., you can access it using the cy.readFile to read and verify it’s contents.
However, to verify any other file type, such as .zip,.png,.jpg, etc., you need to use the cy.verifyDownload command to verify if the file downloaded.

Using readFile
Using verifyDownload

Use the cy.readFile command in your test script to access the download file, and provide an assertion as follows:

      cy.readFile("./Downloads/cypress-example.doc").should('contain', 'Text for comparison')

The following sample code shows how to use the cy.readFile command:

  //sample-test.spec.js
  describe('example to-do app', () => {
    it('download file in mentioned dir', () => {
      cy.downloadFile('http://www.sample-website.com/path/to/sample.doc', 'Downloads', 'test.doc')
      cy.readFile("./Downloads/test.doc").should('contain', 'Text for comparison')
    })
  })

Check out how to use cy.readfile to read a file and read its contents.

The following image shows a successful file download and verification:

Download File Test Pass

Use the cypress-verify-download NPM Package for file types where content cannot be read.

Install the node module using the following command:
```
npm i -D cy-verify-downloads
```
Update the commands.js file with the cy-verify-downloads dependency in the cypress/support directory using the following code:
```
//commands.js
require('cy-verify-downloads').addCustomCommand();
```

Update the index.js file with the cy-verify-downloads plugin support in the cypress/plugins directory using the following code:

//index.js
const { isFileExist, findFiles } = require('cy-verify-downloads');
module.exports = (on, config) => {
   on('task', { isFileExist, findFiles });
}  

The following sample code shows how to use the cy.verifyDownload command in your test script:

//sample-test.spec.js
describe('example to-do app', () => {
  it('download file in mentioned dir', () => {
    cy.downloadFile('https://www.sample-videos.com/img/Sample-jpg-image-50kb.jpg','cypress/downloads','test.jpg')
    cy.verifyDownload('test.jpg');
  })