How to Locate UI Elements (WebElements) in Selenium

To Locate UI elements in Selenium each of the language bindings expose a “Find Element” and “Find Elements” method. The first returns a WebElement object otherwise it throws an exception. The latter returns a list of WebElements, it can return an empty list if no DOM elements match the query.

Following are the list of ways by which you can locate UI elements in selenium

This is the most efficient and preferred way to locate an element. Common issue with this is that the id’s are not unique on a page or is auto-generated. Both this should be avoided. A class on an html element is more appropriate than an auto-generated id.

Example:

<input id="searchText" type="text" name="q" value="" maxlength="256" placeholder=""></input>

WebElement element = driver.findElement(By.id("searchText "));

“Class” in this case refers to the attribute on the DOM element. Often in practical use there are many DOM elements with the same class name, thus finding multiple elements becomes the more practical option over finding the first element.

Example:

<div><span>Cheddar</span></div><div class="xyz"><span>Gouda</span></div>

List<WebElement> xyz = driver.findElements(By.className("xyz"));

Note: you can use class name to find single element also, if the className attribute is unique.

The DOM Tag Name of the element.

 

Find the input element with matching name attribute.

Example:

<input id="searchText" type="text" name="q" value="" maxlength="256" placeholder=""></input>

WebElement search = driver.findElement(By.name("q"));

Find the link element with matching visible text.

Example:

<a href="http://www.google.com/search?q=selenium">Selenium</a>

WebElement linktext = driver.findElement(By.linkText("Selenium "));

 

Like the name implies it is a locator strategy by css. Native browser support is used by default, so refer to w3c css selectors <http://www.w3.org/TR/CSS/#selectors> for a list of generally available css selectors.

Beware that not all browsersare equal, some css that might work in one version may not work in another.

At a high level, WebDriver uses a browser’s native XPath capabilities wherever possible. This should be used very carefully and should be the last resort. HtmlUnit driver and IE uses lower case where as Firefox is case sensitive.

Example:

<input type="text" name="example" /> 
<INPUT type="text" name="other" />

List<WebElement> inputs = driver.findElements(By.xpath("//input"));

You can execute arbitrary javascript to locate UI elements and as long as you return a DOM Element, it will be automatically converted to a WebElement object.

Example – Finding all the input elements to the every label on a page

List<WebElement> labels = driver.findElements(By.tagName("label"));

List<WebElement> inputs = (List<WebElement>) ((JavascriptExecutor)driver).executeScript("var labels = arguments[0], inputs = []; for (var i=0; i < labels.length; i++){" + "inputs.push(document.getElementById(labels[i].getAttribute('for'))); } return inputs;", labels);