GalenPages JavaScript API

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("testuser@example.com", "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("testuser@example.com", "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.size(); i++) { System.out.println(myNotesPage.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.closeButton.click(); myPage.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("testuser@example.com", "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("testuser@example.com");
  • 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);

Comments

We are moving all the discussions to Google Groups. From this moment, if you have problems with your test code or some issues with installation, please ask your questions in https://groups.google.com/forum/#!forum/galen-framework. This way more people will be able to help you.

comments powered by Disqus