E2E Testing of Excel Downloads with Cypress

E2E Testing of Excel Downloads with Cypress

hackernoon.com hackernoon.com3 months ago in #Dev Love19

@vivek-nayyar 👋 Senior Software Engineer with 5 years’ of experience building products for numerous domains. Recently while working on a project, I had to create a functionality where users can download an excel file consisting of some data. In this process, since I am a big fan of E2E Testing with Cypress.io, I decided to write a test suite that could make sure that the excel is being downloaded correctly and also consists of the correct data that our users would expect. This article assumes a basic understanding of cypress. Disclaimer If you haven’t tried e2e testing with cypress before, I would highly recommend skipping over to the References section and following some of the getting started guides. 📦 Installation 1) Assuming you have a repo named dashboard-ui , create a new folder in it named e2e . 2) cd into that folder and execute the following commands inside it npm init npm install cypress –save-dev 3) Update the project’s scripts by opening package.json and updating your scripts to the following: “scripts”: { “cy:run”: “cypress run –headless -b chrome”, “cy:open”: “cypress open” } 4) You should also see some default folders and files created by cypress for you after you have installed cypress. 5) The test that we will write will go inside integration folder. ⚙️ Functionality For the sake of simplicity, let’s say our application only has one feature where users can click on a download template button, which can download an excel file comprising of some data in it. On click of the download template button a file gets downloaded which looks something like this: Demo 🧪 E2E Testing 1) Create a new file inside integration folder with the name ExcelDownload.spec.js . 2) Inside this file our test would first start with checking for existence of our button and then we will click on it. cy.get(“[data-test-id=export-template-btn”) .should(“be.visible”) .click(); 3) After clicking on it, the file should ideally have been downloaded and now we need to somehow read that file and check if it exists and also check if it consists of the right data in it. 4) To do that, we will first need to install another npm package which can parse the excel and convert it to a json npm install node-xlsx –save-dev 5) After this inside your plugins/index.js file we will create a new task const xlsx = require(“node-xlsx”).default; const fs = require(“fs”); const path = require(“path”); module.exports = (on, config) ={ // `on` is used to hook into various events Cypress emits on(“task”, { parseXlsx({ filePath }) { return new Promise((resolve, reject) ={ try { const jsonData = xlsx.parse(fs.readFileSync(filePath)); resolve(jsonData); } catch (e) { reject(e); } }); } }); }; This function will parse our excel file and convert it to json. 6) Finally let’s complete our test for excel file download // data to check against const data = [ “id”, “config_sku”, “simple_sku”, “fallback_type”, “field”, “value”, “command” ]; // check for existence of the button on the ui and then click it cy.get(“[data-test-id=export-template-btn”) .should(“be.visible”) .click(); // arbitrary wait so that the download can complete cy.wait(2000);  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply