Performance testing on forms

    HTML form is an important part of internet, without it, we will not be able to interact with web server, like placing an order, booking a hotel/flight etc.

    In previous blog, we talked about performance testing on search forms.   But it didn't cover the more complex cases such as select, radio button etc which are typical on HTML forms.  In this blog, we are going to focus on these complex cases and show that the netgend javascript function "getFormField()" can easily take care of them.

   First let's warm up with something simple, this can be seen as a review of previous blog:   suppose we have a form with some text fields to be filled, like "firstName", "lastName", "city", we can generate http request like the following:

 action(http, "http://www.example.com/");  
 a = getFormField(http.replyBody, "registerationForm");  
 a.firstName.value = "john";  
 a.lastName.value = "smith";  
 a.city.value  = "chicago";  
 http.POSTData = combineHttpParam(a);  
 //post data will look like "firstName=john&lastName=smith&city=chicago"
 action(http, "http://www.example.com/register?");  

    In the above code snippet, second parameter to getFormField (in our case "registerationForm") is used to identify the right form in a HTML page.  When HTML page only contains one form, you can leave this parameter empty.

   Of course, this will be more interesting if the fields are read from a csv file.   Suppose we have a file called "users.csv", each of its rows contains first name, last name and city.

 function userInit() {  
  var list = readCSVFile("users.csv");   
  var i = 0 ;  
 }  
 function VUSER () {  
  item = list[i];   
  //here item is an array variable that contains the fields of the row in csv file  
  i ++;   
  action(http, "http://www.example.com/");  
  a = getFormField(http.replyBody, "registrationForm");  
  a.firstName.value = item[0];  
  a.lastName.value = item[1];  
  a.city.value  = item[2];  
  http.POSTData = combineHttpParam(a);  
  action(http, "http://www.example.com/register?");   
 }   

     Note that it will work for both textfield and text area.  The difference from user's point of view is that text field typically has one line, text area can have multiple lines.  In HTML, text field and text area are quite different. Luckily, our users don't need to worry about it -- they are taken care of by netgend test platform.

    What if the form has radio button?   In performance testing we would like to randomly pick a option. Let's suppose, we have radio button with name "vehicle" and it has 4 options: "bike", "car", "pickup", "truck",

 a = getFormField(http.replyBody, "registrationForm");  
 a.vehicle.value = randNumber(1, a.vehicle.size);  
 //...some more assignments to a...  
 http.POSTData = combineHttpParam(a);  

   Here the variable "a.vehicle.size" holds the number of items for a.vehicle, in this case, it's 4.  A good news here:  the above code snippet not only works for radio button, it works for "select" field (a.k.a dropdown box) of a form too.

    What about checkbox. Checkbox is different from radio button in that user can check zero or more items.  So in performance testing, we need to emulate selecting a subset of checkboxes.  How do we do this? randSequence(min, max) function can help.  It will return a subset of the sequence (min, min+1, ...max).  Suppose we have a checkbox group called "area", with items: "n", "nw", "w", "sw", "s", "se", "e", "ne", "c".

 a = getFormField(http.replyBody, "registrationForm");  
 a.area.value = randSequence(1, a.area.size);  
 //...some more assignments to a...  
 http.POSTData = combineHttpParam(a);  

    Finally we put all of them together,  suppose we have a form that has

• select field called "color", 
• radio button group called "vehicleType" and 
• checkbox group called "make".   

Here is code snippet to do performance testing:

 action(http, "http://www.example.com/vehicles");  
 a = getFormField(http.replyBody, "findVehicleForm");  
 a.color.value = randNumber(1, a.color.size);  
 a.vehicleType.value = randNumber(1, a.vehicleType.size);  
 a.make.value = randSequence(1, a.make.size);  
 http.POSTData = combineHttpParam(a);  
 action(http, "http://www.example.com/vehicles");  

    Not bad for a "complex" form, right?