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
  • 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

×