UI Map

From STIQ

Contents 1 Description 2 Usage 3 Caveats 4 Alternatives 4.1 FitNesse Variable example 4.2 UI Map example

Description

You can use JSON notation in the ui-map.js file to map more readable locators to less readable ones.

In addition to increased readability, your tests will be less fragile if you use this technique because the UI Map locators act as a kind of globally available Fascade. When your UI changes, you make changes to the Map, which all tests using the "ui" locators inherit (much like variables; see Alternatives below).

Usage

Edit the ui-map.js file in \repository\extensions to map JSON identifiers to more complex and less readable locators (e.g., XPATH).

For example, use this UI Map:

var uiMap = {
    "TicTacToe": { 
        "title": '//table/tbody/tr/td[2]/h1',
	"copyright": '//div/p', 
	"headings": { 
	    "player": '//table/tbody/tr/td[2]/table/tbody/tr/th[1]', 
	    "first": '//table/tbody/tr/td[2]/table/tbody/tr/th[2]', 
	    "type": '//table/tbody/tr/td[2]/table/tbody/tr/th[3]', 
	    "wins": '//table/tbody/tr/td[2]/table/tbody/tr/th[4]', 
	    "record": '//table/tbody/tr/td[2]/table/tbody/tr/th[5]'
	}
    }
};

to locate elements in STIQ's Tic-Tac-Toe tutorial application with the "ui" locator type:

| assertText | ui=TicTacToe.title | Tic-Tac-Toe |

Caveats

The ui-map.js script file is loaded when STIQ loads, so any error in the file will cause an exception to be thrown by the browser parsing it. It is recommended that you make small changes to the ui-map.js file, save it, and then reload STIQ (F5) to verify the map is correctly formatted.

Alternatives

You can also use FitNesse variables to approach the same result.

The UI Map technique has the following advantages:

• The locator is more "human readable" when rendered on the page
• The JSON implementation (hierarchical "namespaces") provides implicit organizational structure and "coding standard" support
• All locators are in one place (it is also possible to do this with FitNesse variables if they are all on a single page; e.g., ProjectRoot).

The FitNesse variable technique has the following advantages:

• Variable definitions can be viewed and edited in STIQ (a UI Map editing feature is in the works, however)

FitNesse Variable example

This "source":

!define TicTacToe_headings_player {//table/tbody/tr/td[2]/table/tbody/tr/th[1]}

| assertText | ${TicTacToe_headings_player} | Player |

is rendered thus:

TicTacToe_headings_player=//table/tbody/tr/td[2]/table/tbody/tr/th[1]

| assertText | //table/tbody/tr/td[2]/table/tbody/tr/th[1] | Player |

UI Map example

The "source" is the same as the rendered result; using the locators in the UI Map defined above (Usage), we would have:

 | assertText | ui=TicTacToe.headings.player | Player |