Locator strategy for web elements | Katalon Studio
3 likes2,647 views
The document discusses various locator strategies for web elements in web UI automated tests, emphasizing methods such as using visual text, detecting component structures, and handling challenges like finding multiple elements. It highlights the pros and cons of visual text locators, including improved readability and localization support, alongside issues with consistency. The document provides detailed examples of different locator types, including value, text, placeholder, and bound labels.
![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>]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-6-320.jpg)
![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>]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-7-320.jpg)
![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>]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-8-320.jpg)
![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>]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-9-320.jpg)
![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]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-10-320.jpg)
![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]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-11-320.jpg)
![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]]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-13-320.jpg)
![LOCATOR STRATEGIES FOR WEB ELEMENTS
COMPONENT
Locator: .//div[@itemprop=itemListElement][.//div[.=Penthouse Room Close
to Big Ben]]](https://image.slidesharecdn.com/locatorstrategyforwebelements-180502084732/85/Locator-strategy-for-web-elements-Katalon-Studio-15-320.jpg)
Locator strategy for web elements | Katalon Studio
- 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