How to Locate Web Elements in an HTML Document – Selenium IDE
There are basically 5 ways to locate web elements in an
HTML Page. You can select the web elements which you believe are unique and
won’t get affected by changed in the code. Below are the methods you can use:
1. By
ID
2. By
Name
3. By
Link
4. By
XPATH
5. By
CSS
Let’s discuss these one by one in detail
1.
Locating
Web Elements by ID
Let us take an example of an
HTML login form, where there are two entries and we aim to fill them using
Selenium code.
Below is Snippet of code
(Note: the code is just for understanding, syntax may be incorrect)
…………..
……………..
<form id=”loginForm”>
<input
id=”u1” name=”username” type=”txt” />
<input
id=”p1” name=”password” type=”password” />
………………
………………..
So, here we see that the
username box has id = u1 and password box has id =p1.
If the username you want to
populate is abcd1234, the selenium code for this will look like:
Command
|
Target
|
Value
|
type
|
id=u1
|
abcd1234
|
Note here that, in target:
·
There are no quotes
·
And the value is case sensitive
If you are not sure that you have identified the id
correctly, you can use find button after entering the values in Selenium IDE,
if the box highlights, you are right, else you many need to have another look
at the code.
Here, it is easy to identify the ID’s in small codes, but
how can you identify code in huge websites?
Well, there is a plugin to your service: FIREBUG
Once installed, click on the element, right click and
click on ‘inspect using Firebug’
Now, in some cases, the tags might not have any ID. Then
what do you do? We have other ways too J.
In the previous example, we used ID to locate a web
element. But what if the web element does not have an ID alike in the below
snippet of code?
…………..
……………..
<form id=”loginForm”>
<input
name=”password” type=”password” />
………………
………………..
So here, we will use name as an identifier to locate the
password box. Considering the password to be entered is qwerty1234, the selenium code will look like:
Command
|
Target
|
Value
|
type
|
name=password
|
qwerty1234
|
Note here that, in target:
·
There are no quotes
·
And the value is case sensitive
Now, let’s take a look at another piece of code:
…………..
……………..
<form id=”loginForm”>
<input
id=”u1” name=”username” type=”txt” value=”abc”/>
<input
name=”username” type=”password” value=”xyz” />
………………
………………..
If you notice, in the above code, both input tags have
same name i.e. username. So if we use the below code, Selenium will by default
select the first occurrence of element with name=username
Command
|
Target
|
Value
|
type
|
name=username
|
qwerty1234
|
In Such cases we need to have a workaround, which can be
done in one of the below 2 ways
a) By
Filtering:
Command
|
Target
|
Value
|
type
|
name=username value=xyz
|
qwerty1234
|
b) Using
Index
Command
|
Target
|
Value
|
type
|
name=username index=1
|
qwerty1234
|
Note: value of index starts
with 0, so here 1 is used.
3.
Locating
Web element by Link
Let us observe the below code. You will observe that
there is no ID or Name, in this case we can use link to locate the web element
<a
href="login.php">Login</a>
<a
href="control-panel.php">Control Panel</a>
If you want to locate Login link, the code will be as
below:
Command
|
Target
|
Value
|
type
|
link=Login
|
This method is not recommended, however you may use it if
you know that the text for the hyperlink is not dynamic or is likely to change
frequently.
4.
Locating
Web element by XPATH
Consider the below table. Now what do we do if we want to
locate Product 1
Product 1
|
10
|
|
Product 2
|
||
Product 3
|
Snippet of code is as below:
………….
………………
<body>
<table>
<tbody>
<tr>
<th></th>
</tr>
<tr style=”bg-color:transparent”>
<td style=”
bg-color:transparent”>Product1</td>
<td>10</td>
……………….
……………….
Her in this case, we don’t have ID, NAME, LINK, so XPATH
is what helps us here. XPATH is what helps us navigate a XML Document.
So the XPATH here is:
XPATH=\html\body\table\tbody\tr[2]\td[1]
So the Selenium code looks like:
Command
|
Target
|
Value
|
click
|
Xpath=/html/body/table/tbody/tr[2]/td[1]
|
The benefit of using this method is that it allows us to
use functions (will discuss later), which makes the code more reliable.
If you are having difficulty in understanding the XPATH,
there is a FIREPATH plugin which will help you.
Let us consider some examples:
Example 1
1. <AAA>
2. <BBB/>
3. <CCC/>
4. <BBB/>
5. <BBB/>
6. <DDD>
7. <BBB/>
8. </DDD>
9. <CCC/>
10. </AAA>
In the above code if we mention XPATH=/AAA, our code will
select the complete XML document.
Question: What would be the code if we want to select
element in Line 7?
Answer: XPATH=/AAA/DDD/BBB
Example 2
1. <AAA>
2. <BBB/>
3. <BBB/>
4. <BBB/>
5. <BBB/>
6. </AAA>
Question: How to identify
element in Line 5?
Answer: /AAA/BBB[4]
Or what XPATH allows us to use is functions, so the code
can be re-written as:
/AAA/BBB[last()]
Here, last() functions helps us , if the list in above
example is dynamic and we always need to click on last element.
Or you can simply write
//BBB[4]
Example 3
…………..
……………..
<form id=”loginForm”>
<input
id=”u1” name=”username” type=”txt” />
<input
id=”p1” name=”password” type=”password” />
………………
………………..
Question: How do you locate
password element using XPATH?
Answer:
XPATH=//input[@type=’password’]
So the standard is:
XPATH=
//element-name[@attribute-name=’value’]
Or
XPATH= //*[@attribute-name=’value’]
Example 4 – Elements with Dynamic Values
Consider the below example where id attribute has dynamic
value (i.e. with each refresh the value (part of value) changes)
<input type=”button”
id=”submit_123” value=”Login”>
Here the code will be
XPATH=//input[@id=’submit_123’]
In the above example code, if you refresh the id may look
like
<input type=”button”
id=”submit_456” value=”Login”>
So, in such circumstances, we will modify the code as
below:
XPATH=//input[starts-with(@id,’submit’)]
And if the keywors does not starts with submit, you can
use
XPATH=//input[contains(@id,’submit’)]
5.
Locate
Elements using CSS
Below are the equivalents of
XPATH from previous examples
Locate
|
XPATH
|
Equivalent CSS
|
Whole HTML Doc
|
/html
|
html
|
Locate form
|
/html/body/form
|
html>body>form
|
Locate id u1
|
//input[@id=’u1’]
|
input[id=u1] or,
input#u1 or,
#u1
|
Locate Login Button
|
//input[starts-with(@id,’submit’)]
|
input[id^submit]
|
Sample Script for logging in Yahoo mail
No comments:
Post a Comment