![Properties
CSS selector: [class=gallery]
Fine tuning: [class=~gallery]
<body>
<article>
<my-gallery class=gallery>
<img cl...](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/statistical-element-locator-by-oren-rubin-seleniumconf-uk-2016-11-320.jpg?cb=1479406228)
![Logical “And” (&&)
By snapping selectors
CSS Selector: img.[title=1]
<body>
<article>
<my-gallery class=gallery>
<img clas...](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/statistical-element-locator-by-oren-rubin-seleniumconf-uk-2016-14-320.jpg?cb=1479406228)
![Failure #3
Tips!
● Didn't find it using jQuery
i.e. $("#my-id") === []
● No code change in this project
● New version in p...](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/statistical-element-locator-by-oren-rubin-seleniumconf-uk-2016-26-320.jpg?cb=1479406228)
![Failure #4
Tips!
● Found another element instead
i.e. $("#my-id") === [<other-element>]
● No code change in this project
●...](https://image.slidesharecdn.com/statisticalelementlocator-orenrubin-seleniumconf2016-161117180729/85/statistical-element-locator-by-oren-rubin-seleniumconf-uk-2016-28-320.jpg?cb=1479406228)
![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?cb=1479406228)
Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
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
- 6. Test Steps Assertions Stimuli Setup Locate Action
- 7. ● Query Languages (Intro) ● Choosing properties ● The Page Objects Solution ○ Locators ○ Web Element ● Why Record/Playback sucks ● The Testim Way Soon
- 8. Intro: Query Languages
- 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(); } }
- 42. WebElement VS Locators (Strings)
- 43. Record / Playback
- 44. Why Record / Playback Suck?
- 45. Because It’s hard
- 46. Meet Selenium IDE Record / Playback Unreliable, Unreadable, Uneditable
- 47. Record / Playback Meet Usetrace
- 48. Meet Testim.io Locate via Statistical Analysis & Crowd Wisdom Locate by Object Properties
- 49. Testim Capture Announcing Testim Capture
- 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