Make your Browsers work for You

Learn about Selenium WebDriver and get excited by beautiful & concise E2E tests

Transcript

1. E2E testing with WebDriver API @jzelenkov FrankfurtJS #2 14 May 2014 Make your Browsers work for You
2. Do you write any front end tests?
3. complexity
4. changes
5. unit testing
6. (another) end from (one) end 2 http://david.heinemeierhansson.com/2014/tdd-is-dead-long-live-testing.html
7. Browsers
8. real
9. SlimerJS* PhantomJS headless * SlimerJS is not a fully headless browser yet
10. ZombieJS unreal
11. or WebDriver ? Selenium
12. Selenium WebDriver* * Selenium RC
13. Selenium WebDriver* * Selenium RC epic naming #1
14. e2e test browser(s) selenium server API 1 1 WebDriver JSON Wire Protocol Selenium WebDriver 2 Standalone Driver 3 Extension Driver 2 3 2
15. Selenium WebDriver JS Wrapper npm: selenium-webdriver
16. 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
17. Alternatives
18. WebDriverJS http://webdriver.io @webdriverjs npm: webdriverjs
19. WebDriverJS http://webdriver.io @webdriverjs npm: webdriverjs epic naming #2
20. client .init() .url(‘http://...’) .addValue('[name="whoami"]', 'FrankfurtJS!') .buttonClick('#greet') .getText('#message', function(err, text) { assert.equal(text, 'FrankfurtJS!'); }) WebDriverJS
21. DalekJS http://dalekjs.com @dalekjs npm: dalekjs
22. test .open('http://...') .type('[name="whoami"]', 'FrankfurtJS!') .click('#greet') .assert.text('#message').is('FrankfurtJS!') .done(); DalekJS
23. Protractor https://github.com/angular/protractor @ ProtractorTest npm: protractor
24. 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
25. others npm: selenium-test-runner npm: wd . . . npm: wd-sync npm: yiewd . . . . . .
26. Selenium WebDriver Issues browser support frontend code
27. end 2 end for the win recap
28. thank you!
29. this presentation: https://speakerdeck.com/jzelenkov source code: http://bit.ly/1sNtUVL