Determining Html Element Visibility with WatiN

I recently started using WatiN to write automated Web application tests for the first time. WatiN is a great and rapidly maturing tool with lots of developer support, and I highly recommend it based on my experiences so far. But after writing several tests of dynamic screen elements I realized the tests weren't verifying everything I thought they were verifying.

When you use WatiN "Find" syntax to search for elements and screen text there's no obvious distinction made between hidden and visible elements. The screens I was testing use ASP.NET validation controls to perform client-side validation and include other dynamic elements such as the AJAX.NET ModalPopupExtender. I wanted to verify that these elements were visible and hidden at the appropriate times, and the simplest way of accomplishing this with WatiN was not immediately obvious.

After digging around in the API a bit I came up with a method that's simple, robust and seems to perform reasonably well. As demonstrated in the sample tests below, you can simply walk up the element hierarchy checking whether an element or any of its parents are styled with "display: none".

   1: using System.Text.RegularExpressions;

   2: using NUnit.Framework;

   3: using WatiN.Core;

   4:  

   5: [TestFixture]

   6: public class WatinTest

   7: {

   8:     [Test]

   9:     public void PopupDisplayed()

  10:     {

  11:         var ie = new IE();

  12:         ie.GoTo("http://www.example.com");

  13:  

  14:         Div popup = ie.Div(Find.ById(new Regex("pnlPopup$")));

  15:         Assert.IsTrue(IsDisplayed(popup));

  16:     }

  17:  

  18:     [Test]

  19:     public void ValidatorDisplayed()

  20:     {

  21:         var ie = new IE();

  22:         ie.GoTo("http://www.example.com");

  23:  

  24:         Span validator = ie.Span(Find.ByText("Required field"));

  25:         Assert.IsTrue(IsDisplayed(validator));

  26:     }

  27:  

  28:     public bool IsDisplayed(Element element)

  29:     {

  30:         if (string.Equals(element.Style.Display, "none"))

  31:         {

  32:             return false;

  33:         }

  34:         if (element.Parent != null)

  35:         {

  36:             return IsDisplayed(element.Parent);

  37:         }

  38:         return true;

  39:     }

  40: }

The first test case (PopupDisplayed) searches for the div element representing a modal popup panel by the element id. It uses a regular expression since the ASP.NET control ids for nested controls are unwieldy and variable. In this test we are checking whether the div itself is displayed, but this method would also work for any control contained by the div (such as a submit or text input element).

The second test (ValidatorDisplayed) searches for the span element representing a RequiredFieldValidator by the validation text contained in the span.

Some caveats apply when using this method:

• It works only with embedded CSS styles. If the "display: none" style was applied using a CSS class contained in a style sheet the WatiN Element.Style property would NOT automatically reflect this.
• It doesn't determine true element visibility--only whether the element is displayed. Elements may also be hidden using "visibility: hidden", occluded by other elements with a higher z-index, or moved offscreen using the position style.

As a side note, I highly recommend that you grab the Internet Explorer Developer Toolbar and take some time to understand the WatiN page model before writing many tests.