Element Locator Types – ID, Names, XPath, CSS, and So On

Locating elements on a web page is done by using the findElement() and findElements() methods.

The findElement() method:

  • Returns a WebElement based on a given search criteria
  • Returns the first matching element
  • Throws a NoSuchElementFound exception when the element cannot be found.

The findElements() method:

  • Returns a list of WebElements based on a given search criteria
  • Returns an empty list if no elements were found

The previously mentioned search criteria consist of a set of locator types:

  • By ID: Finds elements by the value of their ID attribute. It is the most common way to identify elements on a page. However, not all elements have an ID, or they might be dynamically generated.
    Here's the syntax:
driver.findElement(By.id(<element ID>))

Here's an example:

WebElement username = driver.findElement(By.id("username"));
  • By Name: Finds elements by the value of their name attribute.
    Here's the syntax:
driver.findElement(By.name(<element name>))

Here's an example:

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

  • By Class name: Finds elements by the value of their class attribute.
    Here's the syntax:
driver.findElement(By.className(<element class>))

Here's an example:

WebElement username = driver.findElement(By.
className("username"));
  • By Tag Name: Finds elements by the value of their HTML tag. This method is not recommended if one is trying to locate a specific element on a page with multiple instances of such elements.
    Here's the syntax:
driver.findElement(By.tagName(<htmlTagName>))

Here's an example:

// Locates a table by its ID
WebElement table = driver.findElement(By.id("table"));

// Counts the row of the table by locating the <tr>
elements of the table
List<WebElement> rows = table.findElements(By.
tagName("tr"));
int totalRows = rows.size();
  • By Link Text: Finds a link by its displayed text. It returns all matching links that meet the specified text.
    Here's the syntax:
driver.findElement(By.link-Text(<linktext>))

Here's an example:

//Locates the link corresponding to the HELP option
WebElement helpLink = driver.findElement(By.
linkText("HELP"));

// Takes the URL out of the link
string link = helpLink.getAttribute("href"));
  • By Partial Link Text: Finds a link by a partial text. It is useful for links that are dynamically created. It returns all matching links that meet the specified text.
    Here's the syntax:
driver.findElement(By.partialLinkText(<linkText>))

Here's an example:

// The "Messages" link includes the number of unread
messages and it is generated dynamically
WebElement msgLink = driver.findElement(By.
partialLinkText("Messages"));

// Takes the URL out of the link
String linkText = msgLink.getText();
  • By XPath: Finds elements via XPath queries. With this method, it is possible to locate a parent element using a child element and vice versa.

Here's the syntax:

driver.findElement(By.xpath(<xpathexpresion>))

Here's an example:

// Locates an element with an absolute path
// If the structure of the HTML changes, the locator will
not find the element
WebElement email = driver.findElement(By.xpath("/html/body/
div/form/input"));

// Locates an element with a relative path assuming that
the email textbox is the first first <input> element of the
HTML page
WebElement email = driver.findElement(By.xpath("//input"));

// Locates an element using predicates assuming that the
email textbox is the third <input> element of the HTML page
WebElement email = driver.findElement(By.xpath("//
input[3]"));

// Locates an element using attributes values of an element
WebElement locatorsDiagram = driver.findElement(By.
xpath("//img[@alt='Selenium Locators Diagram']"));

// Locates an element by combining attributes values
WebElement button = driver.findElement(By.xpath("//input[@
type='submit'][@value='accept']"));

// Locates all elements that do not have an specific
attribute specified
List<WebElement> imagesWithAlt = driver.findElements(By.
xpath ("//img[not(@alt)]"));
  • By CSS Selector: Finds elements by their CSS selector.
    Here's the syntax:
driver.findElement(By.cssSelector(<selector>))

Here's an example:

/ Locates an element with an absolute path
// If the structure of the HTML changes, the locator will
not find the element
WebElement email = driver.findElement(By.cssSelector("html
body div form input"));

// Locates an element with a relative path assuming that
the email textbox is the first <input> element of the HTML
page
WebElement email = driver.findElement(By.
cssSelector("input"));

// Locates an element by its class attribute, specifying
the type of HTML tag (input) and the value of the class
attribute (accept)
WebElement acceptButton = driver.findElement(By.
cssSelector("input.accept"));

// Locates an element using the ID attribute by specifying
the type of HTML tag (input) and the value of the ID
attribute (email):
WebElement email = driver.findElement(By.
cssSelector("input#email"));

// Locates an element by the name attribute
WebElement userName = driver.findElement(By.
cssSelector("input[name=username]"));

We now have a better understanding of how to locate elements on a page using the findElement() and findElements() methods.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.29.209