Selenium webdriver uses 8 locators to find the elements on web page. The following are the list of object identifier or locators supported by selenium.
Below is the list of locators to be used when scripting.
- id- Select element with the specified @id attribute.
- Name -Select first element with the specified @name attribute.
- Linktext - Select link (anchor tag) element which contains text matching the specified link text
- Partial Linktext - Select link (anchor tag) element which contains text matching the specified partial link text
- Tag Name-Locate Element using a Tag Name .
- Class name-Locate Element using a class Name .
- Css-Select the element using css selectors. You can check here for Css examples and You can also refer W3C CSS Locators
- Xpath-Locate an element using an XPath expression.
Each locator is important and helps the programmer at different contexts. We will look at all these with examples.
Locate by ID:
The most efficient and easiest way to locate an element on a web page is By ID. IDs will be the unique on a web page which can be easily identified.
IDs are the safest and fastest locator option and should always be the first choice even when there are multiple choices, It is like an Employee Number or Account which will be unique.
`<input id="email" class="required" type="text"/>
For the above code, we can write the script as
`WebElement email_box = driver.findElement(By.id("email"));
Drawbacks:
- Some web pages have their IDs dynamically generated and are not static.
Locate by Name:
When there is no Id to use, the next locator we should look for is a name attribute.
<input name="password" class="required" type="text"/>
WebElement password_field= driver.findElement(By.name("password"));
Drawbacks:
- The name cannot be unique all the times. If there are multiple names, Selenium will always perform action on the first matching element.
Locate by Link text:
This method is extremely useful when we are dealing with links on the web pages.
<a href="http://www.counsellingguru.com/contact">Contact</a>
WebElement contact_page_link = driver.findElement(By.linkText("Contact"));
Drawbacks:
1.If there are multiple links with the same link text (such as repeated header and footer menu links), in such cases Selenium will perform action on the first matching element with link.
Locate by Partial Link text:
If we are unsure on the entire link text. we can use partial link text. For example, Contact page may have link like contact or contact us. In this case, we can use contact as our partial link text. Because that is going to be there for sure. Even if the link text is contact us. It will work.
<a href="http://www.counsellingguru.com/contact">Contact Us</a>
WebElement contact_page_link = driver.findElement(By.PartialLinkText("Contact"));
Locating an Element By Class Name:
WebElement search_box =driver.findElement(By.className(“gbqfif”));
Locating an Element By TagName:
This is useful when dealing with group elements like drop down, checkboxes.
Select select = new Select(driver.findElement(By.tagName("select")));
select.selectByVisibleText("November");
Locating an Element By xpath
According to W3 schools, Xpath is a syntax for defining parts of an XML document. Each and every web element will have its associated xml path. We can find the element using that path also. We don't need to know much deeper about xpath. Just keep this in mind. Xpath is like a map on where the element is located in that browser window.
There are three different ways in passing anxpath.
- Xpath: attributes
- Xpath:Relative
- Xpath:position
Let's get a better picture with an example
<html>
<body>
<form id="loginForm">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="continue" type="submit" value="Login" />
<input name="continue" type="button" value="Clear" />
</form></body></html>
Way 1:XPath: Attributes
//input [@name='username']
driver.findElement(By.xpath("//input [@name='username']")).clear ();
driver.findElement(By.xpath("//input [@name='username']")).sendKeys("Agni");
Way 2:XPath: Relative
//form[@id='loginForm']/input
driver.findElement(By.xpath("//form [@id='loginForm']/input")).clear ();
driver.findElement(By.xpath("//form[@id='loginForm']/input")).sendKeys("Agni");
Way 3:XPath: position
//input
driver.findElement(By.xpath("//input")).clear();
driver.findElement(By.xpath("//input")).sendKeys("Agni");
Teaching how to write xpath is not the scope of this tutorial. Below is the easy way to get the xpath of any element.
Inspect Element->Right click on the highlighted part->copy->copy xpath
One better way is to inspect the element and copy the xpath directly to avoid syntactical mistakes as given in the below picture.
CSS selectors
I'm not going to explain this now. We will cover this in the later part. Once you have some better understanding. This is not needed as of now.