[CLIW] Web testing

  • 1,342 views
Uploaded on

Short presentation about web testing

Short presentation about web testing

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,342
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web testing A general approach CLIW Bogdan GazaTuesday, January 10, 12
  • 2. Agenda What is web testing? Tools & techniques Practical examples - demo Conclusions CLIW Bogdan GazaTuesday, January 10, 12
  • 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. What is web testing? ... software testing with a focus on web applications. CLIW Bogdan GazaTuesday, January 10, 12
  • 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. Unit testing for client side code CLIW Bogdan GazaTuesday, January 10, 12
  • 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. Unit testing for client side code • Popular frameworks: • QUnit • JSUnit • Selenium • YUITest • and many more CLIW Bogdan GazaTuesday, January 10, 12
  • 9. Unit testing for client side code • Popular frameworks: • QUnit • JSUnit • Selenium • YUITest • and many more CLIW Bogdan GazaTuesday, January 10, 12
  • 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. 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. Unit testing for client side code • QUnit CLIW Bogdan GazaTuesday, January 10, 12
  • 13. Unit testing for client side code • Automatation • Running unit tests outside the browser? CLIW Bogdan GazaTuesday, January 10, 12
  • 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. 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. 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. Client side performance testing CLIW Bogdan GazaTuesday, January 10, 12
  • 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. Client side performance testing • Measuring: • Insert JS code and measure performance • Browser web developer tools - waterfall diagram CLIW Bogdan GazaTuesday, January 10, 12
  • 20. Client side performance testing CLIW Bogdan GazaTuesday, January 10, 12
  • 21. Usability testing CLIW Bogdan GazaTuesday, January 10, 12
  • 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. 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. Functional testing CLIW Bogdan GazaTuesday, January 10, 12
  • 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. 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. 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. Functional testing • How? • Selenium CLIW Bogdan GazaTuesday, January 10, 12
  • 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. 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. Practical examples - demo CLIW Bogdan GazaTuesday, January 10, 12
  • 32. Conclusions CLIW Bogdan GazaTuesday, January 10, 12
  • 33. Client-side web testing improves the quality of your software CLIW Bogdan GazaTuesday, January 10, 12
  • 34. Client-side web testing can be cumbersome CLIW Bogdan GazaTuesday, January 10, 12
  • 35. But saves bug tracking/fixing time, and is a must in business critical software CLIW Bogdan GazaTuesday, January 10, 12
  • 36. Questions! CLIW Bogdan GazaTuesday, January 10, 12
  • 37. Thanks! CLIW Bogdan GazaTuesday, January 10, 12