Chapter 7.4 - Implement Register Test with Page Model

After we created the page object for our first test case or our first scenario, which is the user registration and the user login, now it's time to create our first test using this page class.

So inside the test folder, we can create a new test case with RegistrationTest.js and inside this test, we will add our steps to cover the registration steps and the login and go to my orders and then check that there are no orders.

So in the beginning, we will import {ClientFunction} from 'testcafe', because we will assert that our current URL is displaying the register link or is displaying the customer info or search result and a lot of things that we can use with this.

Then we can import homepage - so we will import our page classes.

So we have import homepage from - and we can say it's in pages and then we can import the home page.

We will do the same with the rest - import registerpage from '..pages/RegisterPage'.

Also, we will import the login page and the customer page.

Then we can say const URL =, and we can put the URL for our website or our application and in our case, it is the https://demo.nopcommerce.com/ website.

And then we can also add const getURL - we will use the get current URL function that we did in the previous chapters.

And from ClientFunction, we can just pass in the arrow function and use window.location.href to get the current URL.

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);

Then we will start by adding our fixture. We can also use a code snippet.

So from here, we can just say fixture with the fixture name. So here we have a fixture and now we just need to change the value of the name to "Registration Fixture".

And for the URL, we can just pass in the URL that we added as a const.

Then as a first test, we need, for example, to ensure or assert that the homepage is displayed.

With test, we can say, this is for "Assert Home Page Test", add async t with the arrow function as we usually do in our tests.

Then here we add await t, with the TestController, and then .

We will use expect, then pass getURL and .eql(URL).

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);

fixture ("Registration Fixture")
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
});

Also, we can take a screenshot if we need it.

We can also expect that the home page h2 is displayed or the welcome text.

So if we return to the home page, we need just to assert that the "Welcome to our store" is displayed.

Here we can just say that the homepage.subtitleHeader.exists and use .ok to verify that the subtitle or the header is displayed on the page.

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);

fixture ("Registration Fixture")
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

This the first test in our end-to-end test case with user registration. Here we are asserting that the homepage is displayed.

Then in the second one, we need to add one for the user registration, so we will add all the steps for the user registration.

I just add a test with the name, 'User Registration and Login Test' with the test controller and add await.

We will continue with our test case by clicking on that register link.

So with homepage.RegisterLink, we need to click on the register link.

After that, we need to expect or to verify that the URL contains the register keyword.

Then we can expect that getURL - and this is a method - .contains('register').

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);

fixture`Registration Fixture`
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

test('User Registration and Login Test',async t => {
 await t
     .click(homepage.RegisterLink)
     .expect(getURL()).contains('register');
})

Then another .click() - and we will continue with the registration form.

The first thing is the gender option. So with the registerpage.GenderOption, and with a gender option, we are just selecting male, because it's already - if we look at RegisterPage.js for reference, it's #gender-male.

So we are now selecting it and we will continue with the rest of the form.

Here we can just say .click().

Now it's typeText because we need to insert the username or the first name.

So typeText with registerPage.FirstName, and we'll add the first name as a string - for example here, I will add my name.

After that, I will add typeText with the last name - so, registerPage.LastName and we will also add my last name.

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);

fixture`Registration Fixture`
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

test('User Registration and Login Test',async t => {
 await t
     .click(homepage.RegisterLink)
     .expect(getURL()).contains('register')
     .click(registerpage.GenderOption)
     .typeText(registerpage.FirstName,'Moataz')
     .typeText(registerpage.LastName,'Nabil');
})

Then we will use await - so, we will close the line here because we will use await here - to be able to select from the dropdown list for the birthday, month and year.

So await registerpage.selectDay() and we will pass the day as a value. So here, this is the day as a parameter.

For the day, we will select 5.

Another await, and also we can add a semicolon here because this is a separate await with registerPage.selectMonth() and we will add the month as of November, for example.

If we open the demo.nopcommerce.com site and we redirect to the Register page - so we Log out and redirect to the Register page - we will find that the month is a string. So, we need to select November or October or August or anything.

Also, we need to select the year. So after that, just add a semicolon and await with registerPage.selectYear() and we can add the year.

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);

fixture`Registration Fixture`
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

test('User Registration and Login Test',async t => {
 await t
     .click(homepage.RegisterLink)
     .expect(getURL()).contains('register')
     .click(registerpage.GenderOption)
     .typeText(registerpage.FirstName,'Moataz')
     .typeText(registerpage.LastName,'Nabil');
     await registerpage.selectDay('5');
     await registerpage.selectMonth('November');
     await registerpage.selectYear('1983');
})

Then we'll continue again with await t, with the test controller, to be able to continue with the rest of the form.

I added here the Email, Password, Confirm Password and click on the Register page.

After that, I expect or verify that the successful message .exists().ok() and the successful message contains the text, "Your registration is completed."

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);

