Reading a CSV file in Cypress using fixture

In this tutorial, we will learn how to read a CSV (Comma Separated Values) file in Cypress for data-driven testing with the help of fixture. Data-driven testing is a testing technique where the test inputs and expected results are read from a data source, such as a CSV file. This allows us to run the same test multiple times with different data sets, reducing the amount of code we need to write and maintain.

Prerequisites:

• Basic knowledge of Cypress and JavaScript
• Node.js and npm installed on your machine
• A CSV file to use as a data source

Step 1: Install the neat-csv package

The first step is to install the neat-csv package, which is a simple utility for parsing CSV files into JavaScript objects. Open a terminal and navigate to the root directory of your project. Then, run the following command:

npm install neat-csv

Step 2: Read the CSV file using fixture

Next, we will use a before hook to read the CSV file and convert it into an object. before hooks in Cypress are functions that run before each test in a test suite. In this case, we will use the fixture method to read the CSV file, and then pass the contents to the neatCSV function to parse it into an object.

Here is the code:

<code>const neatCSV = require('neat-csv');

describe('Read CSV', () => {
  let table;

  before(() => {
    cy
      .fixture('contact.csv')
      .then(neatCSV)
      .then(data => {
        table = data;
      })
  });
</code>

Step 3: Use the CSV data in a test

Now that we have read the CSV file and converted it into an object, we can use the data in a test. In this example, we will visit a form on a website, and then use the data from the CSV file to fill in the form fields.

First, we will use the visit method to navigate to the form page. Then, we will use the get method to find the form fields, and use the type method to fill them in with the data from the CSV file.

To make the test more interesting, we will use a random row from the table object each time the test is run. To do this, we will use the Math.random function to generate a random number between 0 and the length of the table object, and then use Math.floor to round it down to the nearest integer. This will give us a random index for the table array.

Here is the code:

  it('Fill input fields using CSV data', () => {
    cy.visit('https://practice.automationbro.com/contact/');

    const randomRow = Math.floor(Math.random() * table.length)

    cy.get('.contact-name input').type(table[randomRow]['name'])
    cy.get('.contact-email input').type(table[randomRow]['email'])
    cy.get('.contact-phone input').type(table[randomRow]['phone'])
    cy.get('.contact-message textarea').type(table[randomRow]['message'])
  });

Step 4: Run the test

Now that we have written our test, we can run it using the cypress run command in the terminal. If everything goes well, the test should run and fill in the form fields using data from a random row in the CSV file.

Check out the video below for a detailed explanation

Code Access: Full code can be accessed here.

Conclusion:

In this tutorial, we learned how to read a CSV file in Cypress for data-driven testing. By using the neat-csv package and a fixture, we were able to parse the CSV file into an object and use the data in a test. This technique can save us time and effort by allowing us to reuse the same test with different data sets by using a before hook.

I hope this tutorial was helpful. Happy testing!