Writing your first End to End data-driven test with Cypress

Note: This is an introductory article to Cypress fixtures and how it can be used to script data-driven tests. This article will not cover in-depth or complex data-driven testing scenarios. I may publish(in near future) another article focusing primarily on cypress fixtures with complex scenarios and examples of different types of data inputs.

I have used Selenium ever since I started doing UI testing and then I came across Cypress.io at the beginning of 2019 and haven’t stopped using it ever since. Cypress has certainly revolutionized the way we were used to approaching UI testing forever. Check out my article on What is Cypress? and Why is it so famous? to know more.

What is data-driven testing?

Data-driven testing is a test design and execution strategy where test scripts read data from test input data stored in data sources like JSON, CSV, Xls, XML, and databases.

Data-Driven testing enables building tests with a different set of input data into single tests to ensure that application under test works as expected for various input values.

Before we begin let’s refresh on What is Cypress?

Cypress is an open-source testing tool for the modern web which makes writing, running, recording, and reporting tests easier and frictionless.

Complete Code for you to download

• End to End Data-Driven Cypress Test
• React TODO app under test

In this article, you will learn:

• Installing Cypress and Getting Started
• Setting up Software/App under test
• Setting up test data
• Writing and running your first E2E test
• Conclusion

Prerequisites

• Windows, macOS or Linux dev machine
• Latest NodeJS installed (this should install npm as well, you can download NodeJs from here)
• Visual Studio Code (we’ll be using VS code as our code editor, you can download it from here)
• Create a root folder for the project. (we’ll be using folder name cypress-data-driven-e2e-test-project throughout this article)

Installing Cypress and Getting Started

Step 1 - Initialize npm in a folder

npm init

This will initialize npm for the folder and will create a package.json file in the folder. This will allow npm to manage the packages required for the project.

Step 2 - Install Cypress via npm

npm install cypress --save-dev

This will install Cypress local as a dev dependency for your project. By this point, you should have node_module folder in the root folder of your project.

Step 3 - Open Cypress to create a cypress folder structure

./node_modules/.bin/cypress open

After the cypress launcher starts you should see the following:

Click OK, I got it! and the following cypress folder structure will be created in the project root.

Adding npm script to project.json

To make opening Cypress runner and running tests easier let’s add following npm script to project.json file.

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

From this point onwards to open cypress we’ll be using npm run cypress:open command so that we don’t have to the full path of cypress binary in node_modules folder every time we want to run cypress.

Here is what your project.json file should look like:

{
  "name": "datadrivene2ecypressproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "cypress:open": "cypress open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^4.5.0"
  }
}

Setting up Software/App under test

Since the aim of this article is not to teach you writing an app but to teach you how to use Cypress for an end to end testing.

So…

The app we’ll be using to test is…

Yes, you guessed it right

The evergreen TODO App 🎊

Here is how to run it locally

• Download sample react todo app from here
• Open command line or terminal if using VS Code in the root folder of react todo app downloaded in the previous step and run npm run dev command to start the app at http://localhost:3030/

You should see following in your browser -

Setting up test data

Now let’s navigate to fixtures folder in our cypress project which will contain test data that we can use in our test. (in this example our test data will be in JSON format)

Add a file named todos.json and with following json object:

[
    {
      "id": 1,
      "name": "Learn Cypress",
      "isComplete": false
    },
    {
      "id": 2,
      "name": "Write first cypress test",
      "isComplete": false
    },
    {
      "id": 3,
      "name": "Celebrate",
      "isComplete": true
    },
    {
      "id": 4,
      "name": "Write blog",
      "isComplete": false
    }
]

Now that we have test data to seed we let’s create custom cypress commend to seed data into our react todo app.

• Navigate cypress -> support -> commands.js file and add following code:

  Cypress.Commands.add('seedAndVisit', (seedData = 'fixture:todos') => {
        cy.server()
        cy.route('GET', '/api/todos', seedData)
        cy.visit('/')
    })
  

Writing and running your first E2E test

Now lets test to ensure that our custom seedAndVisit command actually seeds data into the app:

• Create a folder called e2etests in cypress -> integration

• Next create a e2e.spec.js test file in cypress -> integration -> e2etests

• Now let’s add a test in e2e.spec.js to ensure that data seeded correctly and validate the number of todos left to complete (based on the seed data we have 3 uncompleted todos)

      describe('Data Driven End to End Test', () => {
      context('Seed Todos', () => {
          it.only('seed todos test data', () => {
          cy.seedAndVisit()
          cy.get('.todo-count')
              .should('contain', '3 todos left')
          })
      })
      })
  

• Set up base url in the cypress.json file to point to our localhost:3030 todo app, once done file content should look like following:

  {
    "baseUrl": "http://localhost:3030"
  }
  

• At this point we are all set to start cypress test runner. To do so run npm run cypress:open command at the root folder of our test project either using command line tool or using terminal in VS Code. On successful execution you should see following:

  

• Select e2e.spec.js to run test and you should see the following:

  

Conclusion

I hope you enjoyed learning how to write create a data-driven end to end Cypress. Cypress has emerged as a simple, robust, and powerful tool for all your end to end testing need, moreover many are now starting to use Cypress for API, Unit, Integration, Visual testings as well.

You can find examples of Cypress commands, utilities, and API at example.cypress.io - I highly recommend you to explore cypress example site.

Thanks for reading! 🎊 Hope you learned something useful. Don’t hesitate to share, or post your thoughts in the comments section.

You can also reach out to me on my LinkedIn 🙏