In this article, we will discuss various locators in Selenium IDE and how to identify the elements on the page using locators.Hope this be useful step in understanding Selenium IDE locators.
Question 1: What is meant by locators in Selenium IDE?
Answer: In the previous Post about Selenium Commands, we get
to know that to execute most of the commands, we require target on which to
execute commands. The target identifies an element in web application by the
locators. Suppose there is an input box with id as username, this element in
the page will be located and identified by ‘id=username’ and then we can set
value in the input box by executing command ‘type’ on the target object
identified by locator ‘id=username’ with required value.
Question 2: What are various locator types in Selenium IDE?
Answer: The various locator types in Selenium IDE are as
follows:
a. Locating
elements by ID – an element can be identified using ‘id’ attribute if
attribute is defined for the object. Since it is assumed that attribute id will
be unique for elements if defined, hence element will be uniquely identified in
the Page using id attribute in target. E.g. ‘id=gbqfq’.
b. Locating
elements by name – if id attribute is not available, we can identify the
element using name attribute in the target. E.g. ‘name = nickel’. In case of object not identified by name locator,
we can use multiple locators like ‘name =
nickel value = core’ to uniquely identify the object.
c. Locating
elements by link text – For link object, we can identify an element using
link text in the target. e.g. ‘link
=logout’ will identify a link with text as logout.
d. Locating
elements by XPath – We can also use XPath to identify an element in the
page. XPath allows us to
query the DOM structure of the page like a XML document. For e.g. //input will
find first input box in the page and perform action on the same.
e. Locating
elements by css – Elements in the webpage can be identified using CSS selectors to find
the objects that you need. Selenium is compatible with CSS 1.0, CSS 2.0, and
CSS 3.0 selectors. Syntax for identifying an element using css is ‘css = CSS Selector’
for e.g. ‘css=input.gbqfif’ where
input is the tag name for element and gbqfif is the classname. Both xpath and
css are useful to identify elements with complex identifiers.
Question 3: How can I found the attributes and properties which define an element in the webpage?
Answer: We can identify the element
structure using different developer tools in different browsers.
Below are some of the developer tools that
help to identify objects in the page.
a. Firebug:
Firebug is a Firefox developer tool used to identify elements on the page by
using the find functionality.
b. Firefinder: It is a Firefox tool and helps
in testing XPath and CSS on the page. Highlights all elements on the page that
match the selector to your element location.
c. IE
Developer Tools: IE developer tools helps in identifying element. This is
inbuilt with IE browser and can be launched by pressing F12.
d. Google Chrome Developer Tools: This is
inbuilt in Google chrome and can be launched by Pressing F12.
Below image shows how
to identify object in google chrome browser by pressing F12.
 |
| Using developer tool to identify an object |
Question 4: Is there any specific feature in selenium IDE by which we can use the best locator to identify an element?
Answer: Yes, when
we work on an element in Firefox, selenium IDE identifies an object in various
possible ways. To understand this better, consider the google Page and search
edit box. When we type in the edit box, Selenium IDE provides various options to
uniquely identify an element as shown in the screenshot below. We can also verify
if object is correctly identified using Find Button in Selenium IDE tool. This
identification can be very useful to identify the element in Selenium Web
driver.
 |
| Selecting best fit locator for an element in Selenium IDE |
Question 5: Explain how to create XPath and CSS with some examples?
Answer: As
explained earlier, XPath and CSS can be used to identify element in webpage.
Below are some examples that show correlation between css and xpath and how to
create the same.
a. Element <El> : XPath – //El : CSS – css = El: for e.g. El can be a(for link), img(for image).
b. Element <El> with name ‘na’ : XPath – //El[@name
=’na’] : CSS – css = El[name= na]
c. Element <El> with id ‘na’: XPath – //El[@id
=’na’] : CSS – css = El#na
d. Element <El> with class ‘na’: XPath – //El[@class
=’na’] : CSS – css = El.na
No comments:
Post a Comment