Selenium IDE Locators
Actually Locators lead the Selenium IDE which elements of
GUI i.e. Buttons, Text box, Checkbox etc. It required managing on. Appropriate
GUI elements identifications is pre-requisite to generate the script for
automation. But correct identification of any GUI elements is more difficult
than own sound. Some times we end up tasking with the wrong GUI elements or no
element at all! So Selenium gives the numbers of locators to precisely locate
the element of GUI.
Following are the
different types of locators:
- ID
- Name
- Link Text
- CSS Selector
-
Tag and ID
-
Tag and Class
-
Tag and Attribute
-
Tag, Class and Attributes
-
Inner Text
- Dom – Document Object Model
-
getElementById
-
getElementByName
-
dom:name
-
dom:index
- XPath
So some commands that don’t require the locator. However
mostly of them have the requirement of locators. Locator choices is the depends
on the largely on our Application Under Test.
Selenium IDE locating
by ID -: This is very commonly way
to do the locater with ID. Here ID’s are supposed to be unique for all and each
element.
Required Format:
id = id of any element
Following example will help you to understand more:-
Step1- Browse the www.facebook.com and then inspect the
phone or email text box with the help of firebug and note its ID. In such Case,
ID will be selected.
 |
| Selenium IDE Locators |
Step 2- Now just launch the Selenium IDE and input the id =
email or phone in available Target Box. Now need to click on Find button and
notice that the required box highlighted as searched yellow or selected box.
Selenium IDE located the element perfectly.
Locating by Name:
It is also the similar to locating by ID, except that we utilize the instead of
prefix ‘name=’ .
Format will be – name
= element name
Step1: Browse or Navigate any website and then utilize the
firebug to inspect the text box username. Its name attribute note need to
include.
Step2- Now Launch Selenium IDE, Input the ‘name=username’ in
the available text box and then click on find buttons. Check that required
field is highlighted and visible in yellow color.
Locating by Name with
the help of Filters:
When multiple elements have similar name then filters are
required. Filters are additional attributes used to distinguish element with
similar name.
Target Format- name=name_of_the_element
filter = value_of_filter
Following example will help us more -:
Step1- Need to login on Mercury Tours with the help of
‘Tutorial’ as the username and password. It should take us to page of Flight
Search as displayed below:
 |
