Overview explanation on End to End Test Automation with focus UI Testing (and Selenium).

1. Test Automation
& Selenium
Oren Rubin
CEO, Testim.io

2. Oren Rubin

3. ● Why Unit Tests aren't enough?
● Writing Unit Tests !== Writing E2E Tests
● Meet Selenium
● Best practices & Design Patterns
● Selenium Grid
● UI Validations
● Record / Playback
Today's Menu

4. Selenium to UI-Testing is like..
Power Steering & Automatic Transmission is to Driving
I'm
not making you
coffee!

5. Unit Tests: Same language, Easy setup. Synchronous.
// Setup
Account account = new Account();
// Stimuli e.g. click, setting text, XHR
account.login( "borg", "resistance is futile" );
// Validation
assert( account.isLoggedIn(), true );
E2E vs. Unit - same same but different

6. E2E is
the real
SHIT!

7. ● Synchronous?
● Same language?
● Easy setup?
○ Where are the browsers running?
○ Who's in charge of keeping them alive?
E2E is hard!

8. Expected: Actual:
Cowabunga
It gets worse.. I shit you not!
Cowabunga Cowabungaz-index
Cowabungasize
CowabungaThe Flying Pony
Cowabung
a
Over here!
Blur, Focus, ….
CSS
HTML
JS Event

9. One browser.. you wish!
* What about responsive design?!

10. Which language do you prefer?
Test Language?

11. Meet Selenium

12. Why the name Selenium?

13. Selenium 1 - JS based
Selenium 2 - WebDriver & WebElements
Selenium 3 - Mobile
Past, Present, and Future

14. Google Trends - Same for Jobs

15. Example - la login

16. // setup
WebDriver driver = new Chrome();
driver.get("http://www.google.com");
// stimuli
driver.findElement( By.id("user") ).sendKeys("mel brooks");
driver.findElement( By.id("password") ).sendKeys("12345");
driver.findElement( By.id("submit") ).submit();
// assertion
assert(driver.getTitle(), "That's the kind of thing an idiot would have on his luggage!");
// tear down
driver.quit();
Example

17. Architecture
?
Can anyone suggest a good architecture?
...
...

18. One (W3C) Standard to rule them all!
https://code.google.com/p/selenium/wiki/JsonWireProtocol http://www.w3.org/TR/webdriver/

19. HTTP as a universal language
?
The
Wire
Protocol
SDK Driver

20. Closer look
new Chrome(); chromedriver.exe
Browser
HTTP Request
localhost:4444/click
driver = new Chrome();
...
submitBtn.click();
driver
note: don't forget to frequently u
chromedriver.exe

21. Now for Firefox
new Firefox(); webdriver.xpi
Browser
HTTP Request
localhost:4444/click
driver
driver = new Firefox();
...
submitBtn.click();

22. Let's improve
loginChromeTest () {
driver = new Chrome();
loginTest(driver);
}
loginFirefoxTest () {
driver = new Firefox();
loginTest(driver);
}
loginTest (driver) {
driver.findElement( By.id("user") ).sendKeys("mel brooks");
driver.findElement( By.id("password") ).sendKeys("12345");
driver.findElement( By.id("submit") ).submit();
}

23. Page Objects
A Design Pattern.
Provides a programmatic API to drive and interrogate a UI
Best Practices & Design Patterns
http://www.slideshare.net/orenrubin/page-objects-presentation-selenium-conference-2014-38767492

24. // setup
WebDriver driver = new Chrome();
driver.get("http://www.google.com");
// stimuli
driver.findElement( By.id("user") ).sendKeys("mel brooks");
driver.findElement( By.id("password") ).sendKeys("12345");
driver.findElement( By.id("submit") ).submit();
// assertion
assert(driver.getTitle(), "That's the kind of thing an idiot would have on his luggage!");
// tear down
driver.quit();
Example
Simon
says no!
@Test
void loginTest () {

25. Test Automation Architecture
Link to "Page Objects Done Right" Presentation

26. Selenium Grid
● Concurrency
● Multiple
Platforms

27. Remember this?
new Chrome(); chromedriver.exe
Browser
HTTP Request
localhost:8989/click
driver = new Chrome();
...
submitBtn.click();
driver

28. What we want
new Chrome(); chromedriver.exe
Browser
HTTP Request
<some-ip>:8989/click
driver = new Chrome();
...
submitBtn.click();
driver
computer 1 computer 2

29. Selenium Grid
java -jar selenium.jar
-port 4444
-role hub
selenium hub
Node 0 on 10.0

30. Selenium Grid
Node 1 on 10.1
Node 2 on 10.2
selenium node
java -jar selenium.jar -role webdriver -browser firefox
-hubHost 10.0 –port 8989
java -jar selenium.jar
-port 4444
-role hub
selenium node
java -jar selenium.jar -role webdriver -browser chrome
-hubHost 10.0 –port 8989
selenium hub
Node 0 on 10.0
chromedriver.exe
firefox-webdriver.dpi

31. Selenium Grid
new Chrome();
Browser
HTTP Request
10.0:4444/chrome
hub = new URL("10.0:4444/wd/hub")
cap = new Capabilities ("chrome", "v3", "windows")
driver = new RemoteWebDriver( hub, cap );
...
driver
my computer / CI server
Node 1 on 10.1
Node 2 on 10.2
selenium node
java -jar selenium.jar -role webdriver
-hubHost 10.1 –port 8989
java -jar selenium.jar
-port 4444
-role hub
selenium node
java -jar selenium.jar -role webdriver
-hubHost 10.1 –port 8989
selenium hub
Node 0 on 10.0
HTTP Request
10.2:8989/chrome
chromedriver.exe
firefox-webdriver.dpi

32. Selenium Grid
new Chrome();
Browser
HTTP Request
10.0:4444/click
driver = ...
submitBtn = driver.find(By.id("submit"));
submitBtn.click();
driver
my computer / CI server
Node 1 on 10.1
Node 2 on 10.2
selenium node
java -jar selenium.jar -role webdriver
-hubHost 10.1 –port 8989
java -jar selenium.jar
-port 4444
-role hub
selenium node
java -jar selenium.jar -role webdriver
-hubHost 10.1 –port 8989
selenium hub
Node 0 on 10.0
HTTP Request
10.2:8989/click
chromedriver.exe
firefox-webdriver.dpi

33. Browsers in the cloud
Selenium Grid as a Service
SaaS Open source

34. Spot the differences

35. UI Verification - Applitools eye
One image is worth a 1000 assertions

36. Oren Rubin
Testim.io
oren@testim.io
Thank you!