Introduction to Data-Driven Testing using Cypress

Cypress datum driven testingallows testers to separate test datum from examination scripts, ensuring flexibility, scalability, and maintainability. By using fixtures like JSON, CSV, or Excel files, QAs can easily run tests with varied inputs across browsers.

This article cover what Cypress data-driven examination is, how to set up fixtures and folder construction, different shipway to make data-driven tests, and how to fulfill them locally and for real gimmick substantiation.

What is Data-Driven Testing?

In bare term, data-driven testing separates the trial data from the test script. Any data which is required for your tests are stored separately apply.csv, .json, or .excel files.

Best Practices of Data-Driven Testing

Here are some of the best practices for Data-driven Testing:

1. Always separate the test information:In Data-driven testing, you must separate the test data from the examination handwriting.
2. Use the similar file extensions for different set of datum:The data can be store in.csv, .json and .excelfile. Prefer using the like file extensions throughout your framework. For example, when there are multiple data sets, create multiple.json files or .csvfiles but don ’ t mix them. This increases the readability and makes the maintenance of the test script easier.
3. Use existent datum:You choose a data-driven examination approaching as the information is as much as important as functionality; putting the dummy datum makes trial solution false positive, and it might not give the correct outcome.
4. Include information for positive and negative scenarios:Your data-driven test should always continue both negative data sets and positive datum sets.

Pre-Requisites of Data-Driven Framework in Cypress

Step 1Install Cypress by inscribe the below command

npm install cypress -- save-dev

Step 2 Unfastened Cypress by entering the below command

npx cypress open

Step 3 Choose Test type

When you participate the above bidding, the cypress window opens,choose the E2E Testing.Then Click onContinue

Step 4 Choose a browser

Select any browser of your choice Chrome, Electron, Edge, or Firefox to perform the Cypress test

Step 5 Click onCreate an empty specification

Next, the create new spec window opens, take tomake an empty specification, and call the file asdemo-data-driven-test.cy.js

Step 6 Click on Create Spec

Following the above steps, Cypress creates all the required pamphlet structure and basic configuration file.

Cypres Files and Folder Structure for Data-Driven Testing

Given below are the different folders and files in the Cypress that are used in the data-driven examination:

• cypress/e2e folder:This brochure check all your test scripts
• cypress/fixture:This folder comprise your data-driven test files, such as.json, .csv, etc. in Cypress; these are called fixture files
• cypress/support:This pamphlet contains all the support files, which are take for setting up commands or common files which are involve for test mechanization framework.
• cypress/support/e2e.js:All the global shape bidding will be placed hither.
• cypress/support/command.js:This file helps you make a custom command in Cypress. Custom commands created using this file will be available globally inside your framework.
• cypress.config.js:This file bear the execution options or configuration which is required to execute your scripts.
• package.json:This file tracks all the installed node packages and allows you to create custom run commands cutoff.

How to create Data-Driven Tests in Cypress

As you can see in the folder and file structure, you have the fixture register in Cypress. These fixture files are mainly apply for data-driven testing. You can define the custom data sets inside fixture file. By default, when you create the Cypress Test Automation framework, the fileexample.jsongets created.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

Run Cypress Tests for Free

Let & # 8217; s take a simple use case that performs the undermentioned actions

• Navigate to BrowserStack page
• Enter all the ask details apply data-driven test files
• Click on the Sign-up button

Step 1: Create a test data

If you navigate to the page, the required data isFull Name, Email id, and Password.Create a data set for the same.

Navigate tocypress/fixtures/example.jsonfile and add the data using the bidding below

{'' fullname '': `` David D William '', '' email '': `` david-d-william @ somedomain.com '', '' word '': `` Davidfortest @ 123 ''}

Step 2: Create a test script for Sign up

Once you hold data ready, create a test script. Navigate tocypress/e2ebooklet, in the pre-requisite section, you have created the filedemo-data-driven-test.cy.js,edit the test, and add the below code.

