The useful locator strategies in addition to the common ones, including using Visual Text and Detecting Component.

1. LOCATOR
STRATEGIES FOR
WEB ELEMENTS
WEB UI AUTOMATED TESTS
By Trong Bui - QA Architect at KMS Technology

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]

11. LOCATOR STRATEGIES FOR WEB ELEMENTS
BOUND LABEL
<div class="_9hxttoo">
<label class="_1m8bb6v" for="GeocompleteController-via-SearchBarV2-SearchBarV2">Where</label>
<div dir="ltr">
<div class="_v0d63vq"><div class="_ncmdki"><div class="_bp0th8"><div class="_1miobth"><svg viewBox="0
0 24 24" role="presentation" aria-hidden="true" focusable="false" style="" fill-
rule="evenodd"></path></svg></div></div></div><div class="_178faes">
<input type="text" autocomplete="off" class="_k3jto05" id="GeocompleteController-via-SearchBarV2-
SearchBarV2" name="query" placeholder="Try “Costa Blanca”" value=""></div>
</div>
</div></div>
locator: //input[@id=//label[.=‘Where’]/@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

13. LOCATOR STRATEGIES FOR WEB ELEMENTS
COMPONENT
<div class="_16nvkt52"><div class="_qgh1p4">
<button type="button" class="_6m75u2" aria-busy="false" data-veloute="explore-nav-card:/homes">
<div><div class="_112c092"><div class="_1thk0tsb"><div class="_e296pg" style="width: 96px; height:
72px;"><div class="_6ikqekk" style=""></div></div></div><div class="_ni9axhe"><div
class="_13lgpze"><div class="_1ho874em">
<span class="_1t073h8">Homes</span>
</div></div></div></div></div>
</button>
</div></div>
Locator: .//button[.//span[.=‘Homes’]]

14. LOCATOR STRATEGIES FOR WEB ELEMENTS
COMPONENT

15. LOCATOR STRATEGIES FOR WEB ELEMENTS
COMPONENT
Locator: .//div[@itemprop=itemListElement’][.//div[.=‘Penthouse Room Close
to Big Ben’]]

16. Thank you