Taming Selenium Locators

Are you just getting started with Selenium and having trouble with Selenium locators?  Or are you an experienced Selenium user having maintenance issues such as brittle tests with your automated scripts due to poor locators?

In this post, I’ll share a few techniques that I use when working with Selenium locators that will hopefully help you, regardless of your experience with Selenium. Specifically, I’ll discuss how to get all the locators for a web element and test them to help you construct reliable locators. This will greatly reduce script maintenance down the road.

Selenium uses what it calls locators to find and match the elements of a webpage that it needs to interact with. Locators are unique identifiers for one or more web elements on a webpage. Selenium offers several strategies to locate web elements: Id, Class Name, Tag Name, Name, Link Text, Partial Link Text, CSS, XPATH, and JavaScript.

Selecting a strategy for locating elements

I usually use the precedence of CSS, Id, Name, and lastly XPATH in deciding a locator strategy to use.

I prefer to start with the CSS locator strategy because I consider it the most reliable. It’s also faster than the XPATH strategy, and CSS will withstand mark-up changes. The only downside I find to CSS locators is that they tend to be more complex than an Id locator. This is because they can contain complex patterns matching syntax. Another consideration when using CSS is that not all browsers render CSS the same. You need to keep this in mind if you’re building scripts designed for multiple browsers, to save you headaches in the future. The fastest way is by Id, but in most cases you don’t have an Id, or the Id is dynamic.

I recommend using tools such as Selenium IDE or Selenium Builder to make the process of getting locators easier. These very powerful, free Firefox extensions are helpful when developing automated Selenium tests. By using these tools, you can easily generate locators or use the “find” functionality to test locators that you’ve already been using in your existing automated tests.

Selenium IDE:

Selenium IDE is a complete IDE built as a Firefox extension. You can record Selenium scripts, as well as build and edit suites of tests using this tool. A cool  Selenium IDE feature is the ability to export recorded tests into a plethora of programming languages such as Java, Ruby, and Python etc. For more information on Selenium IDE, check this out.

For our purposes, we’re most interested in the “recording” functionality that gives us access to locators.

I use this tool to find all available locators on a given element. It’s easy to use – all you do is go to the webpage you’re automating, load the Selenium IDE, and press “record”.  Once you’re done, just click all the targets and select the CSS locator if available.

Here’s an example using Selenium IDE:

1. In Firefox, click Tools -> Selenium IDE
2. Go to http://www.google.com and in Selenium IDE, click the “record” button (the red circle in the top right-hand corner).
3. Enter “selenium” into the search field and press the return key- the target options listed include just about all the locators available for a given element. Now, you have a valid CSS locator to use in your test. In Selenium 2, this translates to “driver.findElement(By.cssSelector(“#gbqfq”))” where #gbqfq is the locator.

TIP: You can set the precedence of the default locator by going to Options -> Options – > Locator Builders and setting CSS to the first option.

Selenium Builder

Selenium Builder is an up-and-coming Selenium IDE replacement. Its UI is very different, but it has the same features as Selenium IDE, with a few nice enhancements including:

• The ability to run recorded scripts against a remote Selenium server
• Native Selenium 1 and 2 recording capabilities
• The ability to convert between versions while recording – very helpful if your framework supports both versions.

Selenium Builder Example:

1. Go to http://www.google.com, right-click the background, and click “Launch Selenium Builder” or click Tools -> Launch Selenium Builder
2. Click the “Selenium 2” button
3. Enter “selenium” into the search field and press the return key. The script is now recorded.
4. Click the “locator” link in the script and you’ll be presented with a select box and suggested alternatives.
5. Select “CSS” and click OK.

I prefer Selenium IDE over Selenium Builder because it’s a more mature application and suits all my needs. I found the Selenium Builder UI to be a little peculiar when modifying locator types. Another feature of Selenium IDE I like is the “find” feature, which allows me to modify the locator and test it. I’m still experimenting with Selenium Builder, so the “modify” feature may be there. I just haven’t found it yet.

As you can see, Selenium IDE and Selenium Builder are very powerful tools when it comes to writing automated UI tests. These are tools I use on a daily basis and share with my colleagues to ensure that I have the best possible selector that’s as reliable as possible and reduce script maintenance over the long haul. I recommend looking into these tools as they have a ton features that will help you.

What is your experience with Selenium locators? Share your tips and questions here.