Using page object model with Telerik Framework

In this blog we are going to talk about how to use Page Object Model to arrange your page UI elements in your test. Page object Model is a design pattern used to create Object Repository for web UI elements in test automation. Page object Model is used heavily in selenium but its is a good practice to use it in Telerik framework because we don't get a pre populated DOM  like in Telerik test studio.


Actually we are using a modified Page Object Model in here, Lets take a login scenario as an example

Login Page

With out using Page object model the login script will look like this

 HtmlInputText Uname = myManager.ActiveBrowser.Find.ById("username").As<HtmlInputText>();  
 HtmlInputText Pass = myManager.ActiveBrowser.Find.ById("password").As<HtmlInputText>();  
 HtmlInputButton login = myManager.ActiveBrowser.Find.ById("loginbutton").As<HtmlInputButton>(); 

 
 myManager.ActiveBrowser.Actions.SetText(Uname, "User");  
 myManager.ActiveBrowser.Actions.SetText(Pass, "password123");  
 myManager.ActiveBrowser.Actions.Click(login);  

This code works with out any issues but imaging in a situation we had to change the IDs of these controls, Actually in a situation of changing Ids of a login screen wont take much time, but imagine a more complex scenario. In such a case if you have the page elements in a different place that would be really easy to use in test maintenance.


How to Use Page Object Model in Telerik test studio

This might seem little complex at first but its not

First you need two class files (one for login functionality, one for login elements)

Lets name them: Login.cs, loginObj.cs

if you really want to refine it more add the "loginObj.cs" inside a separate folder called "ObjectRepo"

Please follow the steps
[if you want to know how to create a project in Visual studio using refer the link]

1. Open Login.cs class
2. add new test method [paste the below code in it]

  [TestMethod]  
     public void TestMethod_login()  
     { }  

3. Class for login functionality is ready

Lets open the loginObj.cs class

it will look like this

Add the below references to the class

 using ArtOfTest.WebAii.Core;  
 using ArtOfTest.WebAii.ObjectModel;  

Add a new class variable for manager

 private Manager _manager;  

Create a new constructor inside the class

 public loginObj(Manager m)  
     {  
       _manager = m;  
     }  

All set, now we can place our elements here

our elements will be,

1. Username text box
2. password text box
3. login button

lets create the username text box, This is how you create your first element

 public Element txtUname { get { return _manager.ActiveBrowser.Find.ById("username"); } }  

create the other 2 elements just as your first element, so it will look like this

 public Element txtUname { get { return _manager.ActiveBrowser.Find.ById("username"); } }  
 public Element txtpass { get { return _manager.ActiveBrowser.Find.ById("password"); } }  
 public Element btnlogin { get { return _manager.ActiveBrowser.Find.ById("loginbutton"); } }  

All set :)

your class will look like this

Now lets refer the objects from login.cs

1. First add a reference to the loginObj.cs

 using POM.ObjectRepo;  

2. Then we will create and object

 loginObj objLogin = new loginObj(Manager);  

3. Create the login script

adding User name

 myManager.ActiveBrowser.Actions.SetText(objLogin.txtUname, "username");  

Add password and login button click using this script. it will look like below

 myManager.ActiveBrowser.Actions.SetText(objLogin.txtUname, "username");  
 myManager.ActiveBrowser.Actions.SetText(objLogin.txtpass, "password");  
 myManager.ActiveBrowser.Actions.Click(objLogin.btnlogin);  

so your completed code will look like below

Congratulations, you have successfully added page object model to your project!!!

if your still not clear on the process please click on this link and download the complete solution

please put a comment below if you have any clarifications

Happy testing!!!