Transcripted Summary
After we install the plugin for Cucumber in Visual Studio Code, now it's time to write our Cucumber feature file.
So we will start with the feature file, and then we will start with the step definitions to implement the feature files.
After we install Cucumber and install the plugin that helps us to write the feature files, now it's time to create our feature.
package-lock.json is shown here under the root directory.
We can click on create a new directory called features.
Inside features, we will start writing our feature file, and also we will put the step definition under this.
So here we can also create a folder step_definition for now, and we will add the step definition of our test execution in this folder.
Here we have step definition and under the features, we will create the registration.feature file.
We will use our user registration test in this case, and refactor it to be able to use BDD and Cucumber with a feature file.
Now we can start writing our feature scenario and the steps that include Given, When, Then, or And.
After that, we can add the data table if you want a data-driven test in our test and so on.
So let's just start writing our feature file.
For example, we will start with writing "Feature" and here we have the auto-suggest or autocomplete using the plugin or extension that we installed.
So here it gives us the feature name and the feature description.
For the feature name, we will rename this one Registration Feature.
And for feature description:
As a visitor I can create a new account by the registration feature
We can add any description.
Then, after we add Feature, we can add the Scenario, so here we have a Scenario outline.
If you have a data table and you have a Scenario also, so a Scenario with a Scenario name, so we can add "New User Registration E2E Scenario", for example.
Then after that, as usual, or as we know with the BDD or feature file, we have a Given, When, Then, or And if we need to add different data or different sentences.
So we're going to start with Given.
So here we have a given also, "Given Start to type your Given step here", and here we can start up your given step here.
I open the registration page
When I select the gender
So I will try to simulate our registration page.
In the beginning, we just click on the registration link, then we select the gender.
After that,
And I enter First Name with "Moataz"
And I enter Last Name "Nabil"
We will add all the required fields in our case.
Feature: Registration Feature
As a visitor I can create a new account by the registration feature
Scenario: New User Registration E2E Scenario
Given I open the registration page
When I select the gender
And I enter First Name "Moataz"
And I enter Last Name "Nabil"
And I select Date of Birth "5"
And I select Month of Birth "November"
And I select Year of Birth "1983"
And I enter Email "moataz222@test.com"
And I enter Password "123456"
And I enter Confirm Password "123456"
And I click register button
After, I added all the fields that we need or the steps that we need to fill out the registration form.
Then we can add the "Then" step "successful message is displayed".
Feature: Registration Feature
As a visitor I can create a new account by the registration feature
Scenario: New User Registration E2E Scenario
Given I open the registration page
When I select the gender
And I enter First Name "Moataz"
And I enter Last Name "Nabil"
And I select Date of Birth "5"
And I select Month of Birth "November"
And I select Year of Birth "1983"
And I enter Email "moataz222@test.com"
And I enter Password "123456"
And I enter Confirm Password "123456"
And I click register button
Then successful message is displayed
So this is our feature - "Registration Feature".
Here we add the scenario for Given when I open the registration page.
I select the gender and I enter the first name, last name, date of birth, and all the things until I get the successful registration message.
Resources
Quiz
The quiz for this chapter can be found in 9.7
