Transcripted Summary
After we refactored our page object model or class, now it's time to use this page object inside our step definition to complete our example.
So with the first step Given, I opened the registration link, so I need to open the URL.
So here I can use await and then with the testController.navigateTo and pass URL.
Then When I select the gender, we can add await with the testController.click, and then we can pass the register.
So here, we need to import the register page.
I can add const registerpage = require() and we can add the value ../../pages/RegisterPage. Now we can use registerpage.RegisterPage.
So now we have the class and property registerpage.RegisterPage, and then we can get GenderButton() and this is a function so we need to call it as a void and close it.
const assert = require('assert');
const { Given, When, Then } = require('cucumber');
const registerpage = require('../../pages/RegisterPage');
const URL = 'https://demo.nopcommerce.com/register';
Given('I open the registration page', async function () {
await testController.navigateTo(URL);
});
When('I select the gender', async function () {
await testController
.click(registerpage.RegisterPage.GenderButton());
});
So this is the first step. Here we need testController.click and then await testController, which we are passing to the page object class - this is a bound test run - the object is bound to the testController. Then here we can run the gender.
The next step is First Name, so we can also use await with testController.
We need to typeText() in registerpage.RegisterPage.Firstname() - this is a function.
And we need to pass the firstname from the parameter.
So here we have entered the firstname inside the input because this is a typeText and we need to pass a value which will be the parameter we added in the feature file.
Then we will continue with this Last Name. So for example, with await also, with the testController.typeText and with the registerpage.RegisterPage.lastname() as a function.
Then we can add the lastname as a parameter and so on.
const assert = require('assert');
const { Given, When, Then } = require('cucumber');
const registerpage = require('../../pages/RegisterPage');
const URL = 'https://demo.nopcommerce.com/register';
Given('I open the registration page', async function () {
await testController.navigateTo(URL);
});
When('I select the gender', async function () {
await testController
.click(registerpage.RegisterPage.GenderButton());
});
When('I enter First Name {string}', async function (firstname) {
await testController.typeText(registerpage.RegisterPage.Firstname(),firstname);
});
When('I enter Last Name {string}', async function (lastname) {
await testController.typeText(registerpage.RegisterPage.Lastname(),lastname);
});
We will continue with this one for selecting a birthday.
This one will be a little bit different - the drop-down list for the month, year and day, because if we turn back to the page object here, we have two elements.
We need to select first the day of birth and after that, we need to get the option with the value or the data that we need to send.
So here, for example, we need to use await and then testController.click() and in the click, we need to click on registerpage.RegisterPage.DateOfBirth.
This is a first one, we will add a semicolon and then await again with the testController and we need to click on the registerpage.RegisterPage.ListOption() - this is a function - and after that, .withText(), where we need to select the text and the text will be the day that we are adding here as a parameter.
const assert = require('assert');
const { Given, When, Then } = require('cucumber');
const registerpage = require('../../pages/RegisterPage');
const URL = 'https://demo.nopcommerce.com/register';
Given('I open the registration page', async function () {
await testController.navigateTo(URL);
});
When('I select the gender', async function () {
await testController
.click(registerpage.RegisterPage.GenderButton());
});
When('I enter First Name {string}', async function (firstname) {
await testController.typeText(registerpage.RegisterPage.Firstname(),firstname);
});
When('I enter Last Name {string}', async function (lastname) {
await testController.typeText(registerpage.RegisterPage.Lastname(),lastname);
});
When('I select Date of Birth {string}', async function (day) {
await testController.click(registerpage.RegisterPage.DateOfBirth());
await testController.click(registerpage.RegisterPage.ListOption().withText(day))
});
We will continue with the same approach with the rest of the functions here until we finish and after that, we can start working with the custom hooks and the test runner.
const assert = require('assert');
const { Given, When, Then } = require('cucumber');
const registerpage = require('../../pages/RegisterPage');
const URL = 'https://demo.nopcommerce.com/register';
Given('I open the registration page', async function () {
await testController.navigateTo(URL);
});
When('I select the gender', async function () {
await testController
.click(registerpage.RegisterPage.GenderButton());
});
When('I enter First Name {string}', async function (firstname) {
await testController.typeText(registerpage.RegisterPage.Firstname(),firstname);
});
When('I enter Last Name {string}', async function (lastname) {
await testController.typeText(registerpage.RegisterPage.Lastname(),lastname);
});
When('I select Date of Birth {string}', async function (day) {
await testController.click(registerpage.RegisterPage.DateOfBirth());
await testController.click(registerpage.RegisterPage.ListOption().withText(day))
});
When('I select Month of Birth {string}', async function (month) {
await testController.click(registerpage.RegisterPage.MonthOfBirth());
await testController.click(registerpage.RegisterPage.ListOption().withText(month));
});
When('I select Year of Birth {string}', async function (year) {
await testController.click(registerpage.RegisterPage.YearOfBirth());
await testController.click(registerpage.RegisterPage.ListOption().withText(year));
});
When('I enter Email {string}', async function (email) {
await testController.typeText(registerpage.RegisterPage.Email(),email+randomNumber+"@test.com");
});
When('I enter Password {string}', async function (password) {
await testController.typeText(registerpage.RegisterPage.Password(),password);
});
When('I enter Confirm Password {string}', async function (password) {
await testController.typeText(registerpage.RegisterPage.ConfirmPassword(),password);
});
When('I click register button', async function () {
await testController.click(registerpage.RegisterPage.RegistrationButton());
});
Then('successfull message is displayed', async function () {
await testController.expect(registerpage.RegisterPage.SuccessfullMessage().exists).ok;
});
Here I finished - I added all the required steps for the testController or the action in every step.
For example, here for registration, I click on the register button.
For the successful message, the testController expects that for the register page, the successful message exists and is ok.
So, here we finished the implementation for our step definition.
And a step definition is - get the data or get the elements and objects from the page object class.
Also, we have the feature and these values should be used in the feature.
We have just one error here using email.
So, we have the email, password, confirm the password and also when we run our test, we will check if we have any problems in our case.
Now it's time to check or add our custom hook and the custom test controller to be able to run our test with Cucumber JavaScript and step definition and the feature file.
Resources
Quiz
The quiz for this chapter can be found in 9.7
