SQA Learning Path: Different Locators in Selenium WebDriver

What is a locator?

Locator basically identifies a web element uniquely within the webpage. Locator can address how to interact with the specific element. Selenium uses locators to find out the specific web element within the web page.

Different Types of Locators in Selenium

id
cssSelector
name
className
tagName
linkText
partialLinkText
xpath

Using id as locator:

For example, to find out the search box we can use id=search as follows.

Selenium WebDriver with java code to find out search box using id as follows:

WebElement searchBox=driver.findElement(By.id ("search"));

For Page Object Pattern:

@FindBy(id=''search")

public WebElement searchBox;

Using cssSelector as locator:

For example, to find out search box we can use cssSelector=tagName#id as follows.

Selenium WebDriver with java code to find out search box using cssSelector as follows:

WebElement searchBox= driver.findElement(By.cssSelector("input#search"));

For Page Object Pattern:

@FindBy(cssSelector=''input#search")

public WebElement searchBox;

Using name attribute as locator:

For example, to find out search box we can use name=q as follows.

Selenium WebDriver with java code to find out search box using name attribute as follows:

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

For Page Object Pattern:

@FindBy(name=''q")

public WebElement searchBox;

Using className as locator:

For example, to find out search box we can use className=text as follows.

Selenium WebDriver with java code to find out search box using className as follows:

WebElement searchBox= driver.findElement(By.className("text"));

For Page Object Pattern:

@FindBy(className=''text")

public WebElement searchBox;

Using tagName as locator:

For example, to find out "About US" menu we can use tagName=a as follows.

Selenium WebDriver with java code to find out "ABOUT US" menu using tagName as follows:

WebElement aboutUs= driver.findElement(By.tagName("a"));

For Page Object Pattern:

@FindBy(tagName=''a")

public WebElement aboutUs;

Using linkText as locator:

For example, to find out "BLOG" link we can use linkText=Blog as follows.

Selenium WebDriver with java code to find out "Blog" link using linkText as follows:

WebElement blogLink= driver.findElement(By.linkText("Blog"));

For Page Object Pattern:

@FindBy(linkText=''Blog")

public WebElement blogLink;

Using partialLinkText as locator:

For example, to find out "ABOUT US" link we can use partialLinkText=About as follows.

Selenium WebDriver with java code to find out "ABOUT US" link using partialLinkText as follows:

WebElement aboutUsLink= driver.findElement(By.partialLinkText("About"));

For Page Object Pattern:

@FindBy(partialLinkText=''About")

public WebElement aboutUsLink;

Using xpath as locator:

In selenium there are two types of xpath.

Absolute xpath
Relative xpath

Absolute xpath: This xpath is used to find out full path from the root Element(/html/body) to the expected element. Absolute xpath begins with single forward slash(/).

For example, to find out the search box we can use absolute xpath=/html/body/div[4]/div/div[2]/ul/li[6]/form/input[2] as follows.

Selenium WebDriver with java code to find out SearchBox using absolute xpath as follows:

WebElement searchBox= driver.findElement(By.xpath("/html/body/div[4]/div/div[2]/ul/li[6]/form/input[2]"));

For Page Object Pattern:

@FindBy(xpath=''/html/body/div[4]/div/div[2]/ul/li[6]/form/input[2]")

public WebElement searchBox

Absolute xpath has a drawback. If any webElement is added or removed from HTML code in future, then the hierarchy of elements will break, as a result, absolute xpath will not function in this case. So for proper functioning need to build absolute Xpath again as per latest coding structure.

Relative xpath: This xpath starts from the anywhere of HTML DOM structure. Relative xpath begins with double forward slash (//). It can find elements anywhere on the webpage that's why relative xpath is always preferred as it is not a complete path from the root element.

For example, to find out the search box we can use relative xpath=//input[@id='search'] as follows.

Selenium WebDriver with java code to find out SearchBox using relative xpath as follows:

WebElement searchBox= driver.findElement(By.xpath("//input[@id='search']"));

For Page Object Pattern:

@FindBy(xpath=''//input[@id='search']")

public WebElement searchBox

%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22ID%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22260%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%223%22%20value%3D%22Name%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22300%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%224%22%20value%3D%22Link%20Text%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22420%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%225%22%20value%3D%22Partial%20Link%20Text%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22460%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%226%22%20value%3D%22xpath%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22540%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%227%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3BorthogonalLoop%3D1%3BjettySize%3Dauto%3Bhtml%3D1%3BexitX%3D0.5%3BexitY%3D0%3BexitDx%3D0%3BexitDy%3D0%3B%22%20edge%3D%221%22%20source%3D%228%22%20parent%3D%221%22%3E%3CmxGeometry%20relative%3D%221%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22245%22%20y%3D%22520%22%20as%3D%22targetPoint%22%2F%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%228%22%20value%3D%22CSS%20Selector%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22500%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%229%22%20value%3D%22class%20name%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22340%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%2210%22%20value%3D%22tag%20name%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22190%22%20y%3D%22380%22%20width%3D%22110%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E

SQA Learning Path

Sunday, March 19, 2017

Different Locators in Selenium WebDriver

No comments:

Post a Comment