Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction To Web Application Testing

3,193 views

Published on

Slides cover how to get started testing your web application. Technologies and concepts explained:
- Unit tests (mocha, jasmine, karma)
- System tests (Selenium)
- Code coverage (istanbul)
- CI servers

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Introduction To Web Application Testing

  1. 1. Web Application Testing Ynon Perek ynon@ynonperek.com http://ynonperek.com
  2. 2. Agenda • Developing for the web. Why is it hard? • What can you test? • Testing architecture
  3. 3. Why is it hard?
  4. 4. Why is it hard? • Many different browsers • Many different devices
  5. 5. Automatic testing is your only way out …
  6. 6. Imagine … • Short feedback loop on changes • Reduce human mistakes • TDD
  7. 7. Types of Tests Unit tests http://johnny.github.io/jquery-sortable/ System tests
  8. 8. Unit Tests • During development, for the developer • Instant feedback • Future aware • Easy to maintain
  9. 9. System Tests • Tests entire system • For the client • Easy to write
  10. 10. What Can You Test? • Everything … • But you probably shouldn’t
  11. 11. What Should You Test? • Past bugs • Intended behaviour • Edge cases
  12. 12. Testing Architecture Selen ium Chutzpa Ka rm a js-test-driver Jenkins Istan bul QUnit ha oc M Jasmine TeamCity Casp erJS Travis PhantomJS
  13. 13. Testing Architecture style.css main.js index.html car.js race.js
  14. 14. Testing Architecture style.css main.js index.html car.js race.js
  15. 15. Testing Architecture style.css main.js index.html mocha.js car.js test.html race.js car_test.js
  16. 16. Testing Architecture Blanket Chutzpa Jasmine TeamCity Istanbul Karma Mocha Jenkins JSCoverage js-test-driver QUnit Selenium CasperJS Travis
  17. 17. Unit Testing Framework • Provides structure to test code • Easy to report failures • Written in JavaScript
  18. 18. Unit Testing Framework describe('Array', function(){ describe('#indexOf()', function(){ it('should return -1 when not present', function(){ [1,2,3].indexOf(5).should.equal(-1); [1,2,3].indexOf(0).should.equal(-1); }) }) })
  19. 19. Unit Test Report
  20. 20. Available Frameworks • Mocha • Jasmine • QUnit • http://en.wikipedia.org/wiki/ List_of_unit_testing_frameworks#JavaScript
  21. 21. System Testing Tools • Control an automatic browser • Can use any programming language
  22. 22. System Testing require "selenium-webdriver" ! driver = Selenium::WebDriver.for :firefox driver.navigate.to "http://duckduckgo.com" ! element = driver.find_element(:name, 'q') element.send_keys "Hello WebDriver!" element.submit ! puts driver.title ! driver.quit
  23. 23. System Testing Tool • We’ll use selenium • It’s stable and flexible • Really easy to automate
  24. 24. Test Runners • Run tests, report errors • Used from command line or IDE • Available options: • Karma, Chutzpa, js-test-driver
  25. 25. Continuous Integration • Checkout latest from source control • Run all tests • Report failures
  26. 26. Continuous Integration • Travis • Jenkins • TeamCity
  27. 27. Code Coverage • % of the code being tested • 70-80% is good • Istanbul is the tool
  28. 28. Coverage Report
  29. 29. Balancing Tests • Few system / scenario tests • Many unit tests
  30. 30. Resources • Chuzpa screencast for VS2012:
 http://www.youtube.com/watch? v=meJ94rAN7P8 • Miško Hevery on Unit Tests (google tech talks):
 http://www.youtube.com/watch? v=wEhu57pih5w
  31. 31. What Next • Write unit tests • Write functional tests • Deploy a CI • Set up coverage and test reports
  32. 32. Ready? Let’s Go! • Ynon Perek • http://ynonperek.com • ynon@ynonperek.com

×