fixture`Registration Fixture`
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

test('User Registration and Login Test',async t => {
 await t
     .click(homepage.RegisterLink)
     .expect(getURL()).contains('register')
     .click(registerpage.GenderOption)
     .typeText(registerpage.FirstName,'Moataz')
     .typeText(registerpage.LastName,'Nabil');
     await registerpage.selectDay('5');
     await registerpage.selectMonth('November');
     await registerpage.selectYear('1983');
     await t
     .typeText(registerpage.Email,'moataz@test.com')
     .typeText(registerpage.Password,'123456')
     .typeText(registerpage.ConfirmPassword,'123456')
     .click(registerpage.RegisterButton)
     .expect(registerpage.SuccessfullMessage.exists).ok()
})

We have here a small issue that every time - if you wanted to run this test again and again - we will have an issue that the email already exists.

What we can do is add a random number in with our email and every time we will get a new number and we will continue with our tests.

So here, we can create a variable - we can use var randomNumber, for example, equal to Math.floor() - we have a library with JavaScript - and we will pass a number Math.random() * 10,000 - to have the biggest score for the number.

After that, we can add var userEmail and the user email can be, for example - the first name, then we will append the random number, then we will add @test.com.

So this is a random number, and we append the random number to our email, and then we will use this user email in our test case.

We will just remove the string moataz@test.com and replace it with userEmail.

So, here we have the username, password - there is no problem in the password - confirm password, register button, and successful message.

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);
var randomNumber = Math.floor(Math.random() * 10000);
var userEmail = 'moataz'+randomNumber+'@test.com';

fixture`Registration Fixture`
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

test('User Registration and Login Test',async t => {
 await t
     .click(homepage.RegisterLink)
     .expect(getURL()).contains('register')
     .click(registerpage.GenderOption)
     .typeText(registerpage.FirstName,'Moataz')
     .typeText(registerpage.LastName,'Nabil');
     await registerpage.selectDay('5');
     await registerpage.selectMonth('November');
     await registerpage.selectYear('1983');
     await t
     .typeText(registerpage.Email,userEmail)
     .typeText(registerpage.Password,'123456')
     .typeText(registerpage.ConfirmPassword,'123456')
     .click(registerpage.RegisterButton)
     .expect(registerpage.SuccessfullMessage.exists).ok()
})

So this is our first test.

Here we already registered and then we need to continue with the login or log out and then log in again with this user account.

After we created this registration, we need to create the logout and then login with this account.

Before we add a logout and then login with the registered account, let's try our first scenario with the register page and check if it's worked successfully so we can continue with our end to end scenario.

From the terminal, we can open a new terminal here and we can just run:

testcafe chrome test/RegistrationTest.js

After that, we can continue or we can run with TestCafe. So, now TestCafe has initialized the server and after that, it will redirect to the URL, and we will continue with the test.

We will wait until it is finished and after that, we can check the result.

Here we are continuing with registration and here we have a problem in the month because we are waiting. I think maybe that it was the string that we added for the month name, so here we have a problem.

Let's just go up and check what happened.

We have a typo in November - this is a month, so we can go to this line and fix it, or we can open the registration and we can select it and inspect it and copy it from here just to make sure that we have the correct month.

Then we can run our test again. So, TestCafe is running our tests now, and we will check the results.

Every time, if we have something wrong in our test, we need to fix it and then we can return, or we can run our test again.

Here we registered successfully, so our test is finished and we don't have any problem with this one.

Here we have one registration or one test, but we have a problem in 'Assert Home Page Test'.

We also have a problem with the ClientFunction, so let's change it.

Because here we are using getURL, we are not using it as a function, so we have a problem here.

We just need to add () to make it a function and we can run our test again to check this test - because here we have expect(getURL) - we have a problem here in the 'Assert Home Page Test'.

Let's run our test again and check the test result.

Here we have getURL(), and then also we have getURL() again after clicking on the register link.

Let's just check the test results.

We click on the register link, fill the data, click Register, and we have two passed test cases.

We fixed our issues and now the test is running successfully.

The 'Assert Home Page Test' also has screenshots here because we added the screenshot explicitly here to check that we are already on the correct page.

So here we have the screenshot from our test and after that, we have the 'User Registration and Login Test' is passed successfully.

In the next steps, we will continue by adding the "Log out" step and the "Log in" with the registered account to ensure that we can go to "My account" and then check that "My account" is displayed with no orders till now because we will place an order in the next test case.

After the registration steps, now it's time to continue in our end to end scenario.

We need to click on the "Log out" link. So, I just added here - .click() on the homepage.LogoutLink, to just log out from the registration steps.

After that, we need to "Log in" with the registered account.

We will .click() on the homepage.LoginLink, and then expect that the loginpage.accountHeader exists, which contains "Returning Customer".

