Introduction
In cypress, we can make use of the “cypress-if” plugin, “then” command, and “each” method to perform conditional tests as per the required conditions. Conditional testing is helpful when there are restrictions with respect to the values of a particular element and also if we want to extract values of an element only if it possesses the desired outcome. We can perform actions on the elements based on certain conditions such as checking a checkbox if unchecked, clearing items from an input box if it contains any text, or clearing items from a list by clicking the delete button on each of them, etc. The main purpose of conditional testing is to perform tests on an element that may have various possible outcomes out of which we need to perform an action on a specific outcome.
In this blog, we will discuss-
- Project setup for performing the conditional test in Cypress
- How to perform Conditional tests using “then” command
- How to perform Conditional tests using the “Cypress-if” plugin
- How to perform Conditional tests using “each” method
Project setup for performing conditional test in Cypress
Firstly, we must install all prerequisites in our project. (For more info about prerequisites you can visit- API Automation Testing Using Cypress with JavaScript )
After verifying the prerequisites, create a new project folder in order to set up a new cypress project.
–Create the folder in any location of your system and open it in Visual Studio Code by selecting File>Open Folder>Choose file from system>click Ok
Next, we need to run the ‘npm init –y’ command in the terminal to create a ‘package.json’ file in our project which will be used as a dependency management file and is used in initializing the npm project by allowing us to run the npm commands directly on the project.
The ‘package.json’ file includes the name of the project, the version, the description for the project, keywords, author, license, and script section which will be used to run the test scripts from the terminal.
After the creation of the ‘package.json’ file, install cypress by passing the ‘npm install cypress’ command to install the latest version of cypress or ‘npm install cypress@version number’ to install the required version of cypress, e.g., ‘npm install cypress@10.10’
After installing Cypress we can check the cypress version by using ‘npx cypress -v’ command.
In order to open Cypress, we need to run ‘npx cypress open’ command which will provide the GUI of Cypress after which we need to Select E2E Testing> click on Continue> choose a browser> click on Start E2E Testing in the selected browser.
After clicking on the start E2E testing we get a cypress runner where we can create our spec files with ‘.cy.js’ extension and this file will also be created in VS code in which we can write our test case.
How to perform conditional testing
Following are the examples for a better understanding of how we can perform conditional testing in our test:
Test 1: Conditional test using “then” command
Test Case:
- Step 1: visit https://automationteststore.com/
- Step 2: Click on login link
- Step 3: Click on the Register Account option if it is unchecked
/// <reference types="cypress" />
describe('My first test', function()
{
it('account registration test', () => {
cy.visit('https://automationteststore.com/')
cy.get('#customer_menu_top').click()
cy.get('#accountFrm_accountregister').then(($input) => {
if ($input.is(':checked')) {
cy.log('The option for account registration is chosen by default')
} else {
cy.wrap($input).click()
}
})
})
}) 
Code explanation:
In the above test file, we have created a single test case that will click on the registration option provided on the web page only if it is not selected by default else it will just print a statement stating that the option for account registration is chosen by default without performing click action on the registration option.
Execution:
In order to execute the test file, we need to open the cypress test runner using ‘npx cypress open’ command and click on the test file on the test runner, after which the execution will be started and the results for the test will be displayed as shown in the image below:
Test 2: Conditional test using “Cypress-if” plugin
Test Case:
- Step 1: visit https://automationteststore.com/
- Step 2: Click on the login link
- Step 3: Click on the Register Account option if it is unchecked
In order to perform conditional testing using cypress-if we need to add its plugin by running the command below in the terminal:
After installing the cypress-if plugin we can use it in our code to perform conditional tests, as given below:
import 'cypress-if'
describe('My first test', function()
{
it('account registration test', () => {
cy.visit('https://automationteststore.com/')
cy.get('#customer_menu_top').click()
cy.get('#accountFrm_accountregister')
.if('checked')
.log('The option for account registration is chosen by default')
.else()
.click()
})
}) 
Code explanation:
The above test file is similar to the first test example in which we have created a single test case that will click on the registration option provided on the web page only if it is not selected by default else it will just print a statement stating that the option for account registration is chosen by default without performing click action on the registration option. The only difference in this test file is we have used the “Cypress-if” plugin instead of using “.then” callbacks.
Execution:
After executing the above test file, we get the results as shown in the image below:
Test 3: Conditional test using each method
Test Case:
- Step 1: visit https://the-internet.herokuapp.com/tables
- Step 2: Select the second column from the data table
- Step 3: Run a loop and extract the text of each element in the second column and compare it with the desired text
- Step 4: Go to the fourth column of the same row of desired text and extract the value for comparison with the desired value
/// <reference types="cypress" />
describe('My Second test', function()
{
it('Verify web table', () => {
cy.visit('https://the-internet.herokuapp.com/tables')
cy.get('table >tbody >tr td:nth-child(2)').each(($el, index, $list) =>{
var text=$el.text()
if(text.includes('John')){
cy.get('table >tbody >tr td:nth-child(4)').eq(index).then(function(due){
var balanceAmount=due.text()
expect(balanceAmount).to.equal('$50.00')
})
}
})
})
}) 
Code explanation:
In the above test file, we have created a single test to check that the text John from the second column contains the due amount of $50.00 in the fourth column. In order to perform the conditional test, we first took the locator of the second column I.e., ‘table >tbody >tr td:nth-child(2)’ so that jquery each method can be applied to it to find the element with the desired text by running a loop which takes three parameters I.e., ‘$el, index, $list’. The ‘$el’ variable will hold each element from the second column followed by the ‘index’ number until it gets the desired text and the ‘$list’ will act as an array to maintain the loop.
Next, we have created a variable ‘text’ to extract the text of each element by ‘$el.text()’ and provided an if condition I.e., ‘if(text.includes(‘John’))’ which states that if the extracted text contains the desired text John, then we provided ‘cy.get(‘table >tbody >tr td:nth-child(4)’).eq(index).then(function(due) ‘ I.e., go to the fourth column using the fourth column locator and with the help of the index number for the same row where the desired text was found, extract the value of the element of the fourth column and then use a function by passing in a variable ‘due’, after which we created a variable ‘var balanceAmount’ that will extract the text of the value found in the fourth column using ‘due.text()’ and then compared it with the expected value using ‘expect(balanceAmount).to.equal(‘$50.00’)’ which will assert that the due amount for expected text is $50.00.
Execution:
After executing the above test file, we get the results as shown in the image below:
Conclusion
In this blog, we have seen examples of conditional testing in three different ways- In the first example, we performed a conditional test on a checkbox that checks if the box is checked or not and performs an action on it as per the required condition by “Then” command, In the second example, we made use of the “Cypress-if” plugin and performed a conditional test with a similar condition as the first example. In the third example, we performed a conditional test by using the “each” method to get the desired text with desired value by looping through the table column and extracting the values for comparison from it.
