In this article, Novatesting would like to show you the way to determine locators of the elements on a website.
Locating elements in Selenium WebDriver is done with the help of findElement()
| Locator Type | Java Syntax | Explanation |
|---|---|---|
| ID | driver.findElement(By.id("element_id")) | Locates elements with a matching “id” attribute value. |
| Name | driver.findElement(By.name("element_name")) | Locates elements with a matching “name” attribute value. |
| Class Name | driver.findElement(By.className("element_class_name")) | Locates elements with a matching “class” attribute value. |
| Tag Name | driver.findElement(By.tagName("element_tag_name")) | Locates elements with a matching tag name. |
| Link Text | driver.findElement(By.linkText("element_link_text")) | Locates anchor elements whose visible text matches the search value. |
| Partial Link Text | driver.findElement(By.partialLinkText("element_partial_link_text")) | Locates anchor elements whose visible text contains the search value. |
| CSS Selector | driver.findElement(By.cssSelector("element_css_selector")) | Locates elements matching a CSS selector. |
| XPath | driver.findElement(By.xpath("element_xpath")) | Locates elements matching an XPath expression. |
Note: driver is an instance of the WebDriver class, and By is the class that provides methods for locating elements.
WHAT IS A LOCATOR?
A locator is a mechanism to identify and locate an element on a webpage for the purpose of automation testing or web scraping. In other words, a locator is an address that specifies the location of a web element such as a button, text box, or image, within the HTML code of a webpage. Locator helps to distinguish UI objects on the software that we need to test.
WAYS TO GET A LOCATOR
- By ID: The most reliable and preferred way to locate an element is by its ID. For example,
<div id="myId">This is my element</div>. The locator would be#myId - By Class name: To locate elements by class name, use a
.followed by the class name. For example,<div class="myClass">This is my element</div>. The locator would be.myClass - By Name: To locate elements by their name attribute, use the locator
[name='value']. For example,<input name="username">The locator would be[name="username"] - By Tag name: To locate elements by their HTML tag name, simply use the tag name. For example,
<a>Link</a>The locator would be`a` - By Link text: To locate anchor elements by their visible text, use
a:linkText. For example,<a>Link</a>The locator would bea:linkText("Link") - By Partial Link text: Similar to link text, but partial match is allowed. Use
a:partialLinkText. For example,<a>Partial Link</a>. The locator would bea:partialLinkText("Partial") - By XPath: XPath is a language that can be used to navigate XML documents, including (among other things) most HTML documents. For example,
//input[@name='username']would locate aninputelement with anameattribute of"username". - By CSS Selector:
– ID: To locate an element by its ID, use the following syntax: #id. For example, if the HTML code of the element is <div id=”myId”>This is my element</div>, the CSS selector would be #myId.
– Class name: To locate elements by class name, use the following syntax: .className. For example, if the HTML code of the element is <div class=”myClass”>This is my element</div>, the CSS selector would be .myClass.
– Tag name: To locate elements by their HTML tag name, use the tag name. For example, if the HTML code of the element is <a>Link</a>, the CSS selector would be a.
– Attribute: To locate elements by their attributes, use the following syntax: [attribute=’value’]. For example, if the HTML code of the element is <input name=”username”>, the CSS selector would be input[name=’username’].
– Descendant: To locate elements that are descendants of another element, use the following syntax: parentElement childElement. For example, if the HTML code is <div class=”parent”><span class=”child”>Child Element</span></div>, the CSS selector would be .parent .child.
EXAMPLE OF GETTING THE LOCATOR FOR AN ELEMENT
Here is an example of how you can get the locator for an element on a Java website using Selenium WebDriver:
- First, open the website in a browser and inspect the element you want to locate.
- Look for the HTML code of the element you want to locate.
- Identify the locator that can uniquely identify the element. For example, you could use the ID of the element, or the class name, or the tag name, or an attribute such as name or type, etc.
- Create a WebDriver instance and navigate to the website using the
get()method. - Use the
findElement()method to locate the element using the locator you have identified. For example, if the locator is the ID of the element, you could use the following code:
java
WebDriver driver = new ChromeDriver();
driver.get("https://www.example.com");
WebElement element = driver.findElement(By.id("elementId"));
Note: In the above example, By.id("elementId") specifies the locator type (ID) and the value of the ID (elementId). Similarly, you can use different locator types such as By.className, By.name, By.tagName, etc. to locate elements.
In conclusion, the ability to accurately locate web elements on a website is crucial for automation testing. There are several ways to get the locator of an element, including using its ID, class name, tag name, attributes, or CSS selector. The choice of the locator depends on the structure of the HTML code of the element and the requirement to uniquely identify it. Using the right locator in automation testing tools like Selenium can ensure that the correct element is interacted with and actions like clicking, typing, or extracting data are performed accurately. It is important to inspect the HTML code of the element and choose the appropriate locator to ensure successful automation testing.