Scribd
Upload
130 views19 pages

WebElement Identification Techniques

The document discusses different techniques for identifying and locating web elements, including locators, XPath, and CSS path strategies. It provides examples of using id, name, link, XPath, and CSS to locate various form fields, links, and other elements on HTML pages. In particular, it demonstrates how to: 1. Use id, name, XPath, and CSS locators to find elements like a login form, username field, and submit button. 2. Construct relative XPath expressions to select elements based on their position or attributes. 3. Leverage tools like FireBug and FirePath to capture XPath and CSS locators dynamically on a page.

Uploaded by

DFW2030
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
130 views19 pages

WebElement Identification Techniques

The document discusses different techniques for identifying and locating web elements, including locators, XPath, and CSS path strategies. It provides examples of using id, name, link, XPath, and CSS to locate various form fields, links, and other elements on HTML pages. In particular, it demonstrates how to: 1. Use id, name, XPath, and CSS locators to find elements like a login form, username field, and submit button. 2. Construct relative XPath expressions to select elements based on their position or attributes. 3. Leverage tools like FireBug and FirePath to capture XPath and CSS locators dynamically on a page.

Uploaded by

DFW2030
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

WEB ELEMENT IDENTIFICATION TECHNIQUES

Locators Strategy
Some of Selenium Locator Strategies are :

Id
Name
Link
XPath
CSS

Example 1
Consider Following HTML Snippets
<body>
<form id="loginForm">
<input id="u1" name="username" type="text" />
<input id="n1" name="password" type="password" />
<input id="c1 name="continue" type="submit" value="Login" />
</form>
</body>
Note that <form> , <input> are called tags or elements
Id=u1 , name=username are called attributes.

Q1. How Do You Locate the Form ?


Ans: id = loginForm
Q2. How do you locate the username
Ans: id=u1 //note no quotes single or double

Example 2
Note that not all HTML are well formed with an id
attribute.
Consider Following HTML Snippets
<body>
<form id="loginForm">
<input id="u1" name="username" type="text" />
<input name="password" type="password" />
<input name="continue" type="submit" value="Login" />
</form>
</body>

Q1. How do you locate password field ?


Ans: By using name : name=password

Example 3
Consider Following Snippets
<body>
<form id="loginForm">
<input id="u1" name="username" value = "xyz" type="text" />
<input name="username" value="abc" type="password" />
<input name="continue" type="submit" value="Login" />
</form>
</body>

Q. How do you locate password field ?


Ans: name=username => It will point to the username
as username comes before password.

Example 3 - Solution
Refine your locators in following two Filters
Value Filter ( add value filter if you have one )
Index Filter

Solutions:
1.
2.

3.

name= username value=abc locate password field


name = username type=password Will not locate
anything
name = username index=1 Will locate passoword

Example 3 A
This strategy is intended to select links only and selects the

anchor element containing the specified text:

Code Snippets
<div>
<a href="/intl/en/ads/">Advertising Programs</a>
<a href="/services/">Business Solutions</a>
<a href="/intl/en/policies/">Privacy & Terms</a>
</div>

Locators

link= Advertising Programs


link = Business Solutions

Example 4
Consider Following Snippets in Example 4
Question 1:

How to locate product 2 ?


Solution

No ID found
No Name found
Lets learn about a new way to locate.

How Do You Locate a File in a Computer

HTML File

Lets Trace To Element


To product 1 : /html/body/table/tbody/tr[2]/td[1]
Similarly trace some other elements.
This is Called Xpath.
XPath describes paths to elements of XML file same
was as OS leads to path in file system.
Almost like a mini programming language with
capabilities like functions, expressions.

XPAth Example 1
Consider Following Snippets
1. <AAA>
2.
<BBB/>
3.
<CCC/>
4.
<BBB/>
5.
<BBB/>
6.
<DDD>
7.
<BBB/>
8.
</DDD>
9.
<CCC/>
10. </AAA>
Question: What Xpath will select complete document ?
Answer: /AAA

XPath Example 2
Consider Following Snippets
1. <AAA>
2.
<BBB/>
3.
<CCC/>
4.
<BBB/>
5.
<BBB/>
6.
<DDD>
7.
<BBB/>
8.
</DDD>
9.
<CCC/>
10. </AAA>
Question: What XPath will select BBB element in Line 7?
Answer: /AAA/DDD/BBB

XPath Example 3
Question : What will be XPath to Select the elements
in red
<AAA>
<BBB/>
<BBB/>
<BBB/>
<BBB/>
</AAA>
Answer: /AAA/BBB[4] Index Starts With 1.
or
/AAA/BBB[last()]
or
//BBB[4]

XPath Example 4
Question: How do you locate password in line 4 using
Example3.html
1. <body>
2. <form id="loginForm">
3.
<input id="u1" name="username" value = "xyz" type="text" />
4.
<input name="username" value="abc" type="password" />
5.
<input name="continue" type="submit" value="Login" />
6.
</form>
7. </body>

//element name[@attribute=attribute value]


Element name = input
Attribute names = { name=username , value = abc , type=password}
//input[@value=abc] or //input[@name=username][2]

XPath Example 5
Question: How Do You Locate Submit Button in
Example5.html
<input type="button" value="Submit!" id="submit_681">

//input[@id=submit_681] is Wrong
Issues: Id is generated dynamically.
//input[starts-with(@id,submit)]
Doubts: How to select the second submit button ?

XPath Example 5
Question: How Do You Locate Submit Button in
Example5.html
<input type="text" style="background-color: rgb(255, 255, 255);" id="91_count" value="" maxlength="3" size="3" name="qty">

//input[@id=91_count] is Wrong
Issues: Id is generated dynamically.
//input[contains(@id,count)]
Doubts: How to select the second Quantity button ?

FireBug and Fire Path


Explain How To Install and Work With Fire Path

and Fire Bug.


Show how to capture Xpath and CSS Path using Fire

Path.

CSS Path
Efficient than XPath. Lets Couple of examples to

Understand CSS Path Syntax.


Question

XPath

CSS Path

Locate complete html in


example3.html

/html

html

Locate id=u1 in
example3.html

//input[@id=u1]

#u1 or input#u1 or
input[id='u1']

Locate product 3 in
example5.html

html/body/table/tb DOUBTS
ody/tr[4]/td[1]

Locate submit button in


example5.html

//input[startswith(@id,submit)]

input[id^=submit]

Locate qty filed in


example5.html

//input[contains
(@id,count)]

input[id*=count]

You might also like