Automate Login and Registration page in Testcafe

How to Create an automation script in Testcage and Automate Login and Registration form. In this testcafe example, let’s create end-to-end automation in testcafe to automate a login and registration form.

Basic environment setup required to run a Testcafe Script.

Automate Login And Registration form in Testcafe

After environment setup let’s create a test.js file and write the below code, In this example We have one testcases for login and another for registration form.

To perform the automation we are using a Job Portal web application that is running on localhost URL “http://localhost:8083/JobPortal/”. To get more clarification on it follow the video tutorial that attracted below.


import { Selector, t } from "testcafe";

fixture `Auatomte Login and Registration form`


test('Login User with valid user name and password', async t=>{
    await t
    .typeText(Selector('#email_address'), '')
    .expect(Selector('H3').withExactText('Welcome To Job Portal Management').exists).ok();


test('Register', async t=>{
    await t
    .typeText(Selector("#fname"), 'fdgfdgdfgdg')
    .typeText(Selector("#lname"), 'fdgfdgdfgdg')
    .typeText(Selector("#email_address"), '')
    .typeText(Selector("#password").nth(0), 'Demo@123')
    .typeText(Selector("#password").nth(1), 'Demo@123')
    .typeText(Selector("#datepicker"), '08/08/1992')
    .typeText(Selector("#gender"), 'M')
    .typeText(Selector("#mobilenumber"), '85858585858')
    .expect(Selector('H6').withExactText('User Successfully Registered').exists).ok()


Important code Explanation

import { Selector, t } from "testcafe"; used to import selectors in the script that will help to select the web element from the browser.

.page("http://localhost:8083/JobPortal/") will load the page or you can enter the base URL of the application here.

.click(Selector('a').withText('SignUp')) Used to click on the Signup link with the respective selector.

.typeText(Selector("#fname"), 'fdgfdgdfgdg') Type the value in the input fields.

.expect(Selector('H6').withExactText('User Successfully Registered').exists).ok() This is the kind of assertion that is used to verify the text or any condition during the automation.