Using JMeter to Test the Web Application s Form Entry

Using JMeter to Test the Web Application's Form Entry

In this example, we will test the back-end product form entry. In Chapter 13 we created a case study that added to the pet store example the functionality to add, delete, and edit products. In this section, we will write code that tests this feature. Then, we will combine this test with the last test so we can simulate customers browsing the Web site at the same time we simulate the pet store clerk adding new pets, to see what happens to performance.

First we will add a Web-application test that tests adding products. If we open the backend product page (http://localhost/pet/mgmt/product.jsp?id=2221) in a browser and view the source, the form looks like this:

 <form method="POST" action="prod_sys.jsp">   <p>Name: <input type="text" name="name" value="" size="20"></p>   <p>Price: <input type="text" name="price" value=" 
 <form method="POST" action="prod_sys.jsp"> <p>Name: <input type="text" name="name" value="" size="20"></p> <p>Price: <input type="text" name="price" value="$0.00" size="20"></p> <p>Qty: <input type="text" name="qty" value="0" size="20"></p> <input type="hidden" name="subcategoryID" value="222" size="20"> <input type="hidden" name="productNum" value="4" size="20"> <input type="hidden" name="newProduct" value="true" size="20"> <input type="hidden" name="productID" value="0" size ="20"> <p>Description:</p> <p><textarea rows="8" name="description" cols="84" ></textarea></p> <p>&nbsp;</p> <p><input type="submit" value="Submit" name="submit"><input type="reset" value="Reset" name ="reset"></p> </form> 
 .00" size="20"></p>   <p>Qty: <input type="text" name="qty" value="0" size="20"></p>   <input type="hidden" name="subcategoryID" value="222" size="20">   <input type="hidden" name="productNum" value="4" size="20">   <input type="hidden" name="newProduct" value="true" size="20">   <input type="hidden" name="productID" value="0" size="20">   <p>Description:</p>   <p><textarea rows="8" name="description" cols="84" ></textarea></p>   <p>&nbsp;</p>   <p><input type="submit" value="Submit" name="submit"><input type="reset"                   value="Reset" name="reset"></p> </form> 

All we have to do with JMeter is simulate adding a product with this form. Thus we need to fill in the form parameters:

• "name" is the name of the new product we are creating.

• "price" can be set to any valid price.

• "qty" can be set to any valid quantity.

• "subcategoryID" must be set to a valid subcategory id. Consult the ID field of the subcategory table to see a valid id. If the test data hasn't changed, "222" is the subcategory id for Cats.

• "productNum" is the number of products in the current subcategory. We don't have to know how many products are in the subcategory; instead, we just make productNum really largein this case, "99999".

• "newProduct" should be set to "true", which just means that we are adding a new product rather than editing an existing product.

• "productID" can be set to "0" because this value simulates adding a new product. (This parameter really is not used.)

• "description" can be any value.

We add all these parameters to the Web-application controller we added, and then change the method from GET to POST to match the HTML form. We set everything else just as we did in the earlier example, and we set the path to pet/mgmt/prod_sys.jsp to match the "action" attribute in the HTML form. Our Web controller configuration panel looks like this:

We can run this test now, but we will only be able to run it oncethe test is essentially hard-coding the primary key of the product, which must be unique. To run the test many times, we need to create another test to delete the product we set up in this test. So, we add another Web-testing controller to delete the one we just added.

The form we are trying to simulate is the backend subcategory form (http://localhost/pet/mgmt/subcategory.jsp?id=222) shown below. The HTML for the form we are tying to simulate is as follows :

 <form method="POST" action="subcat_sys.jsp">   <table border="1" width="100%">     <tr>       <td width="9%">          <input type="checkbox" name="delete_2221" value="OFF">delete</td>       <td width="86%">         <a href="product.jsp?id=2221" target="_blank">Calico</a>        <br>     </td>     </tr>     <tr>       <td width="9%">          <input type="checkbox" name="delete_2222" value="OFF">delete</td>       <td width="86%">          <a href="product.jsp?id=2222" target="_blank">Jaguar</a>        <br>     </td>     </tr>     <tr>       <td width="9%">           <input type="checkbox" name="delete_2223"               value="OFF">delete</td>       <td width="86%">         <a href="product.jsp?id=2223" target="_blank">Siamese</a>        <br>     </td>     </tr>     <tr>       <td width="9%">        <input type="checkbox" name="delete_22299999"               value="OFF">delete</td>       <td width="86%">         <a href="product.jsp?id=22299999" target="_blank">testpet</a>        <br>     </td>     </tr>   </table>   <p>        <input type="submit" value="Submit" name="submit">        <input type="reset" value="Reset" name="Reset">        <input type="submit" value="Add" name="add"></p> </form> 

If we examine the JSP code to which we need to submit this form, we see that the id is embedded in the name of the check box in bold, as follows:

 <input type="checkbox" name="  delete_22299999  "                  value="OFF">delete</td> 

We need to add a parameter to our Web testing controller, as follows:

• Set the name to "Delete product".

• Set the domain to localhost.

• Leave the port at 80.

• Set the path to pet/mgmt/subcat_sys.jsp.

• Change the method to POST (default is GET).

• Add a parameter to delete_22299999 and set the value to "ON".

When we are done, the configuration panel looks like this:

Finally, for completeness, let's add the ability to test editing a product. We'll set up two of these tests: one to edit a product and one to change it back. To set up the editing test, we add a new Web-controller tester and configure it as follows:

• Set the name to "Edit product".

• Set the domain to localhost.

• Leave the port at 80.

• Set the path to pet/mgmt/prod_sys.jsp.

• Change the method to post (default is get).

• Add the following name/value pairs to the parameter list:

  • "name"="Calico"

  • "price"="$500"

  • "qty"="5"

  • "subcategoryID"="222"

  • "newProduct"="false"

  • "productNum"="0"

  • "description"="Calico data has been edited!"

When we are done, the configuration panel looks like the following.

We recommend setting the thread count to 1 and then using the timer to adjust the frequency of edits, because these tests should execute in order. Before running the test, add some listeners and a timer as in the last example. Go ahead and run the test and examine the results.

Notice that we can save any node. Let's save this test and create or reload the last test, and then save it at the ThreadGroup node. Then we can load both the front-end browsing and the backend product management into the test case by selecting Open from the popup-menu, and they will run at the same time.

Because the nodes are saved as XML, we could write a program that reads the test data or that generates it quite easily. The next figure shows the XML text for the test we just created as displayed in Internet Explorer.

JMeter has other ways of creating the setup XML for tests. We can set up a proxy server that listens to requests and records them in an XML text that we can use for test cases. Refer to the user guide under Recording Browser Activity to learn how to do this. This technique can shave off some of the time it takes to create tests. In the next section, we will create a JDBC test.