Building a Test Automation Framework using Cypress.io — Adding Cucumber BDD (Part 2)

Ciao!

In Part-1 of this tutorial series we did cypress setup, created a sample cypress project and then, wrote and ran a sample test case. Now in this article we will shape our current cypress project into some thing more.. (adding magic potions 😉)

What is BDD?

Behavior Driven Development (BDD) is an agile software development practice – introduced by Dan North in 2006 – that encourages collaboration between everyone involved in developing software: developers, testers, and business representatives such as product owners or business analysts.

As per Cucumber Docs:

BDD is a way for software teams to work that closes the gap between business people and technical people by:

• Encouraging collaboration across roles to build shared understanding of the problem to be solved
• Working in rapid, small iterations to increase feedback and the flow of value
• Producing system documentation that is automatically checked against the system’s behavior

and Cucumber is way to achieve it. Cucumber uses a syntax called Gherkin which is nothing but Given/When/Then in plain text files, called feature files.

Adding BDD to our Framework:

Lets begin with adding a cucumber pre-processor first,

npm install cypress-cucumber-preprocessor --save-dev

Once you’ve got that, you’ll also need to configure the cypress-cucumber-preprocessor to stop using global step definitions (this will be default in the future. Source).

...
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }

One last thing:

In cypress/plugins/index.js we need to declare cucumber pre-processor with Cypress as a file preprocessor by adding following line:

...
module.exports = (on, config) => {
  on('file:preprocessor', cucumber());
  ...

Adding First BDD Test:

Create cypress/integration/features/UI directory and add Test1.feature file inside:

Before adding our test steps in the feature file, add an extension to visualize Gherkin syntax in VS Code:

Cucumber Plugin : https://marketplace.visualstudio.com/items?itemName=alexkrechik.cucumberautocomplete

So I added 2 Steps for our test case, which is "Navigating to Google.com and verifying page title"

Now we have created our first steps, all that remains is adding our Glue code for the steps!!

Adding the Glue Code:

Create cypress/integration/common/stepDefinitions/ directory and add commonSteps.js file inside:

Note: Glue code is taken from cypress/integration/common when nonGlobalStepDefinitions is true,cypress/support/step_definitions when nonGlobalStepDefinitions is false, we have selected "true"

Now add following glue code to the commonSteps.js file:

Given('I open the Google web url', () => {
    cy.visit('https://www.google.com');
    
  });
  
  Then(
    'I verify title of web page as {string}',
    (title) => {
        cy.title().should('include', title);
    }
  );

Running our BDD Tests:

Now before we can run our tests we need to delete the Spec1.js which we were earlier using for our tests, because it won't be relevant for us anymore.

Now add following lines to cypress.json file:

{
 "testFiles": "**/*.{feature,features}",
"ignoreTestFiles": ["**/stepDefinitions/*","*.js", "*.md"]
}

the why? these two lines tell cypress which files to be treated is test files (Global option) and which folders to neglect when looking for test files. We added stepDefinitions directory, and all other .js and .md files to ignoreTestFiles, because we don't want individual Glue code files or other type of files to be treated as tests, similarly that's the precise reason why we deleted the Spec1.js.

Let's run our BDD tests now using following command:

npx cypress run

Or based on Specific BDD Tag, we can choose any out of @UI, @test and @smoke tags :

npx cypress run --env TAGS="@UI"

So that's it, we have written a Cucumber BDD test case and run it in headless browser.

If you want to see the whole test run video; you can just navigate to following folder: cypress\videos\features\UI and there you will find Test1.js.mp4, which will have complete test run execution recorded.

See you next time, when we will be adding some advance things to our Frameworks such as page object model, API testing, environment support and reports etc. So keep tuned in.

Arrivederci!

GitHub repo: https://github.com/far11ven/Cypress-TestFramework/tree/develop/Part 02