5.9 Testing for Elements on HTML Forms

5.9.1 Problem

You want to test for the existence of various elements in your HTML forms, such as buttons and fields.

5.9.2 Solution

Use JUnit's WebForm class to parse the HTML form. WebForm provides numerous methods to check that buttons, fields, radio buttons, and other elements exist on the page.

5.9.3 Discussion

Building on the example from the previous recipe, you might start by writing a test to check for the existence of buttons on the HTML page as shown here.

public void testButtonsOnSubscriptionForm(  ) throws Exception {
    WebForm form = getBlankSubscriptionForm(  );
    SubmitButton subscribeBtn = form.getSubmitButton("subscribeBtn");
    SubmitButton unsubscribeBtn = form.getSubmitButton("unsubscribeBtn");

    assertNotNull("subscribeBtn should not be null", subscribeBtn);
    assertNotNull("unsubscribeBtn should not be null", unsubscribeBtn);
}

The getBlankSubscriptionForm( ) method is shown back in Example 5-5. When you first write this test, it fails because the buttons do not exist yet. After observing the test failure, you can update the JSP from Example 5-7 to include the two buttons.

    <form method="post" action="subscription" id="subscriptionForm">
        <input type="submit" name="subscribeBtn" value="Subscribe"/>
        <input type="submit" name="unsubscribeBtn" value="Unsubscribe"/>
    </form>

Now, the testButtonsOnSubscriptionForm( ) test should pass. Next, you might want to test for fields that allow the user to enter their name and email address. Here is that test code:

    public void testFieldsOnSubscriptionForm(  ) throws Exception {
        WebForm form = getBlankSubscriptionForm(  );

        // get the values of the two text fields
        // HttpUnit treats most HTML form elements the same way
        String nameFieldValue = form.getParameterValue("nameField");
        String emailFieldValue = form.getParameterValue("emailField");

        // the empty fields should contain empty strings. If they are
        // null, this indicates they are not present on the page.
        assertEquals("nameField", "", nameFieldValue);
        assertEquals("emailFieldValue", "", emailFieldValue);
    }

The getParameterValue( ) method checks to see if the HTML form contains elements with a given name. We are looking for input fields with certain names. You can also use the getParameterValue( ) method to check for other HTML form elements, such as lists and multiline text areas.

Example 5-8 shows the JSP, containing all of the form elements that our tests are checking for.

Example 5-8. JSP containing the HTML form

<html>
  <head>
    <title>Newsletter Subscription</title>
  </head>

  <body>
    <h1>Newsletter Subscription</h1>
    <form method="post" action="subscription" id="subscriptionForm">
        <table>
          <tr>
            <td>Name:</td>
            <td><input type="text" name="nameField"></td>
          </tr>
          <tr>
            <td>Email:</td>
            <td><input type="text" name="emailField"> (required)</td>
          </tr>
        </table>
        <input type="submit" name="subscribeBtn" value="Subscribe"/>
        <input type="submit" name="unsubscribeBtn" value="Unsubscribe"/>
    </form>
  </body>
</html>

Figure 5-2 shows what the JSP looks like when rendered in Mozilla. This is a simple page layout, but you can add fancy layout and graphics later. Again, having the unit tests in place allows you to make page layout changes later without fear of accidentally breaking the web application functionality that currently works.

Figure 5-2. Newsletter subscription page

It is important to note that the HttpUnit tests are not verifying every aspect of page layout. While they do a good job of testing the page's functionality, you must still manually inspect the actual web application to ensure the page layout is visually appealing and correct.