Tutorial 13 – Introducing Cypress with Cucumber BDD
What you will Learn :
What is BDD (Business driven development) ?
Gherkin syntax
E2E shopping cart Gherkin syntax
Scenario keyword
Feature keyword
Linking Gherkin with cypress
Cucumber
Step Definition
References
What is BDD and Gherkin syntax
Let us first understand what is BDD. Go to the website https://cucumber.io/
Look at above test case. We have described our test case in the form of a ‘behaviour’.
So our automation test case will check whether ‘Alice will be full if she eats 3 cucumbers’.
However, look at the below test case that was built using pure cypress syntax. To a client/end-user, the syntax looks to be slighlty technical and is not so easy to understand.
So by looking at above, it is difficult for the client to understand what exactly you have automated, what test case feature has been automated. They can only guess what this test case might be doing. So the business scenarios are missing in above script. So we cannot say for sure what the above test case exactly does.
Instead, our test case can be described in this behaviour driven style (see below).
The above syntax is called as ‘Gherkin’ syntax and our client can easily understand it. The syntax closely matches with the English language (having ‘Given’, ‘When’, Then’ etc keywords). Most lines in a Gherkin syntax start with one of the keywords (Given, When etc).
So you can understand the test case syntax as below:
Given explains what you have
When you perform some action
And you perform additional action
Then what is the result or outcome of that action
Below is another example of a test case in Gherkin syntax.
Scenario: All shopping done
Given I am out shopping
And I have eggs
And I have milk
And I have butter
When I check my shopping list
Then I should not have anything left
So you can describe your test scenario using Gherkin syntax and you can link these lines with actual cypress code.
E2E shopping cart Gherkin syntax
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:
Let us try to convert above steps into Gherkin syntax. So, below is the business representation in BDD/cucumber world which is self-explanatory. Recall that ‘And’ keyword is used to concatenate additional actions.
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
Scenario keyword
As you must have noticed in above test cases, in addition to other keywords, we also used ‘Scenario’ keyword. A ‘Scenario’ describes intended behaviour of the test case. In other words, a ‘Scenario’ describes what, not how.
Consider below test case. The ‘Scenario’ is describing the what viz what the free subscribers will see. It does not describe how the free subscribers will see only free articles.
Feature keyword
‘Feature’ represents a Test Suite. A test suite can have multiple test cases. Each scenario represents one test case. So if you consider below example, we have a ‘Feature’ that contains 2 test cases or 2 scenarios.
Linking Gherkin with cypress
Let us look at below test case again. We will ultimately be linking all our Gherkin syntax with cypress code, as shown below.
Scenario: E2E automation
Given I launch an e-commerce website linked to cy.visit('https://demo.nopcommerce.com/')
When I enter ‘Lenovo IdeaCentre 600 All-in-One PC’ in search field linked to cy.get('.search-box-text').type('Lenovo IdeaCentre 600 All-in-One PC')
And I search the item linked to
cy.get('.button-1[type=submit]').click()
And I add item to shopping cart linked to
cy.get('.product-box-add-to-cart-button').click()
And I go to shopping cart linked to
cy.get('.cart-label').click()
And I enter 2 in quantity field linked to
cy.get('.qty-input').clear().type('2')
And I update my shopping cart linked to
cy.get("[value='Update shopping cart']").click()
Then 'Total' amount should be $1000 linked to cy.get('.product-subtotal').contains('$1,000.00')
However, we will not share the cypress code with end user, we will only share the BDD (behaviour driven development) Gherkin syntax.
Cucumber
As we have seen above, we describe the desired behaviour in a test case and based upon this behaviour, we drive our development. By development, we mean writing the actual cypress code and linking it to behaviour. That’s the reason we call it as ‘Behaviour Driven Development’
Cucumber is one of the tool which supports this BDD framework.
Step Definition
Now, what is a step? Each line of a scenario is a step. So basically, all the below are steps. To define these steps would mean to write the actual cypress code.
In ‘Behaviour Driven Development’, we write our cypress code inside ‘Step Definition’ file. The link-up depends upon the programming language you are using. Different programming languages have different syntaxes to link.
We know that cypress is built on java script. Go to the link https://github.com/cucumber/cucumber-js
When you scroll down, you would see a link ‘Step Definitions’
Click ‘Step Definitions’ link. You would see an example of Gherkin and the corresponding JS syntax, see below
We will look at the code details starting from next tutorial onwards.
References
You can refer the link https://cucumber.io/docs/gherkin/reference/ to read more about Gherkin syntax
You can refer the link https://cucumber.io/docs/cucumber/step-definitions/ for understanding ‘Step Definition’ in detail
Thank you for reading!