Testing by hand is easy but takes a lot of time. At Drivr (drivr.com) we try to automate everything including testing before releasing our applications. I will share our experience how we have reached zero manual testing after releases and how we are sure that our applications still work, CSS changes haven't broken layout, and our web sites still look good on different browsers and on mobile devices.

1. Web test automation
& Best practices
by

2. About me
Gediminas Guoba
Developer @ drivr.com
gg@drivr.com
gediminasgu@gmail.com
https://github.com/gediminasgu

3. About drivr.com

4. Selenium 2.0 (WebDriver)

5. IWebDriver driver = new FirefoxDriver();
driver.Navigate().GoToUrl("http://www.google.com/");// Find the text input element by its name
IWebElement query = driver.FindElement(By.Name("q"));// Enter something to search for
query.SendKeys("Cheese");// Now submit the form. WebDriver will find the form for us from the
element
query.Submit();// Google's search is rendered dynamically with JavaScript.// Wait for the page to
load, timeout after 10 seconds
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until((d) => { return d.Title.ToLower().StartsWith("cheese"); });// Should see: "Cheese -
Google Search"
System.Console.WriteLine("Page title is: " + driver.Title);//Close the browser
driver.Quit();
Sample code

6. Challenges

7. Challenge 1: Layout, CSS, form
changes brakes tests
<form>
<input type=”text” id=”q” />
<input type=”submit” value=”Search” id=”submitBtn” />
</form>
Don’t use weak selectors like:
findElement by //form/input[type=submit]
Use id’s instead:
findElement by id ‘submitBtn’

8. Challenge 1: Layout, CSS, form
changes brakes tests
<form>
<input type=”text” id=”q” />
<input type=”submit” class=”btn” id=”submitBtn” />
</form>
Don’t use CSS class selectors like:
findElement by .btn
Use id’s instead:
findElement by id ‘submitBtn’

9. Challenge 1: Layout, CSS, form
changes brakes tests

10. Challenge 2: Testing CSS and layout
changes
Fighting layout bugs
https://code.google.com/p/fighting-layout-bugs/
Screenshot comparison (later)

11. Challenge 3: Data changes in
database
Don’t rely on data which can change
Have a “save” corner for your data
Or create a test data automatically
Or… have a separate test environment

12. Challenge 4: Simulation of different
situations
Special data config on DB
Data stubs in API
Data mocking on client side (later)

13. Challenge 5: Test stability
“Thread.Sleep()” is your enemy
Use WebDriverWait instead
// Google's search is rendered dynamically with JavaScript.// Wait for the page to load, timeout after 10
seconds
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until((d) => { return d.Title.ToLower().StartsWith("cheese"); });
Retry, retry, wait and retry again
Do it simple!

14. Challenge 6: Long running tests
Run tests in parallel
Split big test to a few smaller tests
Replace with JavaScript unit tests where
possible (later)
1000 unit tests takes 2-3 seconds
4-5 UI tests takes one minute

15. Challenge 7: Run tests in Production
Choose some tests to confirm your release to
production
We do not change any data

16. Challenge 0: Automation oriented
culture
Every team member must agree on automated
tests
Test is as much important as feature is
Don’t leave tests for “next sprint”
Do not release if even single test fails
Be prepared for long learning

17. Testing on different
browsers

18. Cross platform testing
Selenium supports many browsers + iOS and
Android
Run different OS for Selenium?
Sauce Labs
http://saucelabs.com
BrowserStack
http://www.browserstack.com/

19. Screenshot comparison

20. Selenium screenshot browser
Available at:
https://github.com/gediminasgu/selenium-screenshot-browser
Comparison done with: http://www.imagemagick.org/

21. Javascript tests

22. JavaScript unit tests
Jasmine testing framework
http://pivotal.github.io/jasmine/
AngularJS + HTTP mocking
http://docs.angularjs.org/api/ngMock.$httpBackend
Karma as tests runner
http://karma-runner.github.io/
E2E testing with
AngularJShttp://docs.angularjs.org/guide/dev_guide.e2e-testing
Thousands of tests in a seconds
Much stable than UI tests
Much easier to write!

23. Final word
Test automation is continuous process
Be prepared for long learning
Screenshot comparison rules!
AngularJS and Javascript unit testing is
awesome!

24. References
Selenium WebDriver
http://docs.seleniumhq.org/download/
Screenshot browser
https://github.com/gediminasgu/selenium-screenshot-browser
Jasmine - Javascript testing framework
http://pivotal.github.io/jasmine/
AngularJS - Javascript MVW framework
http://angularjs.org/
Karma - Javascript tests runner
http://karma-runner.github.io

25. Thank You!
Questions?