Test File Download in Cypress

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

Overview

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:

1. 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",
        },
        ...
    },
   

2. 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');
   

3. 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});
   }  
   

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

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

  //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')
    })
  })

//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');
  })