Short presentation about web testing

1. Web testing
A general approach
CLIW Bogdan Gaza
Tuesday, January 10, 12

2. Agenda
What is web testing?
Tools & techniques
Practical examples - demo
Conclusions
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

4. What is web testing?
... software testing with a focus on web
applications.
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

6. Unit testing for client side code
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

8. Unit testing for client side code
• Popular frameworks:
• QUnit
• JSUnit
• Selenium
• YUITest
• and many more
CLIW Bogdan Gaza
Tuesday, January 10, 12

9. Unit testing for client side code
• Popular frameworks:
• QUnit
• JSUnit
• Selenium
• YUITest
• and many more
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

12. Unit testing for client side code
• QUnit
CLIW Bogdan Gaza
Tuesday, January 10, 12

13. Unit testing for client side code
• Automatation
• Running unit tests outside the browser?
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, 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 Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

17. Client side performance testing
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

19. Client side performance testing
• Measuring:
• Insert JS code and measure performance
• Browser web developer tools - waterfall
diagram
CLIW Bogdan Gaza
Tuesday, January 10, 12

20. Client side performance testing
CLIW Bogdan Gaza
Tuesday, January 10, 12

21. Usability testing
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

24. Functional testing
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, 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 Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

28. Functional testing
• How?
• Selenium
CLIW Bogdan Gaza
Tuesday, 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 Gaza
Tuesday, 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 Gaza
Tuesday, January 10, 12

31. Practical examples - demo
CLIW Bogdan Gaza
Tuesday, January 10, 12

32. Conclusions
CLIW Bogdan Gaza
Tuesday, January 10, 12

33. Client-side web testing improves
the quality of your software
CLIW Bogdan Gaza
Tuesday, January 10, 12

34. Client-side web testing can be
cumbersome
CLIW Bogdan Gaza
Tuesday, January 10, 12

35. But saves bug tracking/fixing time, and is
a must in business critical software
CLIW Bogdan Gaza
Tuesday, January 10, 12

36. Questions!
CLIW Bogdan Gaza
Tuesday, January 10, 12

37. Thanks!
CLIW Bogdan Gaza
Tuesday, January 10, 12