In this article, we will discuss how we can download a file in cypress using the cypress-downloadfile node package. Letβs automate the below Test scenario:
1.Download a file from https://www.learningcontainer.com/wp-content/uploads/2020/04/sample-text-file.txt to our desired location.
2. Validate the contents of the file.
Step 1: Install the cypress-downloadfile node package using the command:
1 | npm install --save -dev cypress-downloadfile |
Once you have installed the package successfully, you can see the package name in your package.json file
Step 2: Add the following line to cypress/support/commands.js
1 | require('cypress-downloadfile/lib/downloadFileCommand') |
Add the following lines to cypress/plugins/index.js
1 2 3 4 | const {downloadFile} = require('cypress-downloadfile/lib/addPlugin') module.exports = (on, config) => { on('task', {downloadFile}) } |
Step 3:
1 2 3 4 5 6 7 8 | describe('Example to demonstrate file download in cypress', function () { it('File Download using cypress-downloadfile npm package', () => { cy.downloadFile('https://www.learningcontainer.com/wp-content/uploads/2020/04/sample-text-file.txt', 'cypress/fixtures/Download', 'test.txt') cy.readFile('cypress/fixtures/Download/test.txt').should('contain', 'Lorem ipsum dolor sit amet') }) }) |
cy.downloadFile(‘https://www.learningcontainer.com/wp-content/uploads/2020/04/sample-text-file.txt’, ‘cypress/fixtures/Download’, ‘test.txt’) will download the file from the download link to cypress/fixtures/Download folder. Cypress will automatically create Download folder under fixtures, if it is not there previously. cy.readFile(‘cypress/fixtures/Download/test.txt’).should(‘contain’, ‘Lorem ipsum dolor sit amet’) will check that the downloaded text file contains the text Lorem ipsum dolor sit amet.
Step 4: After Successful execution:
Do check out π
Github:Β https://github.com/alapanme/Cypress-Automation
All Cypress Articles: https://testersdock.com/cypress-tutorial/
Hi,
In case if i need to download a file on button click then how does that work? Could you please explain that as well?
Can you elaborate a bit, what you’re trying to do?
I will try to explain what Rems wanted to say, cause I met the same issue.
I have a lot of files on the page and in front of each Download button is displayed, and when the user clicks Download button file starts downloading on a local computer. so how can we check it through Cypress?
Thanks a lot for the explanation!
Do you mean you want to check whether the file is downloaded on the intended folder?
Yes, you got it right, is it possible, I will be so appreciated if you explain how we can do it, sure previous guy toom and many other people π
Yes, you got me right, is it possible? cause when I am clicking the download button – file downloading in the cypress browser window, and I want to download it to my folder and check it
You can actually validate whether the text files are downloaded to our desired location using cy.readFile(‘cypress/fixtures/Download/test.txt’).should(‘contain’, ‘Lorem ipsum dolor sit amet’). For other file types you can refer this – https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__download
Hi Alapan, Validating the presence of downloaded file is fine. but After clicking on download button, the download are not going to the Downloads folder in cypress. They are going to the downloads folder of the user.How can I change the download path in this case (where we click on download button and the download starts) .
Cool you wrote a blog on my plugin really cool to see that people are using it π
Thanks for writing this plugin xavier π
Hi Alapan,
Thank you for this!
It is really helpful π
My question is around “cy.downloadFile(‘https://www.learningcontainer.com/wp-content/uploads/2020/04/sample-text-file.txt’,
‘cypress/fixtures/Download’, ‘test.txt’)”
So in case if I have to download by clicking on a button instead of the text, how would I be able to do it?
Kind regards,
Karthik
You just click on the download button, and once the file is downloaded, you can validate the file using readFile.You can check out the cypress download file recipe here: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__download for the scenario in which you have to click, download file and validate.@Alapan but when we do this way (You just click on the download button, and once the file is downloaded, you can validate the file using readFile.) it gets download in local disc, not on fixture/download. I want in fixture/download. And also if we click on the button then there is no use of cy.downloadFile.
Hey Palman, I am not sure I understand your question, but still trying to answer. The location fixture/download is on your local disc only. You have to pass the location as a parameter to cy.downloadFile and the file will be downloaded to that location. Or you can also checkout the cypress download file recipes as well here https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__download
Hi Alapan, when downloading a file in cypress I want my file to save on a local disc when clicking on the download button. what can I do??
Hey is there a way to delete the downloaded files in cypress ?
Hey is there a way to delete files
Yes, there is a way. You have to write the ‘trashAssetsBeforeRuns: true’ in your Cypress.json file. This will trash the contents of downloads folder, screenshots folder, and videos folder before tests run with cypress run.
the site I am testing is taking data from the site and creating a json or csv file. It also has two prompts and then it will launch the OS file save prompt. There is no url associated with a file because it does not exist until you click save to create it. How would I handle something like this?
Hi I am trying to do the same as you explained with typescript but i get an error when i write cy.downloadfile as `Property ‘downloadFile’ does not exist on type ‘cy & EventEmitter’` can you please help me to fix this – thanks
Hi i am trying the same with typescript and i see error while cy.downloadfile as `Property ‘downloadFile’ does not exist on type ‘cy & EventEmitter’.` can you please help how to overcome this with typescript
HI, I am trying the same steps and running the same sample test given above, but i do get an error stating “cy.downloadFile is not a function”. I am trying to run it in my Mac. Does this make any difference between different OS ? Can you please help me to get over this ?