Targets / Locators
We have some options to locate a web element and those are :
- Tag and id
- Tag and class
- Tag and attribute
- Tag, attribute and class
- Inner text
Locating by Id is the easiest way of locating any element you can follow. Every element has a different or you can say unique Ids.
Target format is: id= id of the element.
For example, let us consider Gmail.
- Go to http://gmail.com, inspect the email textbox with firebug. You just need to right click on the text box and then select Inspect element with firebug.
- Once you click on Inspect element with firebug, you will be able to see a part of code in which you can find the id of the particular control.
- Now if you want to cross check, launch SIDE and in the target box enter “id=email”. Now click on find, the email text box in the web page of gmail will get highlighted. It indicates that SIDE located the element correctly.
So this is how we can find or inspect an element using id with the help of SIDE.
Name: This is almost similar to the method of finding element location by id. The only difference is that we will try to find “name” here instead of “id”.
Target format is: name = name of the element
- Go to google.com in Mozilla Firefox browser and then navigate to Gmail.com. There click on the textbox given In front of Email.
- Right click on it and select the option “Inspect Element with Firebug”.
- Once you click on this option, you will some a part of code where you can find “name=Email”.
- Now launch the SIDE, and in the target field enter “name=Email” and then click on find. When you click on Find, the text box in front of email gets highlighted. It indicates that SIDE inspected the element correctly.
- Tag and id : When css expression is written, prefix the expression with “css=”
Example: We will take the same example which is taken above for inspecting element with id. Launch Mozilla firefox, go to gmail.com and then click on the text box given in front of Email. You will get a piece of code where you will get “id=email” but here the html tag will be “input”.
- Now launch SIDE, and in the target field enter “css=input#email”. Now click on Find button, the email textbox will get highlighted.
- Tag and class
Example: css = input.inputText
Here we use a dot sign instead of using # sign. So to locate a web element we use a HTML tag and a class name.
- Launch Mozilla Firefox and go to facebook.com.
- There on Email text box, right click and inspect element with firebug. In the code you will see “class=input text” and it’s written under HTML tag “input”. So the HTML tag is “input” and class is “input text”.
- Now launch SIDE and in the target field enter “css=input.inputtext”. Click on find, the Email text box will get highlighted.
NOTE: There might be multiple elements which share the same HTML tag and name, but only the preference is given to the first one.
- Tag and Attribute : Whenever two web elements are having the same attribute and the attribute value, always first one is given preference because in the HTML source file that particular element comes first. Ex: In facebook, email element and password element contains same attribute[class=”inputtext”]. Whenever we use the css=input.inputtext, it will highlight the email textbox as it comes first in the code. To overcome this problem we go for Tag and Attribute.
Syntax : css = tagName[attributeName=attributeValue]
Ex: input [type=password]
- Launch Mozilla and go to facebook.com. Right click on Password text box and click on Inspect element with firebug.
- You will see a line of code highlighted, there would be an attribute “name” and its value is “pass”. For email and password we will find the same tag and class value, so instead of sticking to that rather we can chose an attribute with HTML tag. So here we can use “name”.
- Launch SIDE and in the target field enter “css=input[name=pass]”, click on Find. It will uniquely find the element and the password text will get highlighted.
- Tag, class, and Attribute :
Syntax : css = tagName.classValue[AttName=AttValue]
Ex : css.inputtext[type=password]
- Launch Mozilla firefox and go to facebook.com. Right click on the text box given in front of email and click on Inspect element with firebug.
- From the code, you will get tag, class, and attribute. We are considering tab index as attribute here.
- Launch SIDE and in the target field enter “css=input.inputtext[tabindex=1]”.
- Inner Text : Inner text is the actual text which HTML displays on the web page.
Syntax : css=tag.contains(“inner text”)
- Launch Mozilla firefox and go to gmail.com
- Right click on the text box given in front of the password field and then select Inspect element with firebug option.
- You can find the inner text for this in the part of the code highlighted.
XPATH : We use Xpath expression to identify a particular element in a web page. In other words, in xpath language f the tage we are writing xpath expression to identify a particular node.
Note : Before using any xpath expression, first validate whether the expression is correct or not. To do that we need to install another plug in FirePath. Also, firebug generates xpath locators immediately.
This method is complicated because you need to follow different rules in this method but using this method you can access almost any element
- Launch Mozilla firefox and go to facebook.com
- Right click on the text box given in front of Email or Phone label and select the option Inspect Element with firebug.
- A piece of code will get highlighted targeting that particular element, you just need to right click on that highlighted code and chose the option Copy xpath.
- Now launch SIDE, and enter the copied xpath in the Target field starting with an extra forward slash.
- After entering the xpath in the target field, click on the Find button, it will highlight that particular text box. It indicates that xpath is able to find the correct element.