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!