Web Application Testing
Ynon Perek	

ynon@ynonperek.com	

http://ynonperek.com
Agenda
• Developing for the web. Why is it hard?	

• What can you test?	

• Testing architecture
Why is it hard?
Why is it hard?
• Many different browsers	

• Many different devices
Automatic testing is
your only way out …
Imagine …
• Short feedback loop on changes	

• Reduce human mistakes	

• TDD
Types of Tests
Unit tests

http://johnny.github.io/jquery-sortable/

System tests
Unit Tests
• During development, for the developer	

• Instant feedback	

• Future aware	

• Easy to maintain
System Tests
• Tests entire system	

• For the client	

• Easy to write
What Can You Test?
• Everything …	

• But you probably shouldn’t
What Should You Test?
• Past bugs	

• Intended behaviour	

• Edge cases
Testing Architecture
Selen

ium

Chutzpa
Ka
rm

a

js-test-driver
Jenkins

Istan

bul

QUnit

ha
oc
M

Jasmine

TeamCity
C...
Testing Architecture
style.css

main.js
index.html

car.js
race.js
Testing Architecture
style.css

main.js
index.html

car.js
race.js
Testing Architecture
style.css

main.js
index.html

mocha.js

car.js

test.html

race.js

car_test.js
Testing Architecture
Blanket

Chutzpa

Jasmine

TeamCity

Istanbul

Karma

Mocha

Jenkins

JSCoverage

js-test-driver QUni...
Unit Testing Framework
• Provides structure to test code	

• Easy to report failures	

• Written in JavaScript
Unit Testing Framework
describe('Array', function(){
describe('#indexOf()', function(){
it('should return -1 when not pres...
Unit Test Report
Available Frameworks
• Mocha	

• Jasmine	

• QUnit	

•

http://en.wikipedia.org/wiki/
List_of_unit_testing_frameworks#Java...
System Testing Tools
• Control an automatic browser	

• Can use any programming language
System Testing
require "selenium-webdriver"
!
driver = Selenium::WebDriver.for :firefox
driver.navigate.to "http://duckduc...
System Testing Tool
• We’ll use selenium	

• It’s stable and flexible	

• Really easy to automate
Test Runners
• Run tests, report errors	

• Used from command line or IDE	

• Available options:	

• Karma, Chutzpa, js-te...
Continuous Integration
• Checkout latest from source control	

• Run all tests	

• Report failures
Continuous Integration
• Travis	

• Jenkins	

• TeamCity
Code Coverage
• % of the code being tested	

• 70-80% is good	

• Istanbul is the tool
Coverage Report
Balancing Tests
• Few system / scenario tests	

• Many unit tests
Resources
• Chuzpa screencast for VS2012:


http://www.youtube.com/watch?
v=meJ94rAN7P8	


• Miško Hevery on Unit Tests (g...
What Next
• Write unit tests	

• Write functional tests	

• Deploy a CI	

• Set up coverage and test reports
Ready? Let’s Go!
• Ynon Perek	

• http://ynonperek.com	

• ynon@ynonperek.com
Upcoming SlideShare
Loading in …5
×

Introduction To Web Application Testing

2,411 views
2,152 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
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,411
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
37
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

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

×