Statistical Element Locator by Oren Rubin - SeleniumConf UK 2016
0 likes919 views
The document discusses advancements in the Selenium API and the importance of evolving its capabilities, particularly around element locators and testing methodologies. It highlights various selection strategies, including the use of CSS and XPath, along with the challenges faced in test automation such as locating elements and reliability in record/playback functionality. The author emphasizes best practices and strategies for designing test frameworks that enhance user interaction mimicry in a more robust and maintainable manner.
![Properties
CSS selector: [class=gallery]
Fine tuning: [class=~gallery]
<body>
<article>
<my-gallery class=gallery>
<img class="im f1" title=1> <img class="im f2" title=2>
Selectors](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/Statistical-Element-Locator-by-Oren-Rubin-SeleniumConf-UK-2016-11-320.jpg)
![Logical “And” (&&)
By snapping selectors
CSS Selector: img.[title=1]
<body>
<article>
<my-gallery class=gallery>
<img class="im f1" title=1> <img class="im f2" title=2>
Selectors](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/Statistical-Element-Locator-by-Oren-Rubin-SeleniumConf-UK-2016-14-320.jpg)
![Failure #3
Tips!
● Didn't find it using jQuery
i.e. $("#my-id") === []
● No code change in this project
● New version in parent project
Locate
by
ID Property](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/Statistical-Element-Locator-by-Oren-Rubin-SeleniumConf-UK-2016-26-320.jpg)
![Failure #4
Tips!
● Found another element instead
i.e. $("#my-id") === [<other-element>]
● No code change in this project
● No code change in other projects
Locate
by
ID Property](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/Statistical-Element-Locator-by-Oren-Rubin-SeleniumConf-UK-2016-28-320.jpg)
![Locate
by
Object Properties
Nth Child? Just say NO!
Non unique /div/span/div/div/ul/li/div[0]](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/Statistical-Element-Locator-by-Oren-Rubin-SeleniumConf-UK-2016-35-320.jpg)
Statistical Element Locator by Oren Rubin - SeleniumConf UK 2016
- 1. Statistical Element Locator Oren Rubin And why the Selenium API should evolve!
- 2. Testim.io CEO Applitools Director of R&D Wix Web Architect Cadence Compiler Engineer IBM Cloud Engineer Google Developer Expert Oren Rubin oren@testim.io Mentor Google Launchpad External Lecturer Technion University Meetup Co-organizer Selenium-IL, GDG, Ember ...
- 3. Assertions types: Functional, UI, Timing, Memory.... Test Steps Setup Assertions Stimuli Setup types: Unit, Integration, or End-To-End
- 4. Test Steps Setup Assertions Stimuli Assertions types: Functional, UI, Timing, Memory... Setup types: Unit, Integration, or End-To-End
- 5. Stimuli Mimic User Interaction on the same element Locating it based on its Persistent Properties
- 7. ● Query Languages (Intro) ● Choosing properties ● The Page Objects Solution ○ Locators ○ Web Element ● Why Record/Playback sucks ● The Testim Way Soon
- 9. HTML 101 HTML Elements ● Tag - must ● Properties ● Inner Elements <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2>
- 10. Selectors Tag Name CSS selector: my-gallery XPath: //my-gallery <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2>
- 11. Properties CSS selector: [class=gallery] Fine tuning: [class=~gallery] <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2> Selectors
- 12. Class Selector: .im ID Selector: #id <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2> Shortcuts Selectors
- 13. Find element inside another element (using space) css: .gallery .im <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2> Child Selector Selectors
- 14. Logical “And” (&&) By snapping selectors CSS Selector: img.[title=1] <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2> Selectors
- 15. XPath Advantages Parent Selector: //img/../my-gallery Text Selector: xxx/text()='some-text' In CSS4: $img > xxx <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2> <xxx> CSS vs. XPath
- 16. CSS vs. XPath CSS Advantages ● Web devs know CSS ● Get shortcuts for web ● CSS is a bit faster <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2>
- 17. Object Based Choosing properties
- 18. Which properties to choose ● Id ● Class ● Tag name ● Text ● Css selector ● XPath ● Link || partial link ● ... Object Based
- 19. Find the problem game!
- 20. Id Uniquely identifies an element in a document Locate by ID Property
- 21. Id Uniquely identifies an element in a document Locate by ID Property
- 22. Failure #1 Tips! ● Lookup came up empty ● No code change in this project ● No code change in other projects ● Just ran it again Locate by ID Property
- 23. Failure #1 Random Ids Reusable components usually don't have consistent ids Locate by ID Property
- 24. Failure #2 Tips! ● Lookup came up empty ● HTML changes in this project ● No code change in other projects Playback by ID Property
- 25. Failure #2 Code changed Testing is mostly AOP Playback by ID Property
- 26. Failure #3 Tips! ● Didn't find it using jQuery i.e. $("#my-id") === [] ● No code change in this project ● New version in parent project Locate by ID Property
- 27. Locate by ID Property Failure #3 Iframes src has cache killers ...?version=1.4 xxx.com/v1.4/… Finding the right iframe.. is as hard as finding the element!
- 28. Failure #4 Tips! ● Found another element instead i.e. $("#my-id") === [<other-element>] ● No code change in this project ● No code change in other projects Locate by ID Property
- 29. Locate by ID Property Failure #4 Same Id twice! WTF?! Find element returns the first element
- 30. Failure #5 Tips! ● Works 50% of test runs ● See it, but $("#my-id") finds nothing ● No code change in this project ● No code change in other projects ● No timing issues Locate by ID Property
- 31. Failure #5 Two Body-s! WTF?!Locate by ID Property Some old frameworks suck
- 32. Class Existing properties used for styling Locate by Class Property
- 33. Challenge #1 Refactor Style => Fail! I likeBlonde! Locate by Object Properties
- 34. Challenge #2 Non unique > which one? Locate by Object Properties
- 35. Locate by Object Properties Nth Child? Just say NO! Non unique /div/span/div/div/ul/li/div[0]
- 36. Text, Link, Partial Links All considered too fragile Locate by Object Properties
- 37. Page Objects
- 38. Page Objects Will not be covered! Link to Page Object Done Right
- 39. Separation of Concerns Class Gallery () { … } Class Image () { … } <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="im f2" title=2> Page Objects (Component Objects)
- 40. Option 1 - String (Locator) Concatination Page Objects (Component Objects) Class Gallery () { WebElement galleryLocator; Gallery(String galleryLocator) { this.galleryLocator = galleryLocator; } ShowFullScreen() { this.find(galleryLocator + “ ” + “img”).click(); } }
- 41. Option 2 - WebElement Page Objects (Component Objects) Class Gallery () { WebElement galleryElement; Gallery(WebElement galleryElement) { this.galleryElement = galleryElement } ShowFullScreen() { galleryElement.find(“img”).click(); } }
- 44. Why Record / Playback Suck?
- 46. Meet Selenium IDE Record / Playback Unreliable, Unreadable, Uneditable
- 48. Meet Testim.io Locate via Statistical Analysis & Crowd Wisdom Locate by Object Properties
- 50. Best Practices ● Non reusable e.g. headers/footers ○ Use Id ● Components ○ Use classes or self debugging symbols ○ Split between ■ Locating the component ■ Locating components’ parts Page Object Design Pattern => Link to my Page Object presentation at SeConf 2014 Locate by Object Properties
- 51. Thank you :) oren@testim.io | @shexman | linkedin Oren Rubin