GalenPages is a lightweight Selenium javascript framework that allows you to work with Page Objects model in a fast and comprehensive way.

Quick introduction

Here is the simple code snippet for building a page object for a Login page

this.LoginPage = $page("Login page", { email: "input.email", // css locator password: "xpath: //input[@class='password']", // xpath locator submitButton: "id: submit", // id locator load: function () { this.open("http://example.com/login"); return this.waitForIt(); }, loginAs: function (userName, password) { this.email.typeText(userName); this.password.typeText(password); this.submitButton.click(); } }); // now you can use it like this var loginPage = new LoginPage(driver).load(); loginPage.loginAs("[email protected]", "password");

GalenPages API

GalenPages.settings

Contains some basic configurations for GalenPages framework

GalenPages.settings.allowReporting

GalenPages.settings.allowReporting - Boolean type. A property that is set to true by default and is used in order to allow basic page elements action to report their activity (e.g. click, typeText etc.)

// to disable reporting in your tests GalenPages.settings.allowReporting = false;

GalenPages.settings.cacheWebElements

GalenPages.settings.cacheWebElements - Boolean type. A property that is set to true by default and is used in getWebElement function of GalenPages.PageElement

// to disable caching of WebElement objects in your tests GalenPages.settings.cacheWebElements = false;

$page

$page(pageName, primaryFields, [ secondaryFields ])

Returns a function which can be used in order to instantiate the page with all of its primary and secondary fields

this.LoginPage = $page("Login page", { email: "input.email", // css locator password: "xpath: //input[@class='password']", // xpath locator submitButton: "id: submit", // id locator load: function () { this.open("http://example.com/login"); return this.waitForIt(); }, loginAs: function (userName, password) { this.email.typeText(userName); this.password.typeText(password); this.submitButton.click(); } }); // now you can use it like this var loginPage = new LoginPage(driver).load(); loginPage.loginAs("[email protected]", "password");

$list

Creates a list of components on a given page. Returns GalenPages.PageElementList object.

$list(elementConstructor, locator)

this.NoteComponent = $page("Note", { title: ".note-title", description: ".note-text" }); this.MyNotesPage = $page("My notes page", { myNotes: $list(NoteComponent, "div.notes") }); var myNotesPage = new MyNotesPage(driver); for (var i = 0; i < myNotesPage.myNotes.size(); i++) { System.out.println(myNotesPage.myNotes.get(i).title.getText()); }

$component

Creates a subpage component on a given page and copies all functions from GalenPages.PageElement to the component.

this.Popup = $page("Popup", { title: ".title", closeButton: "a.close" }); this.MyPage = $page("My page", { alertPopup: $component(Popup, "div.alert-popup") }); var myPage = new MyPage(driver); if (myPage.alertPopup.isDisplayed()) { myPage.alertPopup.closeButton.click(); myPage.alertPopup.closeButton.waitToBeHidden(); }

GalenPages.extendPage

GalenPages.extendPage( page, driver, name, primaryFields, [ secondaryFields ])

Creates an instance of GalenPages.Page and copies all its fields to the specified page. Also based on primaryFields and secondaryFields it creates page elements using GalenPages.PageElement constructor

• page - an object representing a page
• driver - an instance of WebDriver
• name - a name of a page to be used in reports
• primaryFields - a set of key/values pairs containing page elements and functions that will be in-built into the page
• secondaryFields - same as primaryFields but the elements defined inside this structure will not be used in waitForIt function

Declaration

this.LoginPage = function (driver) { GalenPages.extendPage(this, driver, "Login page", { email: "input.email", // css locator password: "xpath: //input[@class='password']", // xpath locator submitButton: "id: submit", // id locator load: function () { this.open("http://example.com/login"); return this.waitForIt(); }, loginAs: function (userName, password) { this.email.typeText(userName); this.password.typeText(password); this.submitButton.click(); } }, { // secondary fields tooltip: "div.tooltip" }); };

Usage

var loginPage = new LoginPage(driver); loginPage.loginAs("[email protected]", "test123");

GalenPages.Page

GalenPages.Page - a constructor that is used by GalenPages framework to instantiate a page.

Contains the following fields and functions:

• driver - a WebDriver instance
• waitTimeout - string type (default “10s”). A timeout that is used by waitForIt method
• waitPeriod - string type (default “1s”). A time period that is used by waitForIt method
• open - function. Takes a url as an argument and loads the specified url in current browser

myPage.open("http://example.com");

• findChild( locator ) - function. Takes a string locator as an argument and searches for a first matching element on page. Returns a WebElement or null if no elements were found on the page

var element = myPage.findChild("a.button");

• findChildren( locator ) - function. Takes a string locator as an argument and searches for all matching elements on page. Returns an array of WebElements

var elements = myPage.findChildren("a.button");

• waitForIt() - function. Waits untill all primary fields appear on page. This function should be used in case the page is dynamically built in a browser. Returns a page object

myPage.waitForIt();

• getAllLocators() - function. Returns a map of all object locators. This could be used in checkLayout function.

checkLayout({ driver: driver, spec: "homepage.gspec", tags: ["mobile"], objects: myPage.getAllLocators() });

GalenPages.PageElement

GalenPages.PageElement - a constructor that is used when GalenPages creates a page element and attaches it to the page

Contains the following fields and functions:

• name - a name of page element

• locator - a locator that is used to fetch WebElement on the page

• attribute( attrName ) - function. Takes a string argument that represents a name of HTML attribute. Returns value of specified HTML attribute

var href = myPage.submitLink.attribute("href");

• click() - function. Clicks on the page element

loginPage.submitButton.click();

• clickAt(x, y) - function. Clicks on the page element with specified offset from the top-left corner of the element

loginPage.submitButton.clickAt(10, 15);

• clear() - function. Removes the text from textfield page element

loginPage.emailTextfield.clear();

• cssValue( cssPropertyName ) - fucntion. Takes a string argument that represents a name of CSS property. Returns a value of specified CSS property

var fontWeight = myPage.submitLink.cssValue("font-weight");

• dragAndDropTo(destinationElement) - function. Drags element and drops on specified destination element

myPage.someElement.dragAndDropTo(myPage.anotherElement);

• dragByOffset(x, y) - function. Drags element to a specified offset

myPage.someElement.dragByOffset(0, 100);

• exists() - function. Return true if page element is present in DOM and false if it is missing

if (loginPage.loginButton.exists()) { // do something }

• getText() - function. Returns the text inside page element

var text = loginPage.captionLabel.getText();

• getWebElement() - function. Returns WebElement object for current page element

• hover() - function. Simulates the mouse over event and makes an element hovered

loginPage.submitButton.hover();

• isEnabled() - function. Returns true if page element is enabled and false if it is disabled

if (loginPage.emailTextfield.isEnabled()) { // do something }

• insideFrame(callback) - function. Switches context to frame, which is represent by the current page element, and executes the given callback. After callback invocation switches back to parent frame.

• isDisplayed() - function. Returns true if page element is visible on page and false if it is hidden

• selectByValue( value ) - function. Takes string argument representing a value of HTML option. This function should only be used in case the page element is a HTML select tag.

myPage.menuList.selectByValue("categories");

• selectByText( text ) - function. Takes string argument representing a text of HTML option. This function should only be used in case the page element is a HTML select tag.

myPage.menuList.selectByText("Categories");

• typeText( text ) - function. Takes a string argument. Types the specified text to the page element

loginPage.emailTextfield.typeText("[email protected]");

• waitFor(callback, messageSuffix, time) - Used in order to wait for some specific condition that is controlled by the callback.

loginPage.loginButton.waitFor(function (button) { return button.isDisplayed(); }, "button should be show", "10s"); // can also be used without message and timeout // in this case the message will be equal to page element name // and timeout will be "10s" loginPage.loginButton.waitFor(function (button) { return button.isDisplayed(); });

• waitToBeShown() - function. Takes one string argument representing a timeout (default is “10s”). Waits with specified timeout until element appears on page and becomes visible.

loginPage.loginButton.waitToBeShown("10s"); // or without timeout loginPage.loginButton.waitToBeShown();

• waitToBeHidden() - function. Takes one string argument representing a timeout (default is “10s”). Waits with specified timeout until element disappears from the page or becomes invisible.

loginPage.loginButton.waitToBeHidden("10s"); // or without timeout loginPage.loginButton.waitToBeHidden();

• waitUntilExists() - function. Takes one string argument representing a timeout (default is “10s”). Waits with specified timeout until element appears on page.

loginPage.loginButton.waitUntilExists("10s"); // or without timeout loginPage.loginButton.waitUntilExists();

• waitUntilGone() - function. Takes one string argument representing a timeout (default is “10s”). Waits with specified timeout until element disappears from page.

loginPage.loginButton.waitUntilGone("10s"); // or without timeout loginPage.loginButton.waitUntilGone();

GalenPages.PageElementList

This object type is used when the list object is declared on page via $list function.
Contains the following functions:

• get( index ) - a function that returns an element in a list at with specified index

• size() - a function that returns total amount of elements in the list on page

GalenPages.wait

A very useful function that allows to wait for multiple condition with specified timeout. It has a good error messaging in case one of conditions fails.

GalenPages.wait( settings );

• settings - a set of key/value pairs for configuring the wait component

• • time - string or number type. The timeout for wait component. A number represent milliseconds. A string is allowed in the following format: “10s” or "1m"

• • period - string or number type. The time interval with which it checks all the conditions. A number represent milliseconds. A string is allowed in the following format: “10s” or "1m"

Returns a GalenPages.Wait object that has the following function:

• untilAll() - function. Takes an argument of key/value pairs where key is a name of condition and value is a Boolean function that returns state of condition

GalenPages.wait( {time: "10s", period: "1s"}).untilAll({ "Email textfield should be shown": function () { return loginPage.emailTextfield.isDisplayed(); }, "Password textfield should be shown": function () { return loginPage.passwordTextfield.isDisplayed(); } });

GalenPages.sleep

Takes a number argument representing amount of milliseconds and sleeps the specified amount of time.

// Will sleep for one second GalenPages.sleep(1000);