cancel
Showing results for 
Search instead for 
Did you mean: 

Page Object Pattern with TestComplete.

SOLVED
Highlighted
Occasional Contributor

Page Object Pattern with TestComplete.

Hello guys,



Someone can give me an example of using Page Object Pattern with TestComplete?



Thanks!





1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Contributor


I've been wanting to post an example of this for a while... I just haven't taken the time to do it so I'm glad you asked. It compelled me to get it done finally.



I've been using the page object method in TestComplete for almost a year now and it's been great. When I started this, I was new to TestComplete and new to JS so it was a learning process for me on two fronts. It went through several iterations, improvements and I think what I have now is somewhat mature... BUT... I hope to have people tear it up, give me suggestions to make it better, etc. I hope others will post examples of how they use page objects also.



Here's a pretty simple example of a couple page objects that I created based on the SmartBear site and a Main script that uses those page objects and does some simple validations. It's all done in JScript. Each of these pages is a separate script file... Home, BrowseablePages, and HomePage.



Main



//USEUNIT BrowseablePages

//USEUNIT HomePage

function Main()

{

   // instantiate the BrowseablePages page object to get the home page URL

   var browseablePages = BrowseablePages.Init();

   var url = browseablePages.Home;



   // set up browser variables and navigate to the home page

   var browserFamily = btChrome;

   var browserName = "chrome"

   var browser = Browsers.Item(browserFamily);

   browser.Run(url);



   Log.Event("Home page");

   // load the home page page object

   var homePage = HomePage.Init(browserName);



   // validate that the logo on the home page exists

   if (homePage.Logo.naturalWidth === 0)

   {

       // image is missing

       Log.Error("Logo on home page is not displayed");

   }

   else

   {

       Log.Checkpoint("Logo on home page is displayed");

   }



   // write the event names to the log

   var events = homePage.GetEvents(browserName);

   for (var i = 0; i < events.length; i++)

   {

       Log.Message("Event " + i + ": " + events);

   }

}

BrowseablePages



function Init()

{

   var browseablePages = {};



   var domain = "http://smartbear.com/";

   browseablePages.Domain = domain;

   browseablePages.Home = domain; // in this case the home page and domain are the same

   browseablePages.Forums = domain + "/forums/";

   browseablePages.TestComplete = domain + "/products/qa-tools/automated-testing-tools/";



   return browseablePages;

}


Home page



function Init(browserName)

{

   var page = Sys.Browser(browserName).Page("*");

   page.Wait();



   // add code to confirm that you are on the correct page



   // create your page object so that you can add properties and methods to it

   var homePage = {};



   // add some properties

   // I use DOM methods of retreiving elements because I find that they are much faster. If you need or want to

   // get elements using the TestComplete methods, you can easily substitute them here

   homePage.Logo = page.contentDocument.querySelectorAll("div.logo-img")[0].getElementsByTagName("img")[0];

   homePage.SearchBox = page.contentDocument.querySelectorAll("input.form-control-search")[0];

   homePage.SearchButton = page.contentDocument.querySelectorAll("span.button-searchbutton")[0];



   // add a method (function) to retreive the events list from the SmartBear home page

   homePage.GetEvents = function (browserName)

   {

       var page = Sys.Browser(browserName).Page("*");

       page.Wait();



       // get the parent element for the events list

       var events = page.contentDocument.querySelectorAll("div.feed-item")[2].querySelectorAll("a.feed-item-link");



       // create an array that will contain the event titles

       var eventTitles = [];

       for (var i = 0; i < events.length; i++)

       {

           // push adds an element to the array

           eventTitles.push(events.innerText);

       }



       return eventTitles;

   }



   return homePage;

}

View solution in original post

6 REPLIES 6
Highlighted
Community Hero


Hi Rauny,



Could you be more specific with what you meant with "Page Object Pattern"?

The Page object in TestComplete is an object that is child of the parent Browser one and both these objects were introduced to ease cross-browser testing.

I would recommend you to read the 'Page object' article in the help.


Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
Highlighted
Occasional Contributor

Hi Alexei,



When I said "Page Object Pattern", I meant the Design Pattern, like we have in Selenium. (Selenium Page Object)



Is there something similar on TestComplete?



