Blog

Cypress – Don’t Let the Dialog Stop You

01 Jul, 2020
Xebia Background Header Wave

Nowadays, Cypress is rapidly becoming the standard for UI test automation. With cross-browser support being available as per early June 2020, we at Xebia see the traction growing and growing. We’ve recently contributed to this growth by open sourcing a plugin that ensures that Cypress tests can deal with file download dialogs from the browser. In this blog, we explain the background and how we approached it.

Prelude

Some time ago, one of our clients approached us and asked for help in further optimizing their Cypress-based test automation setup. This client was building a new web application aimed at supporting their business’ process flows. As a part of this flow, it should be possible, at designated moments, to download a PDF file with a detailed overview of the process status.

This is where the tricky part began. At that time, we had several Cypress tests running that continuously verified parts of these process flows. However, when a flow included the download of the PDF file, the corresponding Cypress test stalled. The browser’s “Save As…” dialog was causing this. Cypress (at that time) did not offer the functionality to deal with this correctly and to continue the automated test.

Under the hood

Within the development team, we received the request to address this. We dove into this and concluded that Cypress was unable to interact with the native download window. We decided to follow the existing structure to set up a Cypress plugin — with a Cypress command that then triggers a Cypress task that does the magic. Since the code behind the plugin should allow for file system interaction (download and storage of the file), the code behind the plugin was developed using nodeJS. The plugin downloads the file and stores the file to a location that is specified during the test. Subsequently, the downloaded file can be archived in a CI solution of choice. At our client, we used Jenkins. So, we decided to save the downloaded PDF file with the Cypress test results. With this solution, we ended up with a single overview of all downloaded and/or generated files. This helped the test manager when asked to report the outcome to the stakeholders at the end of the sprint; he could easily conclude that everything was ‘good to go’ based on the Jenkins results.

Currently, we do not cater for PDF comparison. We feel that other tools are more suitable to take care of this and, after all, this could also be part of component tests or even unit tests.

After setting up the plugin initially to handle PDF downloads, we later made the code more generic to allow it for any kind of file download to work. We also decided to open source the plugin in June 2019. After pinging the folks at Cypress.io, they were so kind to also include our plugin in their list of plugins on their web site (https://docs.cypress.io/api/cypress-api/custom-commands.html#Download-a-file).

We have seen an increase in traction of this plugin. Initially started at the end of July 2019 (first download on July 24th, 2019), the plugin has seen a steady increase in the number of downloads since then. Feel free to take a look at the plugin yourself: Cypress Downloadfile.

Overview of downloads
Overview of weekly downloads since July 24th, 2019

Next steps and outlook

Cypress is constantly changing its product so maintaining the plugin to work on all future versions is a challenge. We will keep close eye on bugs or feature requests and try to resolve them as quickly as possible. 

This plugin has proven itself to be useful for anyone engaging with file downloads in their end to end tests. Hopefully, this can be of help in your Cypress-based test automation journey as well!


We empower companies to deliver reliable & high-quality software. Any questions? We are here to help! www.qxperts.io

Questions?

Get in touch with us to learn more about the subject and related solutions

Explore related posts