For automation tester, identification of web elements is always a tricky task. In cross browser testing, if you are writing code, your code must be compatible with different browsers. For supporting different browsers, your defined code for identification of elements should be accurate and stable. Thus, to identify these web elements accurately and precisely we have different types of locators.
Steps: 1. Located the element by F12 key (Firebug shortcut key).
2. Hover mouse on text box.
3. Observe that on firebug console, id is displayed.
2. Locate the element by Class name:
3. Locate the element by Name:
4. Locate by Link text:
5. Locate by xpath: By hovering mouse on any element, default xpath would be displayed on Firebug.
6. Locate the element by CSS selector:
CSS Selector can be distributed in :
4. ID Class & Attribute
6. Inner string
Below example showing the CSS Selector as ID.
Partial Xpath Creation:
1. If any image file contains the source (src) ex: Profile, then below xpath will be work very easily.
2. If any image file contains the alt (src) ex: 'Visit Us On Twitter', then below xpath will be work very easily.
Ex: driver.findElement (By.tagName (“h1”));
Before you can use this Firefox add-on, you first need to install it, to do so, please follow these few basic steps:
Step 1: Open Mozilla Web-Browser.
Step 3: now, that you finished with the installation process, you will see that finding the XPath locator is one of the easiest tasks that you can do. Let’s demonstrate it.
- Open "jaingourav999.blogspot.in"
- Right click anywhere (where you want to inspect element), and observe the C# locator, java locator etc...
From the image above, you will see few different XPath’s that you can use as your element locator (When you press on one of the options, the syntax will automatically copy to your clipboard).
Locate the element by using Ancestor:
|ancestor||get all parent elements of current node|
|ancestor-or-self||get all parent elements of current node and it self also|
|attribute||get all attributes of the current node|
|child||get all child elements of current node|
|descendant||get all child elements and its child elements(grandchild) of current node|
|descendant-or-self||get all child elements and its child elements(grandchild) of current node and it self|
|following||get all elements in the html after this node|
|following-sibling||get all siblings of the current node|
|parent||get the parent of the current node|