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 , 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. Cypress.io 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 section and following some of the getting started guides. References 📦 Installation 1) Assuming you have a repo named , create a new folder in it named . dashboard-ui e2e 2) into that folder and execute the following commands inside it cd npm init
npm install cypress --save-dev 3) Update the project’s scripts by opening and updating your scripts to the following: package.json : { : , : } "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 folder. integration ⚙️ Functionality For the sake of simplicity, let's say our application only has one feature where users can click on a button, which can download an excel file comprising of some data in it. download template 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 folder with the name . integration 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( )
  .should( )
  .click(); "[data-test-id=export-template-btn" "be.visible" 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 file we will create a new task plugins/index.js xlsx = ( ).default; fs = ( ); path = ( ); .exports = { on( , {
    parseXlsx({ filePath }) { ( { { jsonData = xlsx.parse(fs.readFileSync(filePath));
          resolve(jsonData);
        } (e) {
          reject(e);
        }
      });
    }
  });
}; const require "node-xlsx" const require "fs" const require "path" module ( ) => on, config // `on` is used to hook into various events Cypress emits "task" return new Promise ( ) => resolve, reject try const catch This function will parse our excel file and convert it to json. 6) Finally let’s complete our test for excel file download data = [ , , , , , , ]; cy.get( )
    .should( )
    .click(); cy.wait( ); cy.parseXlsx( ).then( { expect(jsonData[ ].data[ ]).to.eqls(data);
  }
); // data to check against const "id" "config_sku" "simple_sku" "fallback_type" "field" "value" "command" // check for existence of the button on the ui and then click it "[data-test-id=export-template-btn" "be.visible" // arbitrary wait so that the download can complete 2000 // call the parseXlsx task we created above to parse the excel and return data as json "/Users/Downloads/overrides-template.xlsx" => jsonData // finally we write the assertion rule to check if that data matches the data we expected the excel file to have. 0 0 7) With this we can be sure that our excel download functionality is working as expected. Test Execution 8) The only caveat here is how do you know the download path for your CI/CD Pipeline or how can you change that path to something else. The solution to that is built into cypress. Again inside file we will create another task. plugins/index.js on( , (browser = {}, launchOptions) => { downloadDirectory = path.join(__dirname, , ) (browser.family === ) {
   launchOptions.preferences.default[ ] = { : downloadDirectory }
  } launchOptions;
}); "before:browser:launch" const '..' 'excelDownloads' if 'chromium' 'download' default_directory return Here we are changing the default directory of download to a directory named inside of cypress folder. excelDownloads https://docs.cypress.io/api/plugins/browser-launch-api.html#Change-download-directory 💡 Conclusion In conclusion, E2E tests are really important for every app and you should write one too because this is the closest you can get to test how an actual user will use your application. And as says: @tlakomy Sleep better at night with e2e tests and cypress.io 👯 Share this article if you found it helpful! You can follow me on twitter for more updates. @VivekNayyar09 Also please don't forget to maintain social distance to prevent the virus from spreading and wash your hands regularly. Stay safe and stay at home. 🚀 References https://softchris.github.io/pages/cypress.html https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements https://dev.to/tlakomy/sleeping-better-at-night-with-cypress-io-59m2 https://blog.logrocket.com/how-to-write-useful-end-to-end-tests-with-cypress/ Previously published at https://dev.to/viveknayyar/e2e-testing-of-excel-downloads-with-cypress-21fb

Twitter

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - REACT.

E2E Testing of Excel Downloads with Cypress

Too Long; Didn't Read

Company Mentioned

@vivek-nayyar

RELATED STORIES