Element Locators
There are several techniques we have to locate elements. I believe we will get familiar on these only
when make our hands dirty with practicing on a web page. Of course, we should have a basic knowledge on HTML, CSS and Java script before getting awareness on the following terms, in brief the ways we use to find elements are
1) Identifiers
2) Name
3) XPath alternatively click for more info
4) Link Text
5) DOM
6) CSS Selectors alternatively click for more info
Let us have a quick over-view on these terms from the following sample HTML code
In our example, to access 'Username' element we can use the following procedure in DOM
document.getElementById('userid')
Q) I have given the correct String value, but still element is not finding
A) The possible answer and I have seen is, our eyes sometimes mislead with letter '1'(one) to alphabetical letter 'l'. That is,
If the element attribute value is something like, id='1a' (read as, one a) but we may type as id='la' (read as, el a)
The other mistake is we may miss the spaces on the begin / end of an attribute, that is if id='ul ' in HTML page but we may type as id='ul', to avoid this common error we have to trim the value.
For Tip & Tricks on these element selections click on the link or click to download pdf copy. More info from an official reference link
<html>
<title> Selenium Tutorial Page</title>
<head>
<!-- script code goes here -->
</head>
<body>
<fieldset>
<p id='a' name='para'>
Username: <input type='text field' name='username' id='userid'/></br>
Password: <input type='text field' /></br>
<a href='http://seleniumbee.blogspot.com'> Submit </a>
</p>
</fieldset>
</body>
</html>
> Identifiers:
From the above code, HTML 'input' tags has an attribute called 'id' is
called as identifiers which is used to identify the text fields, i.e.,
'id' is an attribute
For ex: In Selenium, to find an element with identifiers, we will use the following code
driver.findElement(By.id("userid")); // I am assuming driver is initialized with a browser object
driver.findElement(By.id("userid")); // I am assuming driver is initialized with a browser object
> Name: Similarly, in order to find an element with 'name', we can use name attribute in the 'input' tag of html page
For ex: driver.findElement(By.name("username"));
> XPath: X-path is an easy way to find an element in the entire HTML document. The major scenarios when one has to go with X-path is,
If the desired element is not provided by either an 'id' nor 'name' attribute for a tag, then we can achieve this by using xpath absolute path or relative (parent or ancestor) to an element that has id or name
From our above HTML example, to find an element 'Username' xpath notation, we can do it in the following ways
If the desired element is not provided by either an 'id' nor 'name' attribute for a tag, then we can achieve this by using xpath absolute path or relative (parent or ancestor) to an element that has id or name
From our above HTML example, to find an element 'Username' xpath notation, we can do it in the following ways
i) driver.findElement(By.xpath("//input[@id='userid']")); // or
ii) driver.findElement(By.xpath("/html/body/fieldset/p/input[@id='userid']"));
From the above two statements, second method is called an absolute
way, which is not recommend. Whereas, the first one called a general way
of xpath usage, in xpath '//' indicates where ever in the HTML document from the root node ('html')
Now, to find 'password' field, we don't have any 'id' or 'name' attributes, in such scenario's we have to find the nearest element to password element that any one of these attributes, i.e.,
xpath: //p[@id='a']/input[2] should works.
Now, to find 'password' field, we don't have any 'id' or 'name' attributes, in such scenario's we have to find the nearest element to password element that any one of these attributes, i.e.,
xpath: //p[@id='a']/input[2] should works.
Note: Here tag 'p' has two children in it
'username' and 'password' so in order to select 'password' field we are
giving '[2]' after input tag, beacuse the result yields an array of
input elements with length two.
***
In some cases, we need to find an element by specifying two attributes
to make it unique, then we have to use the following way
//p[@id='a'][@name='para']
*** Sometimes, it happens to identify elements that contains exact text. That is, if we have two web elements, say
1) <div class="item">max_dses_and_dps_share</div>
2)<div class="item">share</div>
and now we want to identify the element that contains text as 'share' in it, then usual way to do is using contains() method of xpath,
//*[contains(text(), 'share')]
but the problem here is, we get two elements as a result. So, what if I want to get the element that has exact match on share but not part of text.?
The following ways can solve the problem
method #1) //*[text()[normalize-space(.)='share']] OR
method #2) //*[.='share']
method #1 is actually a way of trimming spaces.
*** Sometimes, it happens to identify elements that contains exact text. That is, if we have two web elements, say
1) <div class="item">max_dses_and_dps_share</div>
2)<div class="item">share</div>
and now we want to identify the element that contains text as 'share' in it, then usual way to do is using contains() method of xpath,
//*[contains(text(), 'share')]
but the problem here is, we get two elements as a result. So, what if I want to get the element that has exact match on share but not part of text.?
The following ways can solve the problem
method #1) //*[text()[normalize-space(.)='share']] OR
method #2) //*[.='share']
method #1 is actually a way of trimming spaces.
> Link Text:
is mostly used for hyper links / anchor tags with a text, in our
example 'Submit' is an anchor tag and to find this element we can use
the following way,
driver.findElement(By.linkText("Submit")); // we have an already method linkText(String) in //Selenium webdriver API
> DOM: Document Object Model, can be accessed using JavaScript. In selenium, JavaScript Executor is an interface and implemented by dependent driver classes and used to execute Javascript codedriver.findElement(By.linkText("Submit")); // we have an already method linkText(String) in //Selenium webdriver API
In our example, to access 'Username' element we can use the following procedure in DOM
document.getElementById('userid')
> CSS Selector: Cascading
Style Sheet selectors are the best and recommended way to locate
elements in the HTML document due to its quickness and can find the most
complicated objects naturally
To find, tag 'p' in our example, with attribute 'id', its that simple with three letters in CSS selector as follows
To find, tag 'p' in our example, with attribute 'id', its that simple with three letters in CSS selector as follows
driver.findElement(By.cssSelector("p#a")); //Assume driver is an initialized browser object
Question & Answers:
Since I can't predict all the possibilities of errors you are facing, so please comment your queries.
The most common error usually I see with people are presented as a question belowQuestion & Answers:
Since I can't predict all the possibilities of errors you are facing, so please comment your queries.
Q) I have given the correct String value, but still element is not finding
A) The possible answer and I have seen is, our eyes sometimes mislead with letter '1'(one) to alphabetical letter 'l'. That is,
If the element attribute value is something like, id='1a' (read as, one a) but we may type as id='la' (read as, el a)
The other mistake is we may miss the spaces on the begin / end of an attribute, that is if id='ul ' in HTML page but we may type as id='ul', to avoid this common error we have to trim the value.
For Tip & Tricks on these element selections click on the link or click to download pdf copy. More info from an official reference link
No comments:
Post a Comment