Page Object Model is an organized way to create an automation framework or manage the resources while doing automation on large-scale projects. in this testcafe tutorial let’s discuss the page object model with testcafe in depth. What is Page Object model and how to create an automation framework in testcafe using the Page Object Model?

Page Object Model in Testcafe

Page Object Model (POM) is a design pattern or in simple language its way of programming to manage the resources and elements during the automation testing.  Mostly POM is used in large-scale projects to reuse the code and maintain the project. let’s understand the POM concept with a simple example.

Example: Suppose you have to automate a login and registration page. without POM what will our first approach be? Find the elements and write the script. but Page Object Model says, “Don’t mix the things”.

• Find the page element and keep all these elements in a separate (LoginPage.js)class or file.
• Create operations(methods) like login and Registration for the page.
• Create another separate class(LoginTest.js) or file to write the test script.
• Create Object of the Page class and use them in your testscript.

Now, If in the future, if developers change the UI of the login and registration page. you don’t need to make changes to the test script just change the elements on pages.

Key points about Page Object Model

• Easy to maintain the automation suite for parallel automation and development.
• Reusability of the code.
• If you use proper POM you do not need to change the script even if changes happen in the UI part.
• Keep the things separate and well organized.

Automation framework using the Page Object Model in Testcase.

let’s create an automation framework using the Page Object Model in Testcase. In this example, will cover two testcase scenarios for automation in Testcafe.

Test Scenario 1: Login with Valid UserName and Password

• Navigate to URL
• Enter Valid UserName
• Enter Valid Password
• Click to Login button
• Verify the user is successfully login into the application

Test Scenario 2: Login with InValid UserName and Password

• Navigate to URL
• Enter InValid UserName
• Enter InValid Password
• Click to Login button
• Verify the user is not successfully login into the application and verify the error message.

Testcafe Page Object Model Folder Structure

Create separate folder for Page and Objects, Testcases, Utilities, and Test data

Pages: This folder contains all the element(Selectors) pages and operational methods.

Testcases:  this folder contains all the test scripts.

Utilities: It will contain all the utility classes like the config.

TestData: incase you are using any external media, like upload files or images.

LoginPage.js

import { Selector, t } from 'testcafe';
import config from '../Utilities/config.json';

const user = config.users; 


export default class LoginPage {

     constructor(){

        
         this.LoginBtn = Selector('#signin_button')
         this.userName = Selector('#user_login');
         this.password = Selector('#user_password')
         this.singInBtn = Selector('.btn')
         this.AccountSummayLink = Selector('#account_summary_tab').child('a')
         this.LoginFailedError = Selector('.alert-error')
     }

     
    async LoginWithValidUser(){
        await t  
        .wait(2000)
        .click(this.LoginBtn)
        .typeText(this.userName, user.username)
        .click(this.password)
        .pressKey('ctrl+a delete')
        .typeText(this.password, user.password)
        .click(this.singInBtn, { timeout: 10000 })

    }

    async LoginWithInValidUser(){
        await t  
        .wait(2000)
        .click(this.LoginBtn)
        .typeText(this.userName, user.username+"dgdss")
        .click(this.password)
        .pressKey('ctrl+a delete')
        .typeText(this.password, user.password+"gfd")
        .click(this.singInBtn)
        .wait(3000)
    }
}

login.js

import { Selector } from 'testcafe';
import config from '../Utilities/config.json';
import LoginPage from '../Pages/LoginPage';


const loginPage = new LoginPage();


fixture `Login Page Auatomation`
    .page(config.url)
   

test('1) Login with Valid UserName and Password', async t => {
    
    await loginPage.LoginWithValidUser();
    await t    
       .wait(10000)   
       .expect(loginPage.AccountSummayLink.exists).ok();         
})
.meta('smoke', 'true').meta('platform', 'Web');

test.only('2) Login with invalid Username and Valid Password', async t => {
    await t

    await loginPage.LoginWithInValidUser();
    await t    
       .setTestSpeed(0.2)    
       .expect(loginPage.LoginFailedError.exists).ok();   
})
.meta('smoke', 'true').meta('regression', 'true').meta('platform', 'Web');

config.json

{

    "url":"http://zero.webappsecurity.com/index.html",
    "shortWait": 1000,
    "mediumWait": 5000,
    "timeout": 5000,
    "longWait": 10000,
    "users": {
        "username":"username",
        "password":"password"
}
}

package.json

{
  "name": "pomtutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Codebun",
  "license": "ISC",
  "dependencies": {
    "testcafe": "^1.18.1"
  }
}

Run the Suite by using testcafe chrome TestCases