Skip to main content

You are here

Various ways to locate an element on a page

These are the various way to locate or find elements on a page. I made the compilation from the SeleniumHQ website. Very handy snippets for the office.

By ID
====

This is the most efficient and preferred way to locate an element. Common pitfalls that UI developers make is having non-unique id’s on a page or auto-generating the id, both should be avoided. A class on an html element is more appropriate than an auto-generated id.
Example of how to find an element that looks like this:
<div id="firstname">...</div>

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

By Class Name
===========

“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 of how to find an element that looks like this:

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

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

By Tag Name
==========

The DOM Tag Name of the element.
Example of how to find an element that looks like this:

<iframe src="..."></iframe>

WebElement frame = driver.findElement(By.tagName("iframe"));

By Name
=======

Find the input element with matching name attribute.
Example of how to find an element that looks like this:

<input name="cheese" type="text"/>

WebElement cheese = driver.findElement(By.name("cheese"));

By Link Text
=========

Find the link element with matching visible text.
Example of how to find an element that looks like this:
<a href="http://www.google.com/search?q=cheese">cheese</a>>[/codefilter_code]

WebElement cheese = driver.findElement(By.linkText("cheese"));

By Partial Link Text
==============

Find the link element with partial matching visible text.
Example of how to find an element that looks like this:
<a href="http://www.google.com/search?q=cheese">search for cheese</a>>

WebElement cheese = driver.findElement(By.partialLinkText("cheese"));

By CSS
======

Like the name implies it is a locator strategy by css. Native browser support is used by default, so please refer to w3c css selectors for a list of generally available css selectors. If a browser does not have native support for css queries, then Sizzle is used. IE 6,7 and FF3.0 currently use Sizzle as the css query engine.

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

Example of to find the cheese below:
<div id="food"><span class="dairy">milk</span><span class="dairy aged">cheese</span></div>

WebElement cheese = driver.findElement(By.cssSelector("#food span.dairy.aged"));

By XPATH
=======

At a high level, WebDriver uses a browser’s native XPath capabilities wherever possible. On those browsers that don’t have native XPath support, we have provided our own implementation. This can lead to some unexpected behaviour unless you are aware of the differences in the various xpath engines.

This is a little abstract, so for the following piece of HTML:
<input type="text" name="example" /> <INPUT type="text" name="other" />

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

Tags: 

Category: 

Language: 

0
No votes yet

Add new comment

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Disclaimer

Note that the codes and ideas expressed on this site are the authors personal views. The content of this website are the personal notes based on the learning experience of the author. The author will not be responsible for any error or damages resulting from you using the content of this website.

Premium Drupal Themes by Adaptivethemes