Cypress is a frontend automation tool that is catching up on the other major players in the industry. Cypress supports test framework development where we can manage our test efficiently. In this blog post I will show how we can use cucumber BDD with cypress.
This blog post assumes that cypress is already installed.
Step 1: Install cucumber for cypress. Your node modules will have the plugins as below
npm install - -save-dev cypress-cucumber-preprocessor
Step 2: Add the below lines to your index.js within plugins folder. This line will export cucumber and make it accessible within the cypress framework.
const cucumber = require('cypress-cucumber-preprocessor').default
module.exports = (on, config) => {
console.log(config);
on('file:preprocessor', cucumber())
}
Step 3: Add the below line to your package.json file. In the below example nonGlobalStepDefinitions is set to false since the Step Definitions is within the integration folder. However, if this value is set to true then Cypress Cucumber Preprocessor Style pattern will be used for Step definitions.
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"stepDefinitions": "cypress/integration"
},
Step 4: Add the below line to the cypress.json. This tells cypress that it should look for test files that end with the extensions of feature or features.
{
"testFiles": "**/*.{feature,features}"
}
Step 5: Within the cypress/integration create a subfolder and place your feature file within that. To maintain standard I have used the same name for the folder and the fixture file name.
Step 6: Create a basic feature file as below:
Feature: Registering a patient in Infirma I want to login as a front officer and
register a patient
Scenario: Perform a quick registration
Given I Login as the front officer by entering username as "admin" and password as "admin"
When I enter the patient information with below specifications and click Submit button
Then system returns a success message
Step 7: Create your test as below. Note as in normal Cypress test, when using cucumber
we don't use the describe and it.
import PatientReg from '../../PageObjects/FOPatientRegistration'
import { Given , Then , When} from "cypress-cucumber-preprocessor/steps";
Given('I Login as the front officer by entering username as {string} and password as {string}', (UserName,Password) => {
cy.visit("http://localhost:3000/infirma")
cy.login(UserName,Password)
})
When ('I enter the patient information with below specifications and click Submit
button', data => {
const register = new PatientReg()
register.getRegisterMenu().click()
register.getFirstName().type("shavantha")
register.getFamilyName().type("weerasinghe")
register.getGender().click({force:true})
register.getGenderOption().click()
register.getNationality().click({force:true})
register.getNationalityType().click()
register.getDOB().type("01011970")
register.getMobileNumber().type("107148994")
register.getIDTypeOption().click({force:true})
register.getIDTypeOptionSelect().click({force:true})
register.getIDNumber().type("0011223345")
register.getButton().click({force:true})
})
Then ('system returns a success message', ()=>{
const register = new PatientReg()
expect(register.getSuccessMessage()).to.be.not.null;
})
Step 8: Open the test runner. As show below when using cucumber framework,
the feature file loads as below.
Note: when wring your step definitions, make sure that the steps defined in the .feature file and the step defined in the step definitions are same. Otherwise at run time cypress test runner will show as below.
Comments
Post a Comment