Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Make your Browsers work for You
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Jev Zelenkov
May 14, 2014
Programming
0
78
Make your Browsers work for You
Learn about Selenium WebDriver and get excited by beautiful & concise E2E tests
Jev Zelenkov
May 14, 2014
Tweet
Share
More Decks by Jev Zelenkov
See All by Jev Zelenkov
Prototypical inheritance in ECMAScript 6
jevzee
0
92
Other Decks in Programming
See All in Programming
CSC307 Lecture 02
javiergs
PRO
1
780
ぼくの開発環境2026
yuzneri
0
230
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.5k
Apache Iceberg V3 and migration to V3
tomtanaka
0
160
Architectural Extensions
denyspoltorak
0
290
AtCoder Conference 2025
shindannin
0
1.1k
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
190
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
450
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
200
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
Featured
See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
190
Practical Orchestrator
shlominoach
191
11k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Speed Design
sergeychernyshev
33
1.5k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
140
What's in a price? How to price your products and services
michaelherold
247
13k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
260
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
340
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2k
Producing Creativity
orderedlist
PRO
348
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
E2E testing with WebDriver API @jzelenkov FrankfurtJS #2 14 May
2014 Make your Browsers work for You
Do you write any front end tests?
complexity
changes
unit testing
(another) end from (one) end 2 http://david.heinemeierhansson.com/2014/tdd-is-dead-long-live-testing.html
Browsers
real
SlimerJS* PhantomJS headless * SlimerJS is not a fully headless
browser yet
ZombieJS unreal
or WebDriver ? Selenium
Selenium WebDriver* * Selenium RC
Selenium WebDriver* * Selenium RC epic naming #1
e2e test browser(s) selenium server API 1 1 WebDriver JSON
Wire Protocol Selenium WebDriver 2 Standalone Driver 3 Extension Driver 2 3 2
Selenium WebDriver JS Wrapper npm: selenium-webdriver
driver.get(‘http://...’); driver.findElement(webdriver.By.name('whoami')) .sendKeys('FrankfurtJS!'); driver.findElement(webdriver.By.id('greet')) .click(); driver.findElement(webdriver.By.id('message')) .getText() .then(function(val) { assert.equal(val,
'FrankfurtJS!'); }); SWD WebDriverJS
Alternatives
WebDriverJS http://webdriver.io @webdriverjs npm: webdriverjs
WebDriverJS http://webdriver.io @webdriverjs npm: webdriverjs epic naming #2
client .init() .url(‘http://...’) .addValue('[name="whoami"]', 'FrankfurtJS!') .buttonClick('#greet') .getText('#message', function(err, text) {
assert.equal(text, 'FrankfurtJS!'); }) WebDriverJS
DalekJS http://dalekjs.com @dalekjs npm: dalekjs
test .open('http://...') .type('[name="whoami"]', 'FrankfurtJS!') .click('#greet') .assert.text('#message').is('FrankfurtJS!') .done(); DalekJS
Protractor https://github.com/angular/protractor @ ProtractorTest npm: protractor
browser.ignoreSynchronization = true; ! browser.get(‘http://...'); element(by.name('whoami')).sendKeys('FrankfurtJS!'); element(by.id('greet')).click(); element(by.id(‘message')) .getText() .then(function(val){
assert.equal(val, 'FrankfurtJS!'); }); Protractor
others npm: selenium-test-runner npm: wd . . . npm: wd-sync
npm: yiewd . . . . . .
Selenium WebDriver Issues browser support frontend code
end 2 end for the win recap
thank you!
this presentation: https://speakerdeck.com/jzelenkov source code: http://bit.ly/1sNtUVL