Effortless Data Handling in Cypress Tests: A Guide to Generating and Reading CSV Files

Reading CSV data is necessary when many data entries need to be used in test scenarios. Managing test data for each dataset can be time-consuming and error-prone, especially when dealing with large datasets.

In a Cypress test, we can generate and work with CSV data to test various scenarios involving data import or export. We can use JavaScript and Cypress commands to generate CSV data in a Cypress test.

Here’s a step-by-step guide on how to read and generate data from a CSV file in a Cypress test:

Step 1: Install Neat-CSV

Go to Terminal and Install Neat-CSV Package using the below command:

npm install neat-csv@v5.2.0

After successfully installing the package, you can find the package name in your package.json file.

Step 2: Create the CSV File

First, Create a CSV file with test data for the registration form. It should have a header row with column names and subsequent rows with the corresponding data.

Registration form-

CSV file with test data-

Add the .csv file inside the fixtures folder just like shown below:

Step 3: Import CSV in the test file and write the Test Case

Below is the sample code for automating the registration form.

import neatCSV = require('neat-csv');
let regData;

describe('Registration Form', function () {

    before(() => {
        cy.fixture('registration.csv')
            .then(neatCSV)
            .then((data) => {
                regData = data;
            });
    });

    beforeEach(function () {
        cy.visit('https://www.jotform.com/build/240111273406442?s=templates'); // visit a web page
    });

    it('Fill the Registration Form for multiple users', function () {
        for (let i = 0; i < regData.length; i++) {
            cy.get('#first_3').type(regData[i]['firstName']);
            cy.get('#last_3').type(regData[i]['lastName']);
            cy.get('#input_4_addr_line1').type(regData[i]['address']);
            cy.get('#input_4_addr_line2').type(regData[i]['address2']);
            cy.get('#input_4_city').type(regData[i]['city']);
            cy.get('#input_4_state').type(regData[i]['state']);
            cy.get('#input_4_postal').type(regData[i]['postalCode']);
            cy.get('#input_5_full').type(regData[i]['phone']);
            cy.get('#input_6').type(regData[i]['email']);
            cy.get('#input_25').click();
        }
    });
});

Code Walkthrough

1. Importing Required Module:-

import neatCSV = require('neat-csv');

This line imports the “neat-CSV” library, which is used to parse CSV data in a neat and clean format.

2. Variable Declaration:-

let regData

The “regData” variable is declared to store the parsed CSV data.

3. Test Suite Declaration:-

describe('Registration Form', function () {

This sets up a test suite named ‘Registration Form’.

4. Use the ‘before’ Hook to Read CSV Data:-

before(() => {
    cy.fixture('registration.csv')
        .then(neatCSV)
        .then((data) => {
            regData = data;
        });
});

This ‘before’ hook runs before any test cases in the suite. It loads data from a CSV file named 'registration.csv' using Cypress “fixture” command and then parses it using “neat-CSV”. The parsed data is stored in the “regData” variable for later use in the test.

5. BeforeEach Hook — Visit Web Page:-

beforeEach(function () {
    cy.visit('https://www.jotform.com/build/240111273406442?s=templates');
});

This “beforeEach” hook runs before each test case and ensures that the web page at the specified URL is visited.

6. Test Case — Fill Registration Form for Multiple Users:-

it('Fill the Registration Form for multiple users', function () {
        for (let i = 0; i < regData.length; i++) {
            cy.get('#first_3').type(regData[i]['firstName']);
            cy.get('#last_3').type(regData[i]['lastName']);
            cy.get('#input_4_addr_line1').type(regData[i]['address']);
            cy.get('#input_4_addr_line2').type(regData[i]['address2']);
            cy.get('#input_4_city').type(regData[i]['city']);
            cy.get('#input_4_state').type(regData[i]['state']);
            cy.get('#input_4_postal').type(regData[i]['postalCode']);
            cy.get('#input_5_full').type(regData[i]['phone']);
            cy.get('#input_6').type(regData[i]['email']);
            cy.get('#input_25').click();
        }
    });

This test case uses a loop to iterate over the parsed CSV data (regData) and fills out a registration form on a web page for each user. It uses Cypress commands cy.get to select form elements and type to input data.