Problem
By making an UI-element repository we can make a mapping between semantically meaningful names of elements on the web pages and the elements themselves. We can define this mapping using JSON (JavaScript Object Notation). We can use this JSON file in Selenium IDE. It makes your tests less brittle as we have a single point of update. In this recipe we will see how to define the UI-map.
Prerequisites
We have to create a new text file with notepad and store it as, uimap.js
Solution
-
We have to initialize a new UIMap object, using the following code:
var map = new UIMap(); -
Now we can add pagesets, which can define a set of pages that share a set of common page elements. A pageset can have the following attributes:
| Attribute | Mandatory | Description |
| name | Yes | The name of the pageset, This should be unique within the UIMap. |
| description | Yes | Description of the pageset. It could give you an idea of what UI-elements the pageset will have. |
| pagePrefix | No | The path of the URL which indicates the prefix for a certain page. |
| paths pathRegexp | Yes | A string or array with regular expressions. |
| paramRegexps | No | A mapping from URL parameter names to regular expression strings which must match their values. |
| pageContent | Conditional | A function that tests whether a page, represented by its document object, is contained in the pageset, and returns true if this is the case. |
We can define a pageset using the following code:
myMap.addPageset({
name : 'SignInPage',
description : 'Sign in page',
pathRegexp : '.*'
});
1 2 3 4 5 |
myMap.addPageset({
name : 'SignInPage',
description : 'Sign in page',
pathRegexp : '.*'
});
|
- Finally we can add UI-elements. They can exist of multiple attributes, the most common attributes are listed in the table below.
| Attribute | Mandatory | Description |
| name | Yes | Name of the element |
| description | Yes | Description of the element. This is used for documentation purposes. |
| args | No | A list of arguments that will modify the getLocator() method. |
| locator getLocator | Yes | Either a fixed locator string, or a function that returns a locator string given a set of arguments. |
- We can define a single UI-element using the following code:
myMap.addElement('SignInPage', {
name : 'UserNameTextBox',
description : 'UserName Text Box',
locator : "ctl00_mainContentPlaceHolder_txt_LoginName"
});
1 2 3 4 5 |
myMap.addElement('SignInPage', {
name : 'UserNameTextBox',
description : 'UserName Text Box',
locator : "ctl00_mainContentPlaceHolder_txt_LoginName"
});
|