Write A Feature File In Cypress Using Cucumber BDD

Tutorial 16​​ ​​ Writing a feature file​​ in Cypress Cucumber

What you will Learn :

  • Writing a feature file

Writing a feature file

In Visual Studio, expand cypress working directory.​​ 

Right click examples folder & click ‘New Folder’

You can name​​ the folder​​ anything you wish to, example​​ ‘CucumberBDD’

Let us launch​​ https://cucumber.io/​​ 

Notice above.​​ The ‘Feature’ explains what exactly your feature file is doing. A feature file may have multiple scenarios​​ or multiple test cases.​​ 

Let us now right click our folder CucumberBDD. You would see ‘New File’ option

Click ‘New File’ and​​ you can name it anything you wish to with a .feature extension, example​​ E2E.feature

Now, just type ‘Fe’, you would see​​ ‘Feature’​​ as an auto-suggestion coming​​ up. This is because of the​​ ‘Cucumber (Gherkin) Full Support​​ plugin’​​ that we had installed in our previous tutorial​​ 

​​ ​​ 

Hit ‘Enter’ key. You would notice that the ‘Feature’ syntax gets auto-populated

Let us write the ‘Feature name’ as, for example​​ -​​ Validate Add-to cart functionality​​ 

Next, you can write ‘Feature Description’ as, for example​​ ​​ AUT (Application under Test) validation in Staging environment​​ 

Next we will write the actual scenario that we want to Test.

Hit ‘Enter’ key 2 times. The cursor should be at a position as seen in line#5

Type ‘S’

Hit Enter

Let us write the ‘Scenario name’

Now, we can start writing the Gherkin syntax (Given, When, Then etc…).

In tutorial 7, we have already seen how to automate an end to end test case using cypress. Below were the steps that we automated:

In ‘Tutorial_13’,​​ we had converted the above steps into Gherkin syntax:

Scenario: E2E automation

 ​​​​ Given​​ I launch an e-commerce website

 ​​​​ When​​ I enter ‘Lenovo IdeaCentre 600 All-in-One PC’ in search field

 ​​​​ And​​ I search the item

 ​​​​ And​​ I add item to shopping cart

 ​​​​ And​​ I go to shopping cart

 ​​​​ And​​ I enter 2 in quantity field

 ​​​​ And​​ I update my shopping cart

 ​​​​ Then​​ 'Total' amount should be $1000

So let us paste this in our scenario

When we now share this feature file with the client, he/she would easily understand the scenario(s). ​​​​ 

Our next goal is to​​ bring our real code and​​ plugin with these steps one by one.​​ 

We have to follow some conventions for doing actual code implementation:

Rule#1

When you run a feature file (like the one shown above),​​ where will​​ it look for it’s actual implementation​​ viz step definition fil?​​ It will look inside the folder that has the same name​​ as it’s feature.​​ 

In our case, the name of the feature file is E2E.feature

Thus we will create a folder inside CucumberBDD having the name E2E

This rule can be seen on the page​​ https://github.com/TheBrainFamily/cypress-cucumber-preprocessor​​ 

Under this E2E folder, we can start creating our step definition file which will have actual implementation. This​​ file​​ will be a javascript file having .js extension.

So, right click E2E folder

Click ‘New File’​​ and you can name it as E2EStepDef.js

So our actual cypress code will be in .js step definition file.​​ 

Next, we will implement our actual cypress code in the step definition​​ .js​​ file.​​ 

Thank you​​ for reading!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024