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 TypePrefixExamples
Text BoxtxttxtEmail , txtPassword
ButtonbtnbtnRegister , btnLogin
Drop downddddCountry , ddYear
Select Drop DownsddsddMonth , sddYear
Check BoxcbcbGender, cbSalaryRange
HeaderhdrhdrPrint, hdrUser
Table tbltblBooks, tblProducts
LabellbllblUserName, lblPassword
Image imgimgProfile, 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:

ActionPrefixExamples
ClickclkclkSigin, clkRegister
TypesetsetEmail, setPassword
Check a check boxchkchkGender
Select value from drop downselectselectYear, 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