2. LOCATOR STRATEGIES FOR WEB ELEMENTS
LOCATOR
▸ A way to find a Web element by Selenium
• Locator strategies: ID, Name, Link, DOM, XPath, etc.
▸ Challenges
• Unable to find elements
• Multiple elements matched
• Hard to maintain scripts
• Vulnerable to changes in the implementation of the AUT
3. LOCATOR STRATEGIES FOR WEB ELEMENTS
LOCATOR STRATEGIES
▸ This chart provides several useful locator strategies in
addition to the common ones, including
▸ Using Visual Text
▸ Detecting Component
4. LOCATOR STRATEGIES FOR WEB ELEMENTS
USING VISUAL TEXT
✤An element is located using its visual text such as title, label and caption instead of its
properties invisible by end users such as ID and index.
✤Pros
• Focusing on “What users see”
• Tests are more readable
• Visual texts are often specified in the requirements
• Avoiding unexpected changes in the back-end implementation
• Supporting localization
✤Cons
• Problems with localization
• Problems in dealing with Web Element relationships
5. LOCATOR STRATEGIES FOR WEB ELEMENTS
USING VISUAL TEXT
▸ Visual text appearing as
• Value
• Text
• Placeholder
• Bound label
6. LOCATOR STRATEGIES FOR WEB ELEMENTS
VALUE
<input accesskey="s" class="aui-button" id="login-form-submit" name="login"
title="Press Alt+s to submit this form" type="submit" value="Log In">
locator: //input[@value = ‘Log In’]
locator: //<tag>[@value = ‘<present text>’]
7. LOCATOR STRATEGIES FOR WEB ELEMENTS
TEXT
<button class="btn Searchbox__searchButton Searchbox__searchButton--active" data-sel
<span class="Searchbox__searchButton__text">Search</span>
</button>
locator: //span[(text() = 'Search' or . = 'Search')]
locator: //button[.=‘Search’]
locator: //<tag>[.=‘<present text>’]
8. LOCATOR STRATEGIES FOR WEB ELEMENTS
PLACE HOLDER
<input type="email" autocomplete="username"
class="_43sdyhr" id="email-signup-email" name="user[email]"
placeholder="Email address" value="">
locator: //input[@placeholder=‘Email address’]
locator: //<tag>[@placeholder=‘<present text>’]
9. LOCATOR STRATEGIES FOR WEB ELEMENTS
PLACE HOLDER<input type="text" class="_1lhx92j" aria-label="Check in"
id="checkin" name="checkin" value=“2018-05-15"
placeholder="Check in" autocomplete="off" aria-
describedby="DateInput__screen-reader-message-checkin">
locator: //input[@placeholder=‘Check in’]
locator: //<tag>[@placeholder=‘<present text>’]
10. LOCATOR STRATEGIES FOR WEB ELEMENTS
BOUND LABEL
<div class="field-group">
<label accesskey="u" for="login-form-username"><u>U</u>sername</label>
<input class="text medium-field" id="login-form-username" name="os_username" type="tex
</div>
locator: .//input[@id=//label[.=‘Username’]/@for]
locator: .//<tag>[@id=//label[.=‘<present text>’]/@for]
12. LOCATOR STRATEGIES FOR WEB ELEMENTS
DETECTING COMPONENT
▸ A component consists of related Web elements. Users view
a component as a whole instead of individual elements
• Examples are search result blocks, carousels
▸ A component is located as a whole instead of its individual
elements