Overview

Creating custom locator strategy for Selenium

1 Comment

In Selenium you are able to locate the HTML-elements in different ways. Detailed informations about this topic are available here. Per default Selenium uses the id-Locator, when no explicit locator prefix is defined. In my project we have the requirement to locate the elements by the label text, because the id- and name-attributes are generated. The goal of the custom locator is to get the value from the id-attribute of the following field:

<label for="IDGEN123456789">Foo-Label</label> 
<input id="IDGEN123456789" value="test"/>


Daniel has already written a great article about some tipps and tricks using locators and similar topics in this theme. In this blog post I want to show how you can add your own location strategy to Selenium. The main reason for me was, that XPath-expressions in test cases are not very maintainable and I normally don’t want to see something like this in a test case to locate an element:

xpath=//label[contains(.,'Foo-Label')]/@for

I don’t want to start a discussion here between using CSS or XPath as location techniques. In this example we are using XPath. After some research I found this useful user-extension. That’s nearly all that we need to locate the elements. But lets start at the beginning.

Creating the locator strategy for Selenium

First, you have to create a JavaScript-File (user-extension.js) which contains the location strategy:

PageBot.prototype.locateElementByLabelText = function(labelText, inDocument) {
[...]
}

The prefix is very important, because all locateElementBy* methods are added as locator-strategies. For the source code please have a look at this page.

To use it in your Selenium tests you have to add this user-extension.js-File to the Server:

java -cp selenium-server-standalone-2.16.1.jar org.openqa.selenium.server.SeleniumServer -port 4455 -singlewindow -userExtensions "user-extensions.js"

After these steps you are able to use the new expression in your test case:

labeltext=Foo-Label

Selenium IDE

But It would also be very cool, when it would be possible to use this locator in the Selenium IDE. No problem 🙂 For this feature the implementation of a LocatorBuilder is needed:

LocatorBuilders.add('labeltext', function(e) {
		if (e.id) {
			var locator = "xpath=" + "//" + "label[@for='" + e.id +"']" + "/span/text()";
			var label = this.findElement(locator);
			return "labeltext=" + label.textContent;
		}
		return null;
	});

When you want to use the locator as the default strategy add following line to the script:

LocatorBuilders.order = ['labeltext', 'id', 'link', 'name', 'dom:name', 'xpath:link', 'xpath:img', 'xpath:attributes', 'xpath:href', 'dom:index', 'xpath:position'];

The above scripts should be saved in a separate file (e.g. user-extension-ide.js), because it is only needed in the Selenium IDE.

Installation in Selenium IDE

Just add the scripts in the options menu like on the following screenshot.

Usage

Andreas gives you here some tipps about debugging XPath and CSS locators. In this screencast he shows also the usage of the “Find”-Button to locate elements. When you have installed the scripts above, then you are able to use this useful feature also with the new locator “labeltext=”

In combination with the Selenium IDE Extension for Robot Framework it is possible to record the test cases and export it into a readable format:

Select From List  labeltext=Label1  Test
Input Text  labeltext=Label2  AnotherValue
Textfield Should Contain  labeltext=Label3  Test

The source code of this example is available on Github.

Kommentare

Comment

Your email address will not be published. Required fields are marked *