//demo-data-driven-test.cy.js import signUpData from ' .. /fixtures/example.json' describe ('Data driven testing Demo ', () = & gt; {it ('Should create user ', () = & gt; {cy.visit ('https: //www.browserstack.com/users/sign_up ') cy.get (' # user_full_name ') .type (signUpData.fullname) cy.get (' # user_email_login ') .type (signUpData.email) cy.get (' # user_password ') .type (signUpData.password) cy.get (' # tnc_checkbox ') .click () cy.get (' # user_submit ') .click ()})})

The above method is the simplest way to load the Cypress fixture file and use the data.

In the above example, thesignUpDatais imported from theexample.json file.

The signUpDatanow keep all the key-value duad, which are inside theexample.jsonfile in this case it isfullname, email,and passworddetail. Once you import the data, you can use it likesignUpData.fullname, signUpData.email, etc.

Alternative Method to load the Fixture

//demo-data-driven-test.cy.js describe ('Data driven testing Demo ', () = & gt; {let signUpData before (() = & gt; {cy.fixture ('example ') .then ((data) = & gt; {signUpData = information;})}) it ('Should create exploiter ', () = & gt; {cy.visit ('https: //www.browserstack.com/users/sign_up ') cy.get (' # user_full_name ') .type (signUpData.fullname) cy.get (' # user_email_login ') .type (signUpData.email) cy.get (' # user_password ') .type (signUpData.password) cy.get (' # tnc_checkbox ') .click () cy.get (' # user_submit ') .click ()})});

In the above codification, the importee statement is not used; alternatively, the Cypress command that iscy.fixture (),is utilize. Thecy.fixture ()bid takes a file name as an argument and loads the file content to a specify variable.

cy.fixture ('example ') .then ((data) = & gt; {signUpData = datum;

The above line of code is creditworthy for loading the.json data. The example.jsonis the JSON file name that is inside the fixtures folder and then assigns the information to the variablesignUpData. Once the JSON data is lade, you can use it across your test scripts,signUpData.email, signUpData.password etc.

Step 3: Execute Cypress Data-Driven Test

You can action your cypress data-driven test use theCypress Test Runner Window or CLI option.

• Executing Cypress Data-driven trial using Cypress Test Runner window

Use the below bid to open Cypress Test Runner

npx cypress exposed -- e2e

• Choose the desired browser

Once you execute the above command, the Cypress window prompt you to select the browser, you can choose any such as Edge, Chrome, Firefox, or Electron.

• Run the test case

Once you choose the browser, then you demand to click on the test script file in this case the test file isdemo-data-driven-test.cy.js

The test depart executing, and the solvent will be displayed.

Running Cypress Data-Driven Tests using Command Line

Cypress ply an choice to run tests utilise the bidding line. Using the below command, you can merely run the tryout using the command line.

npx cypress run -- e2e

Step 4: View the results

Once the execution is complete, you will get the command line output whether the test is pass or failed. The test result looks like this,

How to execute Cypress Data-driven tests on BrowserStack

BrowserStack proffer access to 3000+ existent device-browser combinations to quiz. No matter how many test cause you write, until and unless those are executed on multiple browsers and platform combinations, essay is not accomplished. By testing on a, you get to run your, which improves overall test truth by spotlight the bottlenecks in the user experience.

Step 1: Install the BrowserStack CLI

npm install -g browserstack-cypress-cli

Step 2: Create and Configurebrowserstack.jsonfile

browserstack-cypress init

After performance of the above command,browserstack.jsonfile gets created in your task root folder.

Step 3: Add the auth nominal

Login to BrowserStack and Navigate to the Settings Page to get theusername, access_key. Copy and paste theusername and access_keyto the auth section of yourbrowserstack.json file

Step 4: Execute your tests

Execute your tests using the below command

browserstack-cypress run

Step 5: View your examination results

After you run your test, see the to regard your test results as follows,

Conclusion

The data-driven examination framework approach is recommended when your covering is data-oriented, and the data changes more oftentimes. If your application requires a lot of stimulant information and it is dynamic, so data-driven examination is the best approach as information is separated from the test script; you only require to vary the data files whenever you want to update the datum. Cypress get data-driven testing easier by giving dedicated fixture support.

Related Guides