Using scenario outline in cucumber with Cypress

 

In the previous post we looked at how we can install cucumber within Cypress and use the feature files. In this post I will show an example of how we can use scenario outline. Scenario outline is used if we want to use the same scenario multiple times. This helps to reduce code duplication. 

Let's take an example of a login where we want to check login with multiple user types. To achieve this, the most efficient way is to write the feature file as below. As shown below, instead of scenario we use keyword scenario outline and then we use the Examples keyword and pass the values we want to pass to step definition file so the test will run for 3 times for each given username and password. 

Feature: Login to Infirma

     Scenario Outline: Login to Infirma

      Given User is on the login page

      When The user enters username as '<username>' and password as '<password>'

      And User Clicks on Login Button

      Then The user should be able to login as '<username>'

      Examples:

          |username |password|

          |userone|pwd@123|

          |usertwo|pwd@123|

          |userthree|pwd@123|

   

As shown below we implement each of the steps of our feature file and get the username and passwords and login the the application by calling our custom login method which we have declared within the command.js file. Once logged in, we check if the logged in users username is displayed within the landing page.

import { And, Given , Then , When} from "cypress-cucumber-preprocessor/steps";

import UserLogin from '../../PageObject/UserLogin'

Given('User is on the login page', () => {

    cy.viewport(1000, 660)

    cy.fixture('UserLogin').then(function (data){

        this.UserLogin =data;

        cy.visit(this.UserLogin.url)  

    })

})

When('The user enters username as {string} and password as {string}', (UserName,

Password) =>{

    cy.login(UserName,Password)

})

And('User Clicks on Login Button',()=>{

    cy.get('#loginButton').click({force:true});  

})

Then('The user should be able to login as {string}',(UserName) =>{

    const userLogin =new UserLogin()

    userLogin.getMenu().click({multiple:true})

    userLogin.getFirstName().then($UserName =>{

        const name=$UserName.text()

        expect(name).contains(name ,{ matchCase: false })

    })

})