Web testing                           A general approach  CLIW                                          Bogdan GazaTuesday...
Agenda                          What is web testing?                          Tools & techniques                          ...
What is web testing?                    • Write a lot of code implies that someday                           things will b...
What is web testing?               ... software testing with a focus on web               applications.  CLIW             ...
How can we do web testing?                • Different approaches:                 - Unit testing client side code         ...
Unit testing for client side code  CLIW                                        Bogdan GazaTuesday, January 10, 12
Unit testing for client side code                  • Why?                   • Cross browser issues                   • Ref...
Unit testing for client side code                  • Popular frameworks:                   • QUnit                   • JSU...
Unit testing for client side code                  • Popular frameworks:                   • QUnit                   • JSU...
Unit testing for client side code                  • QUnit                   • Built for jQuery                   • Break ...
Unit testing for client side code           • QUnit            test("a basic test example", function() {              ok( ...
Unit testing for client side code           • QUnit  CLIW                                                        Bogdan Ga...
Unit testing for client side code           • Automatation           • Running unit tests outside the browser?  CLIW      ...
Unit testing for client side code           • Unit tests for client side code can be                   integrated with cur...
Unit testing for client side code           • PhantomJS           • Headless WebKit with JavaScript API           • Native...
Unit testing for client side code           • PhantomJS           • Headless WebKit with JavaScript API           • Native...
Client side performance testing  CLIW                                      Bogdan GazaTuesday, January 10, 12
Client side performance testing                          In order to measure client side performance                      ...
Client side performance testing             • Measuring:              • Insert JS code and measure performance            ...
Client side performance testing  CLIW                                                      Bogdan GazaTuesday, January 10,...
Usability testing  CLIW                                        Bogdan GazaTuesday, January 10, 12
Usability testing                  • Usability testing is a technique used in user-                          centered inte...
Usability testing                  • How?                   • Hallway testing: random set of people are                   ...
Functional testing  CLIW                                         Bogdan GazaTuesday, January 10, 12
Functional testing                  • Functional testing is a type of black box                          testing that base...
Functional testing              • How?               • Specifying scenarios:              Feature: Addition               ...
Functional testing              • How?               • Specifying scenarios:                 Scenario Outline: Add two num...
Functional testing            • How?             • Selenium  CLIW                                         Bogdan GazaTuesd...
Functional testing          • Selenium           • Test automation tool for web applications           • Can be used for m...
Functional testing          • Selenium IDE           • Firefox plugin           • IDE for selenium tests           • Provi...
Practical examples - demo  CLIW                                                Bogdan GazaTuesday, January 10, 12
Conclusions  CLIW                                  Bogdan GazaTuesday, January 10, 12
Client-side web testing improves                            the quality of your software  CLIW                            ...
Client-side web testing can be                                   cumbersome  CLIW                                         ...
But saves bug tracking/fixing time, and is                 a must in business critical software  CLIW                      ...
Questions!  CLIW                                 Bogdan GazaTuesday, January 10, 12
Thanks!  CLIW                              Bogdan GazaTuesday, January 10, 12
Upcoming SlideShare
Loading in...5
×

[CLIW] Web testing

1,462

Published on

Short presentation about web testing

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,462
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[CLIW] Web testing

  1. 1. Web testing A general approach CLIW Bogdan GazaTuesday, January 10, 12
  2. 2. Agenda What is web testing? Tools & techniques Practical examples - demo Conclusions CLIW Bogdan GazaTuesday, January 10, 12
  3. 3. What is web testing? • Write a lot of code implies that someday things will break / stop working • Fixing a bug is simple, finding it can be difficult • Finding a bug while trying to maintain cross-browser compatibility can be a nightmare CLIW Bogdan GazaTuesday, January 10, 12
  4. 4. What is web testing? ... software testing with a focus on web applications. CLIW Bogdan GazaTuesday, January 10, 12
  5. 5. How can we do web testing? • Different approaches: - Unit testing client side code - Client side performance testing - Usability testing - Functional testing - etc CLIW Bogdan GazaTuesday, January 10, 12
  6. 6. Unit testing for client side code CLIW Bogdan GazaTuesday, January 10, 12
  7. 7. Unit testing for client side code • Why? • Cross browser issues • Refactoring & Bug fixing can produce unforeseen problems • When? • When code base is large enough • When cross browser compatibility is a must CLIW Bogdan GazaTuesday, January 10, 12
  8. 8. Unit testing for client side code • Popular frameworks: • QUnit • JSUnit • Selenium • YUITest • and many more CLIW Bogdan GazaTuesday, January 10, 12
  9. 9. Unit testing for client side code • Popular frameworks: • QUnit • JSUnit • Selenium • YUITest • and many more CLIW Bogdan GazaTuesday, January 10, 12
  10. 10. Unit testing for client side code • QUnit • Built for jQuery • Break code into logical chuncks for testing • Focus on one method at a time • http://docs.jquery.com/QUnit CLIW Bogdan GazaTuesday, January 10, 12
  11. 11. Unit testing for client side code • QUnit test("a basic test example", function() { ok( true, "this test is fine" ); var value = "hello"; equal( value, "hello", "We expect value to be hello" ); }); module("Module A"); test("first test within module", function() { ok( true, "all pass" ); }); test("second test within module", function() { ok( true, "all pass" ); }); CLIW Bogdan GazaTuesday, January 10, 12
  12. 12. Unit testing for client side code • QUnit CLIW Bogdan GazaTuesday, January 10, 12
  13. 13. Unit testing for client side code • Automatation • Running unit tests outside the browser? CLIW Bogdan GazaTuesday, January 10, 12
  14. 14. Unit testing for client side code • Unit tests for client side code can be integrated with current build systems • Using Node.js / Rhino we can create a browser-like environment CLIW Bogdan GazaTuesday, January 10, 12
  15. 15. Unit testing for client side code • PhantomJS • Headless WebKit with JavaScript API • Native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. • PhantomJS can be controlled or scripted using JavaScript API CLIW Bogdan GazaTuesday, January 10, 12
  16. 16. Unit testing for client side code • PhantomJS • Headless WebKit with JavaScript API • Native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. • PhantomJS can be controlled or scripted using JavaScript API CLIW Bogdan GazaTuesday, January 10, 12
  17. 17. Client side performance testing CLIW Bogdan GazaTuesday, January 10, 12
  18. 18. Client side performance testing In order to measure client side performance testing, metrics about the environment need to be gathered. Ex: How much times does it take to load the page? CLIW Bogdan GazaTuesday, January 10, 12
  19. 19. Client side performance testing • Measuring: • Insert JS code and measure performance • Browser web developer tools - waterfall diagram CLIW Bogdan GazaTuesday, January 10, 12
  20. 20. Client side performance testing CLIW Bogdan GazaTuesday, January 10, 12
  21. 21. Usability testing CLIW Bogdan GazaTuesday, January 10, 12
  22. 22. Usability testing • Usability testing is a technique used in user- centered interaction design to evaluate a product by testing it on users. (Wikipedia) CLIW Bogdan GazaTuesday, January 10, 12
  23. 23. Usability testing • How? • Hallway testing: random set of people are brought to test the product/service. • Expert review: use experts (possibly from companies that specialize in usability testing) • Usually complicated and error prone CLIW Bogdan GazaTuesday, January 10, 12
  24. 24. Functional testing CLIW Bogdan GazaTuesday, January 10, 12
  25. 25. Functional testing • Functional testing is a type of black box testing that bases its test cases on the specifications of the software component under test. • Black-box: http://en.wikipedia.org/wiki/Black_box_testing CLIW Bogdan GazaTuesday, January 10, 12
  26. 26. Functional testing • How? • Specifying scenarios: Feature: Addition In order to avoid silly mistakes As a math noobie I want to be told the sum of two numbers CLIW Bogdan GazaTuesday, January 10, 12
  27. 27. Functional testing • How? • Specifying scenarios: Scenario Outline: Add two numbers Given I have entered <input_1> into the calculator And I have entered <input_2> into the calculator When I press <button> Then the result should be <output> on the screen CLIW Bogdan GazaTuesday, January 10, 12
  28. 28. Functional testing • How? • Selenium CLIW Bogdan GazaTuesday, January 10, 12
  29. 29. Functional testing • Selenium • Test automation tool for web applications • Can be used for most of the browsers/ platform combinations • Supports many languages CLIW Bogdan GazaTuesday, January 10, 12
  30. 30. Functional testing • Selenium IDE • Firefox plugin • IDE for selenium tests • Provides record and playback functionalities • Exports tests in different formats (HTML, Ruby, Python etc) CLIW Bogdan GazaTuesday, January 10, 12
  31. 31. Practical examples - demo CLIW Bogdan GazaTuesday, January 10, 12
  32. 32. Conclusions CLIW Bogdan GazaTuesday, January 10, 12
  33. 33. Client-side web testing improves the quality of your software CLIW Bogdan GazaTuesday, January 10, 12
  34. 34. Client-side web testing can be cumbersome CLIW Bogdan GazaTuesday, January 10, 12
  35. 35. But saves bug tracking/fixing time, and is a must in business critical software CLIW Bogdan GazaTuesday, January 10, 12
  36. 36. Questions! CLIW Bogdan GazaTuesday, January 10, 12
  37. 37. Thanks! CLIW Bogdan GazaTuesday, January 10, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×