Example - Create a simple UI map

Aim
This Example will demonstrate the UI Map IDE functionality against the Wordpress website on the PC.

Difficulty Level: Hard

Map Definitions File Syntax

var map = new UIMap();
map.addPageset({
name: 'aPageset'
, ... 
});
map.addElement('aPageset', { ... });
map.addElement('aPageset', { ... });
...
map.addPageset({
name: 'anotherPageset'
, ... 
});

Pre-requisites:

• Firefox browser with Selenium IDE installed ,use link How to install Selenium IDE?

Steps to Add the UI Map file in to Selenium IDE:

     1. This file has to be created as Javascript file with .js extension.
     2. Open Selenium IDE.
     3. Select Option --->Options.
     4.Under Selenium Core Extensions (user extension.js), Browse the above created UIMap.js file and click OK.
     5. Close and Open the Selenium IDE to get the UIMap file activated.
Now Try to record the your case you can find the changed element id.

What is a uimap?
UI-Element is an extension for the Selenium IDE and Remote Control that makes it possible to define a mapping between semantically meaningful names of elements on webpages, and the elements themselves. The mapping is stored in a file using JavaScript Object Notation. The file may be shared by the IDE and driven tests running via the Selenium server. It also offers a single point of update should the user interface of the application under test change.

what are the benefits of using a uimap?
* Using a centralized location for UI objects instead of having them scattered throughout the script. This makes script maintenance more efficient.
* Cryptic HTML Identifiers and names can be given more human-readable names improving the readability of test scripts.

Zip file location: ( download from here)
C:\FoundationSelenium\UIMapScript\WordpressLogin.html, C:\FoundationSelenium\UIMapScript\wordpress_ui_sample.js .

Example

In this example we are creating UI map file and saved as “wordpress_ui_sample.js”.

var map = new UIMap();

map.addPageset(
{
name: 'WordPress',
description: 'contain all elements present on WordPress',
pathRegexp: '.*'
});



map.addElement('WordPress', 
{
name: 'UserName',
description: 'Enter User name.',
locator: "id=user_login"
});

map.addElement('WordPress', 
{
name: 'Password',
description: 'Enter Password.',
locator: "id=user_pass"
});

map.addElement('WordPress',
{
name: 'LoginButton',
description: 'click button to perform Login',
locator: "id=wp-submit"
});

And also we have WordpressLogin.html file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://foundation.time2test.co.uk/" />
<title>WordpressLogin</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">WordpressLogin</td></tr>
</thead><tbody>
<tr>
 <td>open</td>
 <td>/</td>
 <td></td>
</tr>
<tr>
 <td>clickAndWait</td>
 <td>link=Log in</td>
 <td></td>
</tr>
<tr>
 <td>echo</td>
 <td>Enter Username and Password</td>
 <td></td>
</tr>
<tr>
 <td>type</td>
 <td>ui=WordPress::UserName()</td>
 <td>admin</td>
</tr>
<tr>
 <td>type</td>
 <td>ui=WordPress::Password()</td>
 <td>time4test</td>
</tr>
<tr>
 <td>clickAndWait</td>
 <td>ui=WordPress::LoginButton()</td>
 <td></td>
</tr>
<tr>
 <td>waitForElementPresent</td>
 <td>//div[@id='user_info']/p/a[2]</td>
 <td></td>
</tr>
<tr>
 <td>assertTextPresent</td>
 <td>time2test.co.uk</td>
 <td></td>
</tr>
</tbody></table>
</body>
</html>

See the attached screen shot

Helpful Video File