Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Statistical Element Locator Oren Rubin And why the Selenium API should evolve!
Testim.io CEO Applitools Director of R&D Wix Web Architect Cadence Compiler Engineer IBM Cloud Engineer Google Developer E...
Assertions types: Functional, UI, Timing, Memory.... Test Steps Setup Assertions Stimuli Setup types: Unit, Integration, o...
Test Steps Setup Assertions Stimuli Assertions types: Functional, UI, Timing, Memory... Setup types: Unit, Integration, or...
Stimuli Mimic User Interaction on the same element Locating it based on its Persistent Properties
Test Steps Assertions Stimuli Setup Locate Action
● Query Languages (Intro) ● Choosing properties ● The Page Objects Solution ○ Locators ○ Web Element ● Why Record/Playback...
Intro: Query Languages
HTML 101 HTML Elements ● Tag - must ● Properties ● Inner Elements <body> <article> <my-gallery class=gallery> <img class="...
Selectors Tag Name CSS selector: my-gallery XPath: //my-gallery <body> <article> <my-gallery class=gallery> <img class="im...
Properties CSS selector: [class=gallery] Fine tuning: [class=~gallery] <body> <article> <my-gallery class=gallery> <img cl...
Class Selector: .im ID Selector: #id <body> <article> <my-gallery class=gallery> <img class="im f1" title=1> <img class="i...
Find element inside another element (using space) css: .gallery .im <body> <article> <my-gallery class=gallery> <img class...
Logical “And” (&&) By snapping selectors CSS Selector: img.[title=1] <body> <article> <my-gallery class=gallery> <img clas...
XPath Advantages Parent Selector: //img/../my-gallery Text Selector: xxx/text()='some-text' In CSS4: $img > xxx <body> <ar...
CSS vs. XPath CSS Advantages ● Web devs know CSS ● Get shortcuts for web ● CSS is a bit faster <body> <article> <my-galler...
Object Based Choosing properties
Which properties to choose ● Id ● Class ● Tag name ● Text ● Css selector ● XPath ● Link || partial link ● ... Object Based
Find the problem game!
Id Uniquely identifies an element in a document Locate by ID Property
Id Uniquely identifies an element in a document Locate by ID Property
Failure #1 Tips! ● Lookup came up empty ● No code change in this project ● No code change in other projects ● Just ran it ...
Failure #1 Random Ids Reusable components usually don't have consistent ids Locate by ID Property
Failure #2 Tips! ● Lookup came up empty ● HTML changes in this project ● No code change in other projects Playback by ID P...
Failure #2 Code changed Testing is mostly AOP Playback by ID Property
Failure #3 Tips! ● Didn't find it using jQuery i.e. $("#my-id") === [] ● No code change in this project ● New version in p...
Locate by ID Property Failure #3 Iframes src has cache killers ...?version=1.4 xxx.com/v1.4/… Finding the right iframe.. i...
Failure #4 Tips! ● Found another element instead i.e. $("#my-id") === [<other-element>] ● No code change in this project ●...
Locate by ID Property Failure #4 Same Id twice! WTF?! Find element returns the first element
Failure #5 Tips! ● Works 50% of test runs ● See it, but $("#my-id") finds nothing ● No code change in this project ● No co...
Failure #5 Two Body-s! WTF?!Locate by ID Property Some old frameworks suck
Class Existing properties used for styling Locate by Class Property
Challenge #1 Refactor Style => Fail! I likeBlonde! Locate by Object Properties
Challenge #2 Non unique > which one? Locate by Object Properties
Locate by Object Properties Nth Child? Just say NO! Non unique /div/span/div/div/ul/li/div[0]
Text, Link, Partial Links All considered too fragile Locate by Object Properties
Page Objects
Page Objects Will not be covered! Link to Page Object Done Right
Separation of Concerns Class Gallery () { … } Class Image () { … } <body> <article> <my-gallery class=gallery> <img class=...
Option 1 - String (Locator) Concatination Page Objects (Component Objects) Class Gallery () { WebElement galleryLocator; G...
Option 2 - WebElement Page Objects (Component Objects) Class Gallery () { WebElement galleryElement; Gallery(WebElement ga...
WebElement VS Locators (Strings)
Record / Playback
Why Record / Playback Suck?
Because It’s hard
Meet Selenium IDE Record / Playback Unreliable, Unreadable, Uneditable
Record / Playback Meet Usetrace
Meet Testim.io Locate via Statistical Analysis & Crowd Wisdom Locate by Object Properties
Testim Capture Announcing Testim Capture
Best Practices ● Non reusable e.g. headers/footers ○ Use Id ● Components ○ Use classes or self debugging symbols ○ Split b...
Thank you :) oren@testim.io | @shexman | linkedin Oren Rubin
Upcoming SlideShare
Loading in …5
×

Statistical Element Locator by Oren Rubin - SeleniumConf UK 2016

537 views

Published on

In this talk we will delve into one the biggest challenges that Test Automation developers face, finding elements i.e. a robust test means finding the same element with high fidelity while the Application Under Test keeps changing.

We will categorise the methods, and show where developer fail, where machines (Record/Playback) fail, and suggest a new way for locating elements, and analyze the skill-set required to overcome those difficulties.

Published in: Software
no profile picture user

  • Be the first to comment

  • Be the first to like this

Statistical Element Locator by Oren Rubin - SeleniumConf UK 2016

  1. 1. Statistical Element Locator Oren Rubin And why the Selenium API should evolve!
  2. 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. 3. Assertions types: Functional, UI, Timing, Memory.... Test Steps Setup Assertions Stimuli Setup types: Unit, Integration, or End-To-End
  4. 4. Test Steps Setup Assertions Stimuli Assertions types: Functional, UI, Timing, Memory... Setup types: Unit, Integration, or End-To-End
  5. 5. Stimuli Mimic User Interaction on the same element Locating it based on its Persistent Properties
  6. 6. Test Steps Assertions Stimuli Setup Locate Action
  7. 7. ● Query Languages (Intro) ● Choosing properties ● The Page Objects Solution ○ Locators ○ Web Element ● Why Record/Playback sucks ● The Testim Way Soon
  8. 8. Intro: Query Languages
  9. 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. 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. 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. 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. 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. 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. 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. 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. 17. Object Based Choosing properties
  18. 18. Which properties to choose ● Id ● Class ● Tag name ● Text ● Css selector ● XPath ● Link || partial link ● ... Object Based
  19. 19. Find the problem game!
  20. 20. Id Uniquely identifies an element in a document Locate by ID Property
  21. 21. Id Uniquely identifies an element in a document Locate by ID Property
  22. 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. 23. Failure #1 Random Ids Reusable components usually don't have consistent ids Locate by ID Property
  24. 24. Failure #2 Tips! ● Lookup came up empty ● HTML changes in this project ● No code change in other projects Playback by ID Property
  25. 25. Failure #2 Code changed Testing is mostly AOP Playback by ID Property
  26. 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. 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. 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. 29. Locate by ID Property Failure #4 Same Id twice! WTF?! Find element returns the first element
  30. 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. 31. Failure #5 Two Body-s! WTF?!Locate by ID Property Some old frameworks suck
  32. 32. Class Existing properties used for styling Locate by Class Property
  33. 33. Challenge #1 Refactor Style => Fail! I likeBlonde! Locate by Object Properties
  34. 34. Challenge #2 Non unique > which one? Locate by Object Properties
  35. 35. Locate by Object Properties Nth Child? Just say NO! Non unique /div/span/div/div/ul/li/div[0]
  36. 36. Text, Link, Partial Links All considered too fragile Locate by Object Properties
  37. 37. Page Objects
  38. 38. Page Objects Will not be covered! Link to Page Object Done Right
  39. 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. 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. 41. Option 2 - WebElement Page Objects (Component Objects) Class Gallery () { WebElement galleryElement; Gallery(WebElement galleryElement) { this.galleryElement = galleryElement } ShowFullScreen() { galleryElement.find(“img”).click(); } }
  42. 42. WebElement VS Locators (Strings)
  43. 43. Record / Playback
  44. 44. Why Record / Playback Suck?
  45. 45. Because It’s hard
  46. 46. Meet Selenium IDE Record / Playback Unreliable, Unreadable, Uneditable
  47. 47. Record / Playback Meet Usetrace
  48. 48. Meet Testim.io Locate via Statistical Analysis & Crowd Wisdom Locate by Object Properties
  49. 49. Testim Capture Announcing Testim Capture
  50. 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. 51. Thank you :) oren@testim.io | @shexman | linkedin Oren Rubin

×