| Locating by Name using Filter |
Step 2- Utilizing the Firebug, Notice that the round trip
and one way radios button have the similar name ‘trip type’. How ever they have
the dissimilar attributes values so you can utilize each of them as your
filter.
Step3- First we access the one way radio button. Click on
the editor first line.
-
Input the command “Click” in the Selenium IDE Command
Box.
-
Target Box Format-: Input the ‘Name=tripType
value=oneway” our filter portion.
Step4 - Click
on Find button and observe that Selenium IDE is able to highlight the One Way
radio button with green color – meaning that we are able to access the elements
successfully utilizing its attribute VALUE.
Step5-
Now Just Press the “X” key in available keyboard to run this click command. Notice
that the One Way radio button became selected.
Same as
above steps can be performed with Round Trip Radio button, This Time utilizing
the “name=tripType vaue=roundtrip”
as our target.
Locating by Link Text:
As it
name suggest such type of locator depends on the hyperlink text. So here we
required to access the link by prefixing the target value with “link=”.
Target
Format will be : link = link_text
Step1-
Confirm that we logged off from the Mercury Tours.
-
Go to the home page of
Mercury Tours
Step2- First
inspects the ‘RGSTER’ link. Link text will be found in between the and tags.
Step3-
Now Copy the link Text from firebug and just paste it into Selenium IDE’s
Target box. Prefix it with “link=”.
Step4-
Now Just click on the button find and you will notice that the selenium IDE was
able to highlight the link REGISTER appropriately.
Step5- To
confirm further, input the “clickAndWait” in the Command box and run it.
Selenium IDE should be capable to click on available REGISTER link successfully
and take us to the page of Registration.
Locating by CSS Selector:
CSS Selectors
have the patterns of string utilized to reecognized an element based on the
combination of HTML tag i.e. id, class, and attributes. Locating by CSS Selectors are more difficult than
the preceding functions, but it’s the most common locating strategy of the
advanced Selenium user because it can right of entry even such element that
have no name or ID.
CSS Selectors have
several formats, but you will only concentrate on the mostly common ones.
•
Tag and ID
•
Tag and class
•
Tag and attribute
•
Tag, class, and
attribute
•
Inner text
When utilizing such strategy, we need to prefix
Target box with “css=” as will be shown in the examples given below:
Locating by CSS Selector – Tag and ID
Once Again, we will
utilize the Email Text box of Facebook in example here. As we can remember
that, it has an ID of “email” and we have already accessed it in section of
“Locating by ID”. So Now in this time, we will utilize the CSS Selectors with
ID in accessing that exact similar elements.
Syntax
|
Description
|
Css = tag#id
|
|
Keep in mind that
the ID is always preceded by a hash sign (#).
Step 1. Browse the www.facebook.com. Utilizing the Firebug, inspect
the “Email or Phone” textbox.
At that points, note that
the HTML tags are “input” and it’s ID is “email”. So our syntax will be “css = input#email”.
Step
2. Input the “css = input#email” into
the Target box of Selenium IDE and click on button Find. Selenium IDE should be
capable to highlight required elements.
Locating by CSS Selector – Tag and Class
Locating via CSS
Selectors utilizing the HTML tags and the name of class are similar to
utilizing the tag and ID, but in this case, dot (.) is utilized instead of the
sign of hash.
Syntax
|
Description
|
Css = tag.class
|
|
Step 1. Browse the www.facebook.com and utilize the Firebug to
examine the “Email or Phone” textbox. Notice that its class is “inputtext” and
its HTML tag is “input”.
Step
2. From Selenium IDE, input “css =
input.inputtext” in the Target box and click on Find. Selenium IDE should be
able to identify the Phone or Email text box.
Note
that when several elements have the similar HTML tags and names, only the first
element in source code will be identified. Utilizing the Firebug, examine the Password textbox in
Facebook and notice that it has the similar name as the Phone or Email
textboxes.
So the
cause why only the Phone or Email text box was highlighted in the illustration
previously is that it comes first in page source of Facebook
Locating by CSS Selector – Tag and Attribute
Such strategy utilizes
the specific attribute and HTML tag of the elements to be accessed.
Syntax
|
Description
|
| Css = tag [attribute = value] |
|
Step 1. Browse the Registration page of Mercury Tours’ (newtours.demoaut.com/mercuryregister.php)
and examine the text box of “Last Name”. Note of its name (“lastName”) and its
HTML tag (“input” in this case).
Step
2. In Selenium IDE, Input the “css = input[name
= lastName]” in Target textbox and click on Find. Selenium IDE should be capable
to access the Last Name textbox successfully.
When
several elements have the similar HTML tags and attributes, only the first one
will be identified. This behavior is same
to locating elements utilizing the CSS selector with the similar class and tag.
Locating by CSS Selector - tag, class, and attribute
Syntax
|
Description
|
| Css = tag.class[attributee = value] |
|
Step 1. Browse the www.facebook.com and utilize the Firebug to examine
the ‘Email or Phone’ and ‘Password’ input boxes. Note down of their HTML tags,
classes, and attributes. For such examples, we will choose the attributes of
‘tabindex’.
Step
2. We will get in touch with
the ‘Phone or Email’ textbox first, thus, we will utilize the tab index value
of 1. Input the “css = input.inputtext[tabindex = 1]” in Target box of Selenium
IDE’s and click on Find. The ‘Email or Phone’ input box highlighted.
Step
3. To admission the Password input
box, simply restore the value of the tab index attributes. Input “css = input.inputtext[tabindex
= 2]” in the Target box and click on the button Find. Selenium IDE must be capable
to recognize the Password textbox successfully.
Locating by CSS Selector – inner text
As we can have noticed
that, HTML label is seldom provided id, name, or class attributes. So, how do
we utilize them? The answer is from side to side the utilize of their inner
text. Inner texts are the real patterns of string that the HTML labels
display on the pages.
Syntax
|
Description
|
Css = tag:contains(“inner
text”)
|
|
Step 1. Browse the homepage of ‘Mercury Tours’ (newtours.demoaut.com/)
and utilize the Firebug to examine the label of “Password”. Put note of its
HTML tag (which is “font” in such case) and notice that it has no name
attributes or class, id.
Step
2. Type the css =
font:contains("Password:") into Target box of Selenium IDE’s
and click on Find. Selenium IDE should be capable to access label of Password.
Step
3. This time, just replac the inner
text with “Boston” so that our Target will now
become “css = font:contains("Boston")”.
Click on Find. we should noticed that the “San Francisco
to Boston”
label visible as highlighted. This displays us that Selenium IDE can right of
entry a long label even if we just pointed to the inner text first word.
No comments:
Post a Comment