statistical element locator by oren rubin - seleniumconf uk 2016
TRANSCRIPT
Statistical Element Locator
Oren Rubin
And why the Selenium API should evolve!
Testim.io CEO
Applitools Director of R&D
WixWeb Architect
Cadence Compiler Engineer
IBM Cloud Engineer
Google Developer ExpertOrenRubin
Mentor Google Launchpad
External LecturerTechnion University
Meetup Co-organizerSelenium-IL, GDG, Ember
...
Assertions types: Functional, UI, Timing, Memory....
TestSteps
Setup
Assertions
Stimuli
Setup types: Unit, Integration, or End-To-End
TestSteps
Setup
Assertions
Stimuli
Assertions types: Functional, UI, Timing, Memory...
Setup types: Unit, Integration, or End-To-End
Stimuli
Mimic User Interaction
on the same element
Locating it based on its
Persistent Properties
TestSteps
Assertions
Stimuli
Setup
Locate
Action
● Query Languages (Intro)
● Choosing properties
● The Page Objects Solution
○ Locators
○ Web Element
● Why Record/Playback sucks
● The Testim Way
Soon
Intro: Query Languages
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>
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>
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
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
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
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
XPath AdvantagesParent Selector: //img/../my-galleryText 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>
CSSvs.
XPath
CSSvs.
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>
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
Locateby
ID Property
Id
Uniquely identifies an element in a document
Locateby
ID Property
Failure #1
Tips!
● Lookup came up empty
● No code change in this project
● No code change in other projects
● Just ran it again
Locateby
ID Property
Failure #1
Random Ids
Reusable components usually don't have consistent ids
Locateby
ID Property
Failure #2
Tips!
● Lookup came up empty
● HTML changes in this project
● No code change in other projects
Playbackby
ID Property
Failure #2
Code changed
Testing is mostly AOP
Playbackby
ID Property
Failure #3
Tips!
● Didn't find it using jQuery
i.e. $("#my-id") === []
● No code change in this project
● New version in parent project
Locateby
ID Property
Locateby
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!
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
Locateby
ID Property
Locateby
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 code change in other projects
● No timing issues
Locateby
ID Property
Failure #5
Two Body-s!
WTF?!Locateby
ID Property
Some old frameworks suck
Class
Existing properties used for styling
Locateby
Class Property
Challenge #1
Refactor Style => Fail!
I likeBlonde!
Locateby
Object Properties
Challenge #2
Non unique > which one?
Locateby
Object Properties
Locateby
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
Locateby
Object Properties
Page Objects
Page ObjectsWill not be covered!
Link to Page Object Done Right
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)
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();
}
}
Option 2 - WebElement
Page Objects(Component Objects)
Class Gallery () {
WebElement galleryElement;
Gallery(WebElement galleryElement) {
this.galleryElement = galleryElement
}
ShowFullScreen() {
galleryElement.find(“img”).click();
}
}
WebElementVS
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
Locateby
Object Properties
Testim Capture
AnnouncingTestim Capture
Best Practices
● Non reusable e.g. headers/footers○ Use Id
● Components○ Use classes or self debugging symbols
○ Split between
■ Locating the component
■ Locating components’ partsPage Object Design Pattern =>
Link to my Page Object presentation at SeConf 2014
Locateby
Object Properties
