Post on 11-May-2015
description
Web testingA general approach
Bogdan GazaCLIW
Tuesday, January 10, 12
Agenda
What is web testing?
Tools & techniques
Practical examples - demo
Conclusions
Bogdan GazaCLIW
Tuesday, January 10, 12
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
Bogdan GazaCLIW
Tuesday, January 10, 12
What is web testing?
... software testing with a focus on web applications.
Bogdan GazaCLIW
Tuesday, January 10, 12
How can we do web testing?
Bogdan GazaCLIW
• Different approaches:
- Unit testing client side code
- Client side performance testing
- Usability testing
- Functional testing
- etc
Tuesday, January 10, 12
Unit testing for client side code
Bogdan GazaCLIW
Tuesday, January 10, 12
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
Bogdan GazaCLIW
Tuesday, January 10, 12
Unit testing for client side code
• Popular frameworks:
• QUnit
• JSUnit
• Selenium
• YUITest
• and many more
Bogdan GazaCLIW
Tuesday, January 10, 12
Unit testing for client side code
• Popular frameworks:
• QUnit
• JSUnit
• Selenium
• YUITest
• and many more
Bogdan GazaCLIW
Tuesday, January 10, 12
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
Bogdan GazaCLIW
Tuesday, January 10, 12
Unit testing for client side code
• QUnit
Bogdan GazaCLIW
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" );});
Tuesday, January 10, 12
Unit testing for client side code
• QUnit
Bogdan GazaCLIW
Tuesday, January 10, 12
Unit testing for client side code
• Automatation
• Running unit tests outside the browser?
Bogdan GazaCLIW
Tuesday, January 10, 12
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
Bogdan GazaCLIW
Tuesday, January 10, 12
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
Bogdan GazaCLIW
Tuesday, January 10, 12
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
Bogdan GazaCLIW
Tuesday, January 10, 12
Client side performance testing
Bogdan GazaCLIW
Tuesday, January 10, 12
Bogdan GazaCLIW
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?
Tuesday, January 10, 12
Bogdan GazaCLIW
Client side performance testing
• Measuring:
• Insert JS code and measure performance
• Browser web developer tools - waterfall diagram
Tuesday, January 10, 12
Bogdan GazaCLIW
Client side performance testing
Tuesday, January 10, 12
Usability testing
Bogdan GazaCLIW
Tuesday, January 10, 12
Bogdan GazaCLIW
Usability testing
• Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. (Wikipedia)
Tuesday, January 10, 12
Bogdan GazaCLIW
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
Tuesday, January 10, 12
Functional testing
Bogdan GazaCLIW
Tuesday, January 10, 12
Bogdan GazaCLIW
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
Tuesday, January 10, 12
Bogdan GazaCLIW
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
Tuesday, January 10, 12
Bogdan GazaCLIW
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
Tuesday, January 10, 12
Bogdan GazaCLIW
Functional testing
• How?
• Selenium
Tuesday, January 10, 12
Bogdan GazaCLIW
Functional testing
• Selenium
• Test automation tool for web applications
• Can be used for most of the browsers/platform combinations
• Supports many languages
Tuesday, January 10, 12
Bogdan GazaCLIW
Functional testing
• Selenium IDE
• Firefox plugin
• IDE for selenium tests
• Provides record and playback functionalities
• Exports tests in different formats (HTML, Ruby, Python etc)
Tuesday, January 10, 12
Practical examples - demo
Bogdan GazaCLIW
Tuesday, January 10, 12
Conclusions
Bogdan GazaCLIW
Tuesday, January 10, 12
Client-side web testing improves the quality of your software
Bogdan GazaCLIW
Tuesday, January 10, 12
Client-side web testing can be cumbersome
Bogdan GazaCLIW
Tuesday, January 10, 12
But saves bug tracking/fixing time, and is a must in business critical software
Bogdan GazaCLIW
Tuesday, January 10, 12
Questions!
Bogdan GazaCLIW
Tuesday, January 10, 12
Thanks!
Bogdan GazaCLIW
Tuesday, January 10, 12