After that, we can add the userEmail which includes the first name and the random number and '@test.com' as a domain.

Then, we are using the password because it's the same password.

Also, we can add the variable or we add the const for this password to use it instead of the string.

After that, we click on the submit button or "Log in".

Then from the homepage, we are clicking on the MyAccountLink.

After that, we are expecting that the customerpage.ordersLink.exists is ok().

So the orderLinks is displayed and we click on orderLinks and then expect that customerpage.noOrdersLabel.exists - which contains that there is 'No orders' with our account till now.

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);
var randomNumber = Math.floor(Math.random() * 10000);
var userEmail = 'moataz'+randomNumber+'@test.com';

fixture`Registration Fixture`
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

test('User Registration and Login Test',async t => {
 await t
     .click(homepage.RegisterLink)
     .expect(getURL()).contains('register')
     .click(registerpage.GenderOption)
     .typeText(registerpage.FirstName,'Moataz')
     .typeText(registerpage.LastName,'Nabil');
     await registerpage.selectDay('5');
     await registerpage.selectMonth('November');
     await registerpage.selectYear('1983');
     await t
     .typeText(registerpage.Email,userEmail)
     .typeText(registerpage.Password,'123456')
     .typeText(registerpage.ConfirmPassword,'123456')
     .click(registerpage.RegisterButton)
     .expect(registerpage.SuccessfullMessage.exists).ok()
     .click(homepage.LogoutLink) 
     .click(homepage.LoginLink)
     .expect(loginpage.accountHeader.exists).ok()
     .typeText(loginpage.emailInput,userEmail)
     .typeText(loginpage.passwordInput,'123456')
     .click(loginpage.submitButton)
     .click(homepage.MyAccountLink)
     .expect(customerpage.ordersLink.exists).ok()
     .click(customerpage.ordersLink)
     .expect(customerpage.noOrdersLabel.exists).ok()
})

Here we have the registration and we have the login now.

Let's run our test and check our steps.

Just one step we can just add - take a screenshot - to just verify that we are already inside that label and the label on the customer page is displayed.

import { ClientFunction } from 'testcafe';
import homepage from '../pages/HomePage';
import registerpage from '../pages/RegisterPage';
import loginpage from '../pages/LoginPage';
import customerpage from '../pages/CustomerPage';

const URL = 'https://demo.nopcommerce.com/';
const getURL = ClientFunction(() => window.location.href);
var randomNumber = Math.floor(Math.random() * 10000);
var userEmail = 'moataz'+randomNumber+'@test.com';

fixture`Registration Fixture`
    .page(URL);
 
test('Assert home page', async t => {
    await t
    .expect(getURL()).eql(URL)
    .takeScreenshot()
    .expect(homepage.subtitleHeader.exists).ok()
});

test('User Registration and Login Test',async t => {
 await t
     .click(homepage.RegisterLink)
     .expect(getURL()).contains('register')
     .click(registerpage.GenderOption)
     .typeText(registerpage.FirstName,'Moataz')
     .typeText(registerpage.LastName,'Nabil');
     await registerpage.selectDay('5');
     await registerpage.selectMonth('November');
     await registerpage.selectYear('1983');
     await t
     .typeText(registerpage.Email,userEmail)
     .typeText(registerpage.Password,'123456')
     .typeText(registerpage.ConfirmPassword,'123456')
     .click(registerpage.RegisterButton)
     .expect(registerpage.SuccessfullMessage.exists).ok()
     .click(homepage.LogoutLink) 
     .click(homepage.LoginLink)
     .expect(loginpage.accountHeader.exists).ok()
     .typeText(loginpage.emailInput,userEmail)
     .typeText(loginpage.passwordInput,'123456')
     .click(loginpage.submitButton)
     .click(homepage.MyAccountLink)
     .expect(customerpage.ordersLink.exists).ok()
     .click(customerpage.ordersLink)
     .expect(customerpage.noOrdersLabel.exists).ok()
     .takeScreenshot();    
})

Let's run our test again with the same command with RegistrationTest.js and we will check the test result after the test.

So our test is running now - we click on Register, we fill the data - this is the previous test - and then click "Register", then we click on "Log out".

After that, we click on "Log in".

We fill the data with the previous account or registered account and click on "My Account" > "Orders" - and here we have No Orders.

Then we have two test cases pressed, and we have two screenshots, one with the 'User Registration` test case and one with the 'Assert Home Page'.

So let's open the screenshots folder - and here we have test-1 and test-2.

Inside test-2 here, we have verified that we are already successfully in "My account" and we clicked on "Orders" and here we have "No orders" displayed on our "Orders" page.

Resources

GitHub Repo for Course Code

Quiz

The quiz for this chapter can be found in 7.7

Add AI to your existing test scripts in minutes!