Implement Cypress code in Step Definition File

Tutorial 17​​ ​​ Implement​​ Cypress​​ code in Step Definition file

What you will Learn :

  • Import Give, When, Then methods

  • Implement functions​​ with real cypress code

Import Give, When, Then methods

In our previous tutorial, we had created​​ a​​ step definition file​​ E2EStepDef.js

We will now implement cypress code in this step definition file.

Now, if you​​ start typing ‘Giv’, you will notice that ‘Given’ method is not auto-suggested. We have to import the ‘Given/When/Then’ methods before we start using them.​​ ​​ 

Launch​​ https://github.com/TheBrainFamily/cypress-cucumber-preprocessor​​ 

Notice below, we have to import the ‘Given’ method

Just copy the above line & paste it

Now if you type ‘Gi’, you would see ‘Given’ method getting auto-populated

To import ‘When’, ‘Then’, we can simply do as shown below​​ 

Let us now type the ‘Given()’ method

Now go to the feature file to copy the description of this ‘Given’ method

Paste it inside the Given() method within single quotes, so that the Given() method knows which method it has to execute

So,​​ Given() method​​ will try to match​​ the step what you have in the feature file

and what you pass in the first argument of​​ Given() method​​ 


The Given() method will be executed only if both these match.

Implement functions​​ with real cypress code

The second argument of Given() method will be function() that will describe our real code

Next, keep the cursor after function() and hit ‘Enter’

Now type {​​ at line number 4

You would notice that automatically the closing brace } comes up, see below

Now notice below that the cursor is in between ​​ the flowery braces {}​​ 

Hit ‘Enter’

Here we will write​​ code which explains the​​ sentence 'I launch an e-commerce website'.​​ In ‘Tutorial_7_Automate_End_To_End_TestCase_in_Cypress’,​​ we had automated the E2E process & had written the cypress code​​ for this step (see line number 5 below)

Just copy this line and paste it inside the function

That’s​​ it, our first step is done!

Recall that we will NOT be sharing this .js file with client. Instead we would be sharing the​​ feature file with him. ​​ 

Let us now go to our feature file and implement the next step viz ‘When’ (line 7)

Go to the step definition file and create When() method​​ 

Copy the cypress code for this step from E2E.spec.js

Paste it inside the function of When() method
​​ 

Similarly, implement And() function

Notice that ‘And’​​ method​​ is automatically added in the ‘import’ statement.

Similarly

Next

Next

Next

Last we will write the ‘Then’ method

Save the file.

So we have successfully crated our step definition file. We are now good to execute our feature file. We will see that in our next section.

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