In my last blog I talked about the more common locator types that can be used in Selenium Webdriver. In this blog I will describe when you should use CSS and XPath selectors. These more complicated, flexible tools provide greater sophistication in finding elements that you want to test.

  1. By.cssSelector

<div class=’main’>

<p>text</p>

<p>Another text</p>

</div>

Locating the element:
WebElement element = driver.findElement(By.cssSelector(“div.main”));

You will use this type of locator frequently with XPath, which is why you need to pay careful attention to this. Begin by looking here. In addition, you need to read CSS 3 specifications for selectors here.  Now you can find additional variants of use here and there. To check your own CSS and XPath locators you will need Firefox as the main browser; Firebug – an add-on for Firefox for learning elements in the DOM tree; and FirePath – a plugin for FireBug.

When you think all is hopeless, XPath will show you a way to the needed element.

  1. By.xpath

<div class=’main’>

<p>text</p>

<p>Another text</p>

</div>

Locating the element:
WebElement element = driver.findElement(By.xpath(“//div[@class=’main’]”));

This locator should be thoroughly learned because it can help in situations when other locators can’t. You can start learning at w3schools.com. Specifications can be found here. (FYI: Chapter 4 “Core function library” is very useful.) Ready variants of use are here and here.

Features of XPath:

  • You can walk around DOM tree in both directions, but this also makes it slower than other locators.
  • Not all browsers interpret XPath the same way. As mentioned before, it is slow in IE 8 and below. It is also slow in mobile browsers.
  • Both //a – from the root element and ./ – from the current element  are acceptable variants for searching from the current element. For example, element.findElement(By.xpath(“//div[@class=’main’]”)).
  • XPath is the only locator that can iterate DOM upwards. This lets you use selectors like //div[.//h5[text()=’header’]], which means that you can take div, which contains h5 with text “header.”
  • XPath allows you to take the parent element related to the current element. (Reverse visiting.) You can use a selector like //input[./parent::*/label[text()=’some label’]], which means input, parent element of which has label with text “some label”.
  • XPath is the only locator that allows you to search by partial and exact text (See example in part 6.)

XPath is possibly the most flexible locator type for finding elements on the page. It lets you make long, specific and reliable selections. However, if you don’t need the power of XPath, use something simpler and quicker.

What’s so great about this locator?

  1. It’s very flexible and it lets you find stuff that other locators can’t.
  2. Compared with XPath, it works faster.
  3. It interprets commands the same way in all browsers that fully support CSS 3.
  4. It is more elegant and simpler to understand and use than XPath. (Which is true for web-developers who use CSS more than XML.)

However, it has some disadvantages:

  1. It does not support DOM walkthrough backwards (ie: You can’t find a parent element knowing its child.)
  2. Contains() support was dropped in CSS3 (ie: You can’t find an element by text contained within.)

When you think all is hopeless, XPath will show you a way to the needed element.

  1. By.xpath

<div class=’main’>

<p>text</p>

<p>Another text</p>

</div>

Locating the element:
WebElement element = driver.findElement(By.xpath(“//div[@class=’main’]”));

 This locator should be thoroughly learned because it can help in situations when other locators can’t. You can start learning at w3schools.com. Specifications can be found here. (FYI: Chapter 4 “Core function library” is very useful.) Ready variants of use are here and here.

Features of XPath:

  • You can walk around DOM tree in both directions, but this also makes it slower than other locators.
  • Not all browsers interpret XPath the same way. As mentioned before, it is slow in IE 8 and below. It is also slow in mobile browsers.
  • Both //a – from the root element and ./ – from the current element  are acceptable variants for searching from the current element. For example, element.findElement(By.xpath(“//div[@class=’main’]”)).
  • XPath is the only locator that can iterate DOM upwards. This lets you use selectors like //div[.//h5[text()=’header’]], which means that you can take div, which contains h5 with text “header.”
  • XPath allows you to take the parent element related to the current element. (Reverse visiting.) You can use a selector like //input[./parent::*/label[text()=’some label’]], which means input, parent element of which has label with text “some label”.
  • XPath is the only locator that allows you to search by partial and exact text (See example in part 6.)

XPath is possibly the most flexible locator type for finding elements on the page. It lets you make long, specific and reliable selections. However, if you don’t need the power of XPath, use something simpler and quicker.

You may think we have come to the end on locators supported by Selenium Webdriver. Nevertheless, there is more! In my next blog you can look forward to learning about JQuery selectors.