Thanks!
Highlighted
Community Expert

Hi Rauny, which Scripting language are you using?

 


Regards,


Phil Baird

Highlighted
Occasional Contributor

Hi Phil,



I'm using JScript.



Thanks.
Highlighted
Contributor


I've been wanting to post an example of this for a while... I just haven't taken the time to do it so I'm glad you asked. It compelled me to get it done finally.



I've been using the page object method in TestComplete for almost a year now and it's been great. When I started this, I was new to TestComplete and new to JS so it was a learning process for me on two fronts. It went through several iterations, improvements and I think what I have now is somewhat mature... BUT... I hope to have people tear it up, give me suggestions to make it better, etc. I hope others will post examples of how they use page objects also.



Here's a pretty simple example of a couple page objects that I created based on the SmartBear site and a Main script that uses those page objects and does some simple validations. It's all done in JScript. Each of these pages is a separate script file... Home, BrowseablePages, and HomePage.



Main



//USEUNIT BrowseablePages

//USEUNIT HomePage

function Main()

{

   // instantiate the BrowseablePages page object to get the home page URL

   var browseablePages = BrowseablePages.Init();

   var url = browseablePages.Home;



   // set up browser variables and navigate to the home page

   var browserFamily = btChrome;

   var browserName = "chrome"

   var browser = Browsers.Item(browserFamily);

   browser.Run(url);



   Log.Event("Home page");

   // load the home page page object

   var homePage = HomePage.Init(browserName);



   // validate that the logo on the home page exists

   if (homePage.Logo.naturalWidth === 0)

   {

       // image is missing

       Log.Error("Logo on home page is not displayed");

   }

   else

   {

       Log.Checkpoint("Logo on home page is displayed");

   }



   // write the event names to the log

   var events = homePage.GetEvents(browserName);

   for (var i = 0; i < events.length; i++)

   {

       Log.Message("Event " + i + ": " + events);

   }

}

BrowseablePages



function Init()

{

   var browseablePages = {};



   var domain = "http://smartbear.com/";

   browseablePages.Domain = domain;

   browseablePages.Home = domain; // in this case the home page and domain are the same

   browseablePages.Forums = domain + "/forums/";

   browseablePages.TestComplete = domain + "/products/qa-tools/automated-testing-tools/";



   return browseablePages;

}


Home page



function Init(browserName)

{

   var page = Sys.Browser(browserName).Page("*");

   page.Wait();



   // add code to confirm that you are on the correct page



   // create your page object so that you can add properties and methods to it

   var homePage = {};



   // add some properties

   // I use DOM methods of retreiving elements because I find that they are much faster. If you need or want to

   // get elements using the TestComplete methods, you can easily substitute them here

   homePage.Logo = page.contentDocument.querySelectorAll("div.logo-img")[0].getElementsByTagName("img")[0];

   homePage.SearchBox = page.contentDocument.querySelectorAll("input.form-control-search")[0];

   homePage.SearchButton = page.contentDocument.querySelectorAll("span.button-searchbutton")[0];



   // add a method (function) to retreive the events list from the SmartBear home page

   homePage.GetEvents = function (browserName)

   {

       var page = Sys.Browser(browserName).Page("*");

       page.Wait();



       // get the parent element for the events list

       var events = page.contentDocument.querySelectorAll("div.feed-item")[2].querySelectorAll("a.feed-item-link");



       // create an array that will contain the event titles

       var eventTitles = [];

       for (var i = 0; i < events.length; i++)

       {

           // push adds an element to the array

           eventTitles.push(events.innerText);

       }



       return eventTitles;

   }



   return homePage;

}

View solution in original post

Highlighted
Occasional Contributor

Jeff,



Thank you so much for giving me an example.



I will study this and do some tests.

New Here?
Join us and watch the welcome video:
Announcements
Join TechCorner Challenge!
Want a fun and easy way to learn TestComplete? Try solving weekly TechCorner challenges and get into the Leaderboard!


Challenge Status

Get properties of a web page element

See replies!

Compare images using the Region Checkpoint

See replies!

Compare HTML table with Excel file and correct data in Excel file

Participate!

How to execute remote test and obtain results via Test Runner REST API

Participate!
Top Kudoed Authors