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