[CLIW] Web testing

Web testingA general approach

Bogdan GazaCLIW

Tuesday, January 10, 12

Agenda

What is web testing?

Tools & techniques

Practical examples - demo

Conclusions

Bogdan GazaCLIW



• 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



... software testing with a focus on web applications.

Bogdan GazaCLIW


How can we do web testing?

Bogdan GazaCLIW

• Different approaches:

- Unit testing client side code

- Client side performance testing

- Usability testing

- Functional testing

- etc


Unit testing for client side code

Bogdan GazaCLIW



• 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



• Popular frameworks:

• QUnit

• JSUnit

• Selenium

• YUITest

• and many more

Bogdan GazaCLIW



• 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


http://docs.jquery.com/QUnit

http://docs.jquery.com/QUnit


• 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" );});



• QUnit

Bogdan GazaCLIW



• Automatation

• Running unit tests outside the browser?

Bogdan GazaCLIW



• 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



• 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


Client side performance testing

Bogdan GazaCLIW


Bogdan GazaCLIW


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?


Bogdan GazaCLIW


• Measuring:

• Insert JS code and measure performance

• Browser web developer tools - waterfall diagram


Bogdan GazaCLIW



Usability testing

Bogdan GazaCLIW


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)


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


Functional testing

Bogdan GazaCLIW


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


http://en.wikipedia.org/wiki/Black_box_testing

http://en.wikipedia.org/wiki/Black_box_testing

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


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


Bogdan GazaCLIW

Functional testing

• How?

• Selenium


Bogdan GazaCLIW

Functional testing

• Selenium

• Test automation tool for web applications

• Can be used for most of the browsers/platform combinations

• Supports many languages


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)


Practical examples - demo

Bogdan GazaCLIW


Conclusions

Bogdan GazaCLIW


Client-side web testing improves the quality of your software

Bogdan GazaCLIW


Client-side web testing can be cumbersome

Bogdan GazaCLIW


But saves bug tracking/fixing time, and is a must in business critical software

Bogdan GazaCLIW


Questions!

Bogdan GazaCLIW


Thanks!

Bogdan GazaCLIW


[CLIW] Web testing

Technology

Transcript of [CLIW] Web testing