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;
}
