In my previous post we have discussed about how to locate Xpath of web element. This contains other ways of How to Locate Web Elements In Selenium WebDriver? There are many different ways to locate web element in various browsers, some of the tools used for identification of web element locator on web browser are:
- Firebug for Firefox
- Google Developer Tool for Google chrome
- Web Inspector for safari.
Some times it’s difficult for eclipse to identify element by its xpath so it’s a good practice to identify web element by its ID because ID is much accurate as compared to class name or Xpath. So here is the different ways to identify web element.
- Class Name
- CSS Selector
- Tag Name
Method used to identify web element in eclipse is driver.findelement() inside the brackets we can assign locator of an element, you can use the syntax given below
driver.findelement(By.id(“mention ID of web element”));
How to inspect element on web page:
Now question arises that how we can inspect element or inspecting means fetching details like id, classpath or xpath of an element. For inspecting element follow the below steps:
- Open the desired web page and take muse cursor to web element
- Right click on web element and click on option “Inspect Element with Firebug”.
- A console panel will open in the half part of web page.
- Details of the particular element will be marked in blue color in console.
- For navigating to other element directly use the mouse cursor given in console.
Cursor image will look like this.
Web element can be identified by two types of xpath:
- Absolute Path:
Absolute path can be identified by a single slash “/”
- Relative Path:
Relative path is a path designed by the user and always starts with double slash “//” . It’s better to use relative path as compared to absolute path because it is more accurate than absolute path. Relative path is best to use in dynamic element, may be in next development phase xpath could be changed.
//input[@id=’ID of an element’];
Step1: Open the web page on desired browser.
Step2: Right click on web element click on inspect element.
Step3: Console will open on the same web page.
Step4: Right click on highlighted code in console-> Select option “Copy Xpath”.
Step5: Paste it in eclipse.
Follow the steps below to find id of an element:
Step1: Open the desired web page.
Step2: Right click on web element, click on option inspect element.
Step3: Console will open on the same page.
Step4: Select id from console, refer the image given below.
Inside the highlighted code in console name attribute is mentioned inside the double codes in console, copy and paste inside your code:
Syntax: driver.findElement(By.name(“element name”));
By Class Name:
Inside the highlighted class name is mentioned inside the double codes, copy and paste in eclipse:
Syntax: driver.findElement(By.classname(“class name of element”));
By CSS selector:
Right click on the highlighted code and copy CSS path and paste inside code in eclipse.
Syntax: driver.findElement(By.cssselector(“css selector”));
For example, Refer the below code:
Different approaches has been explained in the post to locate web element on the web page, Ways are different but the approach to use them are same as explained in the above post.
1. Difference between relative and absolute path could be easily identified with single or double slash.
2. To use relative path is a better approach than using absolute path, relative path is more accurate.
3. To recognize an element with its ID is commonly used because ID does not change while making changes inside the build.