Locate Element(s)

How can an web element be located? To understand that, we need to first understand HTML, the language for creating web pages. If you are not familiar with HTML, learn it from here.

we can take a look at any web page’s source code by doing the following:
Open the page in browser and right click, then click on ‘View Page Source’, you get something like the following:

Here is a juxtaposition of a simple web page’s HTML source code and how it looks in the browser. We will use this page to explain the following concept:
DOM, xPath, Css

HTML Page Source

PartialLinkText: Any subSet of link text, such as “This is”, or “link to my blog”

But what are xpath and cssSelector?

Document Object Model (DOM)
DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

HTML DOM tree for above web page looks like the following:

DOM

All HTML web elements can be accessed through the HTML DOM.

XPath
XPath is used to find the location of any element on a webpage using HTML DOM structure.

Absolute XPath
Absolute XPath starts with the root node with a forward slash (/).
The advantage of using absolute is, it identifies the element very fast.
Disadvantage here is, if any thing goes wrong or some other tag added in between, then this path will no longer works.

Example:
absolute xpath to ‘My header’: /html/head/body/h1

Relative Xpath
A relative xpath is one where the path starts from the node of your choice – it doesn’t need to start from the root node. Relative XPath always starts with Double forward slash(//)

Example:
//body/h1
//div/a

Relative xpath has better readability since it is shorter, but will take more time in identifying the element as we specify the partial path not (exact path).

If there are multipe elements for the same path, it will select the first element that is identified

cssSelecotr
Xpath relies on the NODE tag name to locate an element. cssSelector is a combination of node tag name and its css properties. In another word, you can add adj to describe the specific node:
div.first: A div whose className is “first”

XPath and cssSelector for an element could become complicated when the web page is complicated. Luckily, all major browsers provide us this info by inspecting the element in the browser:

Just highlight the web element in the browser —-> then right-click, choose Inspect —-> right-click again
you can see the options to allow you to copy its cssSelector and xpath respectivly

Sample code to locate element


//ByClassName
driver.findElement(By.name(“blogLink”));

//By.ByCssSelector
driver.findElement(By.cssSelector(“div.demo”));

//By.ById
driver.findElement(By.id(“first”));

//By.ByLinkText
driver.findElement(By.linkText(“My link”));

//By.ByName
driver.findElement(By.name(“blogLink”));

//By.ByPartialLinkText
driver.findElement(By.partialLinkText(“link”));

//By.ByTagName
driver.findElement(By.tagName(“h1”));

//By.ByXPath
driver.findElement(By.xpath(“//div/a”));

Locate Multiple Elements
Just use findElements() method instead of .findElement()


//ByClassName
List elements = driver.findElements(By.name(“blogLink”));