Вы находитесь на странице: 1из 19
WEB ELEMENT IDENTIFICATION TECHNIQUES

WEB ELEMENT IDENTIFICATION TECHNIQUES

WEB ELEMENT IDENTIFICATION TECHNIQUES

Locators Strategy

Locators Strategy Some of Selenium Locator Strategies are : • Id • Name • Link •

Some of Selenium Locator Strategies are :

Id

Name

Link

XPath

CSS

Example 1

Example 1 Consider Following HTML Snippets <body> <form id= "loginForm"> <input id=

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

Example 2 Note that not all HTML are well formed with an id attribute. Consider Following

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

Example 3 Consider Following Snippets <body> <form id= "loginForm"> <input id= "u1"

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

Example 3 - Solution  Refine your locators in following two Filters  Value Filter (

Refine your locators in following two Filters

Value Filter ( add value filter if you have one )

Index Filter

Solutions:

1.

2.

name= username value=abc locate password field

name = username type=password Will not locate anything

name = username index=1 Will locate passoword

3.

Example 3 A

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

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

Example 4  Consider Following Snippets in Example 4  Question 1: How to locate product

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
How Do You Locate a File in a Computer
HTML File
HTML File

Lets Trace To Element

Lets Trace To Element To product 1 : /html/body/table/tbody/tr[2]/td[1] Similarly trace some other elements. This is

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

XPAth Example 1 Consider Following Snippets 1. <AAA> 2. <BBB/> 3. <CCC/> 4. <BBB/> 5.

Consider Following Snippets

1. <AAA>

2. <BBB/>

3. <CCC/>

4. <BBB/>

5. <BBB/>

6. <DDD>

7.

8. </DDD>

9. <CCC/>

10. </AAA>

<BBB/>

Question: What Xpath will select complete document ? Answer: /AAA

XPath Example 2

XPath Example 2 Consider Following Snippets 1. <AAA> 2. <BBB/> 3. <CCC/> 4. <BBB/> 5.

Consider Following Snippets

1. <AAA>

2. <BBB/>

3. <CCC/>

4. <BBB/>

5. <BBB/>

6. <DDD>

7.

8. </DDD>

9. <CCC/>

10. </AAA>

<BBB/>

Question: What XPath will select BBB element in Line 7? Answer: /AAA/DDD/BBB

XPath Example 3

XPath Example 3 Question : What will be XPath to Select the elements in red <AAA>

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

  XPath Example 4 Question: How do you locate password in line 4 using Example3.html  

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

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

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

XPath Example 5 Question: How Do You Locate Submit Button in Example5.html <input type="text"

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

FireBug and Fire Path  Explain How To Install and Work With Fire Path and Fire

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

CSS Path  Efficient than XPath. Lets Couple of examples to Understand CSS Path Syntax. Question

Efficient than XPath. Lets Couple of examples to Understand CSS Path Syntax.

Question

XPath

CSS Path

Locate complete html in

/html

html

example3.html

Locate id=u1 in

//input[@id=‘u1’]

#u1 or input#u1 or

example3.html

input[id='u1']

Locate product 3 in

html/body/table/tb

DOUBTS

example5.html

ody/tr[4]/td[1]

Locate submit button in

//input[starts-

input[id^=“submit”]

example5.html

with(@id,’submit’)]

Locate qty filed in

//input[contains

input[id*=“count”]

example5.html

(@id,’count’)]

Locate qty filed in //input[contains input[id*=“count”] example5.html (@ id,’count’)]