Selenium selectors

Sometimes I hear from developers and testers that using Selenium is difficult in use and maintanance and the code is not self-explanatory due to complicated way of selecting items like in this example:

selenium.click("//div[2]/div/div[2]/div[2]/form/div/div[3]/a[1]/span/span/span/span");

Where does it come from. It's produced by tool like SeleniumIDE or XPath Checker plugin. You point element on the web page and tool shows full XPath through DOM.

The point is that if you want to have easy in maintenance, readable code, you can not rely on generated code only. You need to look at it and simplify or minimize.

In case of these horrible XPath, there are few solutions:

  • First and the most obvious is to optimize the XPath using selectors like @ for attribute and in this example we will have //div[@class='formNav']//span[@class='brc' and text()='Export']. For reference to XPath syntax and operators you can visit http://www.w3schools.com/xpath/
  • Second solution is to use different selector. Selenium API offers quite a few options

Element Locators

The format of a locator is:  locatorType=argument

Selenium API supports the following strategies for locating elements:

  • identifier=id: Select the element with the specified @id attribute. If no match is found, select the first element whose @name attribute is id. (This is normally the default; see below.)
  • id=id: Select the element with the specified @id attribute.
  • name=name: Select the first element with the specified @name attribute.
  • dom=javascriptExpression: Find an element by evaluating the specified string. This allows you to traverse the HTML Document Object Model using JavaScript. Note that you must not return a value in this string; simply make it the last expression in the block.
  • xpath=xpathExpression: Locate an element using an XPath expression.
  • link=textPattern: Select the link (anchor) element which contains text matching the specified pattern.
  • css=cssSelectorSyntax: Select the element using css selectors. Please refer to CSS2 selectors, CSS3 selectors for more information. You can also check the TestCssLocators test in the selenium test suite for an example of usage, which is included in the downloaded selenium core package.

Without an explicit locator prefix, Selenium uses the following default strategies:

  • dom, for locators starting with "document."
  • xpath, for locators starting with "//"
  • identifier, otherwise

 

For full description and examples of use you can check JavaDoc published here http://release.seleniumhq.org/selenium-remote-control/0.9.2/doc/java/com/thoughtworks/selenium/Selenium.html

As you can see we have quite a few possibilities. How does it apply to our example?

Now we can do selenium.click("css=div.formNav > :first-child span.brc"); or css=div:contains("Click here") or simply just selenium.click("link=Export");

As you can see we can make Selenium selectors much easier, shorter and more readable just by using all possibilities given by API and some common sense.