Best Practises in Page Object Model : Naming Conventions of Web Elements & Actions on it

Hello Folks,

Recently I have started learning or exploring more on best practises in Selenium Framework and same I want to share through my blogs for yours learning as well as to know your views. In this post, we will learn Naming Convention for Web Element and actions on it.

Let’s consider a scenario:

You are very concerned about Reusability principle. You create Pages ( Page Object Model) and define all Web Element and actions on web elements so that whenever you or other automation testers  develop scripts they can use Web Elements from single page instead of defining again and again. Good idea! You created page as below:

package PageObjectModel;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;


// Is it good name of a class? "MyPage"
public class MyPage {
        
        WebDriver driver;

        public static MyPage getMyPage(WebDriver driver) {
                return PageFactory.initElements(driver, MyPage.class);
        }

        // Does name "email" say type of web element? Is it a text box or button or something else?
        @FindBy(id = "email")
        private WebElement email;


        //Does name "password" say type of web element? Is it a text box or button or something else?
        @FindBy(id = "passwd")
        private WebElement password;


        //Does name "signin" say type of web element? Is it a text box or button or something else?
        @FindBy(id = "SubmitLogin")
        private WebElement signin;
        
        // Does name "sendEmail" say what actually this method perform?
        public void sendEmail()
        {
                email.sendKeys("Amod");
        }

        // "typePassword" makes some sense but why method name "sendEmail" has not same pattern?
        public void typePassword()
        {
                password.sendKeys("WhyShouldISayMyPassword");
        }
        
        // Is this method directly let you sign in or just click on sigin button?
        public void signin()
        {
                signin.click();
        }
        
}

Your colleague is very happy as Page is already developed and he just needs to create scripts. He wants to create a script of Login. He is typing and pressing ctrl+enter( In Eclipse) for suggestions but couldn’t find any because you have given a very beautiful name to Login page as “MyPage”. He calls you and ask about it and you say that name is actually “MyPage”. Now your colleague creates an object of MyPage and wants to access Email, Password text boxes. He takes the object reference and press dot (.) to get all members of MyPage class. He gets a lot of members but can not guess easily the correct web elements. It will be even more difficult if you have given page codes as a jar.

Shouldn’t you think there should be some standard for naming conventions followed by everyone in team so that anyone can understand type of web element and action?

Let’s define standard now:

Rule no 01: Prefix name of web elements with something which describes type of web elements whether it is textbox or button or something else.

For example:

Web Element Type	Prefix	Examples
Text Box	txt	txtEmail , txtPassword
Button	btn	btnRegister , btnLogin
Drop down	dd	ddCountry , ddYear
Select Drop Down	sdd	sddMonth , sddYear
Check Box	cb	cbGender, cbSalaryRange
Header	hdr	hdrPrint, hdrUser
Table	tbl	tblBooks, tblProducts
Label	lbl	lblUserName, lblPassword
Image	img	imgProfile, imgCart

Rule no 02: Add prefix “Page” with all pages you develop. It will segregate Page classes from other available classes. E.g. Page_Login, Page_Home etc.

Rule no 03: Web element name should be gives as it is shown on UI. For example, if email has label as “Email Address”, name this web element as txtEmailAddress.

Rule no 04: Prefix action name with method which performs on web element. For example:

Action	Prefix	Examples
Click	clk	clkSigin, clkRegister
Type	set	setEmail, setPassword
Check a check box	chk	chkGender
Select value from drop down	select	selectYear, selectMonth

Rule no 05: Give name of a page as per title of page. Ex. Title of home page is “Dashboard”. You should create a page as Page_Dashboard.

Rule no 06: Use camel case for naming methods and web elements. CamelCase (also “camel case” or “dromedary case”) is a naming convention in which the first letter of each word in a compound word is capitalized. For example: If a text box has label as “Email address”, name its web element as “txtEmailAddress”.

Advantages:

1. You may have many text boxes, buttons etc Web elements on page. You can easily filter out all buttons or text boxes easily using above conventions. For example: When you type PageObject.btn, all button of that page will be displayed and you can select desired one.
2. If you want to type values, just type “set“, all method which performs typing will be shown in suggestions.
3. Standard naming convention will help in reducing duplicate codes.

See an example below for proper naming convention:

 

package PageObjectModel;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;


// Now you can say "Page_Login" is a page.
public class Page_Login {

WebDriver driver;

public static Page_Login getPage_Login(WebDriver driver) {
return PageFactory.initElements(driver, Page_Login.class);
}

// Can you say that email is a text box by name?
@FindBy(id = "email")
private WebElement txtEmail;



@FindBy(id = "passwd")
private WebElement txtPassword;



@FindBy(id = "SubmitLogin")
private WebElement btnSignIn;

// Can you understand now what this method does?
public void setEmail()
{
txtEmail.sendKeys("Amod");
}


public void setPassword()
{
txtPassword.sendKeys("WhyShouldISayMyPassword");
}


public void clkSignin()
{
btnSignIn.click();
}

}

Note: Above naming convention can be customised as per your understanding. This posts explains how standing naming conventions can
help you in effective categorisation and best coding practices.

If you have any doubt, feel free to comment below.
If you like my posts, please like, comment, share and subscribe.
#ThanksForReading
#HappySelenium