WebElement Identification Techniques

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>
<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>
<input id="u1" name="username" value = "xyz" type="text" />
<input name="username" value="abc" type="password" />
</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
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
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.
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]

WebElement Identification Techniques

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

WebElement Identification Techniques

Hochgeladen von

Copyright:

Verfügbare Formate

WEB ELEMENT IDENTIFICATION TECHNIQUES

Q1. How Do You Locate the Form ?

Q1. How do you locate password field ?

Q. How do you locate password field ?

name= username value=abc locate password field

anchor element containing the specified text:

link= Advertising Programs

How to locate product 2 ?

How Do You Locate a File in a Computer

Lets Trace To Element

//element name[@attribute=attribute value]

FireBug and Fire Path

and Fire Bug.

Understand CSS Path Syntax.

Locate complete html in

Locate submit button in

Locate qty filed in

Das könnte Ihnen auch gefallen