ASP.NET 2.0 Series

WatiN: Web Application Testing in .Net

Jesús Jiménez — Sun, 07 Jan 2007 05:36:00 GMT

Introduction

In the project that I'm currently working I need to do an intensive UI and Functional testing to ensure that the application UI is working fine. Due to that I've been looking for a good way to do, both, UI and functional tests. Past week I came across a framework called WatiN and I decided to research about it. This post exposes what I found and I'll try to show you what impressed me of this framework from a developer point of view.

What's WatiN?

WatiN stands for Web Application Testing In .Net and enables web applications testing trhought Internet Explorer. WatiN is inspired on WatiR, a web application testing framework for Ruby. The way that WatiN works is very "easy", knowing that there's a lot of work behind a framework like this. WatiN let's you to open Internet Explorer instances and throught interop interact with the elements in the form. With WatiN you can get and set values from the elements in the form and you can fire events of any of the elements in the document too.

Getting started

The API of WatiN is very nice, at least for me, and watching some code examples and digging a bit you can get benefit of this framework quickly. The first thing that we need to build a test method using WatiN is to add a reference to the WatiN.Core.dll. WatiN gives us four namespaces, furthermore of the one that we use to interact with the IE instances, WatiN.Core. These namespaces are:

WatiN.Core.DialogHandlers: Provides the needed objects to manage dialogs that the browser can show to the user. Some of the handlers you can find in this namespace are for example: AlertDialogHandler, ConfirmDialogHandler, FileUploadDialogHandler, PrintDialogHandler or LogonDialogHandler.
WatiN.Core.Exceptions: Provides some specialized exceptions to allow us to control unwanted behaviors. This namespace exceptions examples are: ElementNotFoundException, IENotFoundException, TimeoutException or a generic WatiN exception, WatiNException.
WatiN.Core.Interfaces: Provides us some interfaces to extend the WatiN framework, as for example the ILogWriter interface that gives us the availability of implement our own LogWriter class.
WatiN.Core.Logging: This namespace exposes some class that will help us in order to log the actions that our test is doing. We can use the DebugLogWriter class to write log messages to the debug window or we can use the Logger class to save our logs in other ways.

Because that the scope of this post is only introductory I'll only show you the usage of the most important objects of the framework. In order to learn more about the rest of the namespaces and/or objects you can check the "References & Resources" section at the bottom of this post.

Now that we have a brief idea of what WatiN is and what we can do with it, let's write some code to see how is the API's usage.

 1 using WatiN.Core;
 2 
 3 [STAThread]
 4 static void Main(string[] args)
 5 {
 6     // create a new Internet Explorer Instance
 7     IE ie = new IE();
 8 
 9     // point it to http://www.google.com
10     ie.GoTo("http://www.google.com");
11 
12     // fill the search box
13     ie.TextField(Find.ByName("q")).TypeText("WatiN");
14 
15     // performs click event
16     ie.Button(Find.ByValue("Google Search")).Click();
17 }

The previous code example opens an Internet Explorer instance and points it to www.google.com, then, when the page is loaded, it searchs a textbox with name "q" and fills it value with the text "WatiN". Then I do the same I did for the textbox but, this time, looking for a button wich value is "Google Search" and then I perform the "Click()" event. If we run this console application we will see an Internet Explorer opening and doing the things we code. Isn't cool?

Solving initial workarounds

Now just some comments about the above piece of code. In order to automate tasks with Internet Explorer we need to run our test under a thread that has a single-threaded apartment (STA) as apartment state. Notice that over the Main method we have an attribute that makes the thread use STA. A big question that I made myself when I came across this framework was, "And what about running this tests with NUnit?". NUnit doesn't run the tests in a thread using STA apartment state, it uses multithreaded apartment (MTA), but this isn't a big problem so we can attach a config file to NUnit test project and specify the apartment state mode that we want. Let's see how to do it:

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <configuration>
 3     <configSections>
 4         <sectionGroup name="NUnit">
 5             <section name="TestRunner" type="System.Configuration.NameValueSectionHandler"/>
 6         </sectionGroup>
 7     </configSections>
 8     <NUnit>
 9         <TestRunner>
10             <!-- Valid values are STA,MTA. Others ignored. -->
11             <add key="ApartmentState" value="STA" />
12         </TestRunner>
13     </NUnit>
14 </configuration>

One thing that will occur after executing the above code is that the Internet Explorer window stills open. If you run more than one test, supposing you use NUnit, you can do two things. First, you can create the instance of the IE object using the "using" keyword and using the constructor that lets us specify the url. If you do that it gets closed and disposed after test execution. Second, you can call the Close() method of the IE instace to programmatically close the window. Both are valid, but I prefer the first one becuase I think that the resulting code is more elegant that if we use the second one.

Creating our first UI test

If our test result is based on the response that the server sends back to the browser, we can parse the response in order to know if our test has failed or not. The way that we do that is exactly the same that we use to make the test, but searching other items in the page that help us to identify what happend. Suppose that we have an aspx page like this:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head runat="server">
 5     <title>WatiN Test Page</title>
 6 </head>
 7 <body>
 8     <form id="form1" runat="server">
 9         <h2>Check if a nickname is already used</h2>
10         <table>
11             <tr>
12                 <td>Nickname:</td>
13                 <td><asp:TextBox runat="server" ID="txtNickName" /></td>
14             </tr>
15             <tr>
16                 <td colspan="2" align="right">
17                     <asp:Button runat="server" ID="btnCheck" Text="Check !!" OnClick="btnCheck_Click" />
18                 </td>
19             </tr>
20             <tr>
21                 <td colspan="2">
22                     <asp:Label runat="server" ID="lblResult" />
23                 </td>
24             </tr>
25         </table>
26     </form>
27 </body>
28 </html>

And now suppose that we have this code on the btnCheck.OnClick event:

1 protected void btnCheck_Click(object sender, EventArgs e)
2 {
3     // do some logic to check if the nickname is already used.
4     // i'll return true for all nicknames but "gsus"
5     if (txtNickName.Text != "gsus")
6         lblResult.Text = "The nickname is already in use";
7     else
8         lblResult.Text = "The nickname is not used";
9 }

I'm writing this post examples in Visual Studio 2005 and running under Windows Vista, so I don't have Internet Information Services installed. For web development I'm using the ASP.NET Development Server that came with .Net Framework 2.0 so in the next code sample you will see that I start programmatically the Web Server in order to run the test. I'm not a "tests" guru, so I don't really know if my test is the best test of the world, the only thing I'm trying to transmit you is the concept of how it will be done, of course if I'm wrong, your comments are welcome. Now let's see how my test looks finally:

 1 using System.Diagnostics;
 2 using WatiN.Core;
 3 using NUnit.Framework;
 4 using System;
 5 
 6 namespace WebAppUITesting
 7 {
 8     [TestFixture]
 9     public class UITesting
10     {
11         //process object 
12         private Process p;
13 
14         [TestFixtureSetUpAttribute]
15         public void SetUp()
16         {            
17             // create a new process to start the ASP.Net Development Server
18             p = new Process();
19 
20             // set the initial properties 
21             string path = Environment.CurrentDirectory.Replace(@"WebAppUITesting\bin", string.Empty);
22             p.StartInfo.FileName = "WebDev.WebServer.EXE";
23             p.StartInfo.Arguments = String.Format("/port:8080 /path:\"{0}WebApp\"", path);
24             p.StartInfo.WindowStyle = ProcessWindowStyle.Minimized;
25 
26             // start the process
27             p.Start();
28         }
29 
30         [Test]
31         public void CheckIfNicknameIsNotUsed()
32         {
33             // create a new Internet Explorer instance pointing to the ASP.NET Development Server
34             using (IE ie = new IE("http://localhost:8080/Default.aspx"))
35             {
36                 // Maximize the IE window in order to view test
37                 ie.ShowWindow(NativeMethods.WindowShowStyle.Maximize);
38 
39                 // search for txtNickName and type "gsus" in it
40                 ie.TextField(Find.ById("txtNickName")).TypeText("gsus");
41 
42                 // fire the click event of the button
43                 ie.Button(Find.ById("btnCheck")).Click();
44 
45                 // parse the response in order to fail the test or not 
46                 Assert.AreEqual(true, ie.ContainsText("The nickname is not used"));
47             }            
48         }
49 
50         [TestFixtureTearDownAttribute]
51         public void TearDown()
52         {
53             // kill the ASP.NET Development Server process
54             p.Kill();
55         }
56     }
57 }

As you can see I use the method ContainsText in line 46. This method searchs the specified text in the document content and returns a bool indicating if there are occurrences in the search. We can replace the line 46 with the next code example, where I directly get the "lblResult" span content to see if the nickname is already used:

1 // parse the response in order to fail the test or not 
2 bool result = (ie.Span(Find.ById("lblResult")).Text == "The nickname is not used");
3 Assert.AreEqual(true, result);

Conclusion

At this point, you should know how to basically use WatiN framework to test your web applications. I hope you find this framework and this post useful as I did. Personally I haven't used any other web application testing framework but I get really surprised with how we can test our UI using WatiN. I think that we can do an intesive UI and functional testing with it.

References & Resources

References:

WatiN Homepage: http://watin.sourceforge.net/
WatiN MSDN style documentation: http://watin.sourceforge.net/doc/index.html
WatiN Getting Started: http://watin.sourceforge.net/gettingstarted.html
WatiN and ApartmentState: http://watin.sourceforge.net/apartmentstateinfo.ht...
WatiR (Web Application Testing in Ruby): http://wtr.rubyforge.org/
ASP.NET Development Server: http://msdn2.microsoft.com/en-us/library/58wxa9w5(...

Resources:

WatiN Framework for .Net 1.1: WatiN-0.9.5.4000-net-1.1.zip
WatiN Framework for .Net 2.0: WatiN-0.9.5.4000-net-2.0.zip
This post examples source code: http://blogs.clearscreen.com/dtax/files/WatiN_Examples.zip

Security How Tos

Jesús Jiménez — Sat, 25 Feb 2006 12:20:00 GMT

Patterns & Pratices has very good Security How Tos articles most of them rated 9 of 9. The topics of this articles applies to a lot of issues that surely got crazy many of you (and me). Take a look at: http://msdn.microsoft.com/library/en-us/dnpag2/html/SecurityHowTosIndex.asp?frame=true

70-528 -> Passed !! :D

Jesús Jiménez — Fri, 17 Feb 2006 08:32:00 GMT

November 11th, was the day that I took the Beta exam 70-528 - TS: Microsoft .NET Framework 2.0 - Web-Based Client Development. Days after I took it I wrote my personal review of the exam and early this morning I checked if I passed it. As you can imagine(and as you can read in this post's title) I passed it!!

¿Cuanto sabes de Visual Studio 2005 y SQL Server 2005?

Jesús Jiménez — Wed, 08 Jun 2005 12:47:00 GMT

Ayer vi que en la MSDN, en el apartado de Learning, hay una serie de tests para medir tu conocimiento sobre distintas materias. Estos tests son clavados (en estilo) a las certificaciones y aparte de tests sobre Windows XP, Windows 2003, SQL Server, Exchange Server, Seguridad, Visual Studio 2003 y otros temas, curiosamente hay de Visual Studio 2005 con dos tests y de SQL Server 2005 con tres tests.

· What's New in Microsoft® Visual Studio® 2005
· What's New in ASP.NET 2.0
· Introducing Microsoft® SQL Server™ 2005 for Database Administrators
· Introducing Microsoft® SQL Server™ 2005 for Database Developers
· Introducing Microsoft® SQL Server™ 2005 for Business Intelligence Developers

Yo hice el de ASP.NET 2.0 y saque un mediocre 60%, aunque teniendo en cuenta que aún no me he peleado en un proyecto real con esta tecnología no esta nada mal. Lo que me parecio bastante bien es que hacen "estudio" personalizado de que deberias reforzar según tu resultado del test y te indican que MOCs incluyen el temario que necesitas.

ASP.NET 2.0 Series: Default Button

Jesús Jiménez — Sun, 10 Apr 2005 17:54:00 GMT

Otra de las pequeñas funcionalidades que nos ofrece ASP.NET 2.0 es la de asignar botones por defecto para un formulario cuando se pulsa la tecla ENTER.

Esta funcionalidad se podía conseguir añadiendo una función bastante sencillita de JavaScript en nuestras páginas de ASP.NET 1.0 ó 1.1, pero ahora simplemente es una propiedad más del tag FORM o incluso podemos definir un botón por defecto para un Panel.

Ahora cuando pulsamos la tecla ENTER en una página de ASP.NET 2.0 se dispara el evento del primer botón que haya en el formulario a menos que hayamos indicado mediante la propiedad DefaultButton de la etiqueta FORM que botón queremos que sea el botón por defecto.

Pero si en nuestro formulario tenemos más de un botón y desde una zona determinada de nuestro formulario queremos que se dispare un evento de un botón diferente al del resto del formulario también tenemos la propiedad DefaultButton en el control Panel.

Y como en otros posts de esta serie, un ejemplo para que veáis como funciona esto:

1 <%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="Default_aspx" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head runat="server">
5     <title>Ejemplo de Default Button</title>
6 </head>
7 <body>
8 <1 <form id="form1" runat="server" defaultbutton="btnBuscar">
9     <table width="800px" height="500px" border="1">
10         <tr>
11             <td height="50px" valign="middle" align="center" colspan="2">
12                 Ejemplo de DefaultButton.
13                 <br />
14                 <asp:Label ID="lblDefault" runat="server"></asp:Label>
15             </td>
16         </tr>
17         <tr>
18             <td width="30%" valign="top" align="center">
19                 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
20                 <asp:Button ID="btnBuscar" runat="server" Text="Buscar" OnClick="btnBuscar_Click" /></td>
21             <td width="*" valign="top">
22                 <asp:Panel ID="Panel1" runat="server" Width="250px" DefaultButton="btnEnviar">
23                     <asp:Label ID="Label1" runat="server" Text="Nombre"></asp:Label> 
24                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
25                     <asp:Label ID="Label2" runat="server" Text="Apellidos"></asp:Label> 
26                     <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
27                     <asp:Label ID="Label3" runat="server" Text="Dirección"></asp:Label> 
28                     <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
29                     <asp:Label ID="Label5" runat="server" Text="Telefono"></asp:Label> 
30                     <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox><br /><br /><br />
31                     <asp:Button ID="btnEnviar" runat="server" Text="Enviar" OnClick="btnEnviar_Click" /><br />
32                 </asp:Panel>
33             </td>
34         </tr>
35     </table>
36 </form>
37 </body>
38 </html>

ASP.NET 2.0 Series: Validation Groups

Jesús Jiménez — Sun, 03 Apr 2005 22:25:00 GMT

En versiones anteriores de ASP.NET, la 1.0 y 1.1, teníamos un gran problema cuando queríamos validar solo determinados controles dentro de una página.

Pongamos el caso en el que nuestra aplicación ASP.NET tiene una cabecera donde hemos arrastrado un WebUserControl que encapsula la funcionalidad de login con dos cajas de texto y un botón para autenticarse en nuestra aplicación.

Por otro lado tenemos en la parte de contenido de la página un formulario para pedir información sobre nuestros productos. Al final de este formulario tenemos un botón que verifica los datos del formulario y procesa el envío del formulario a nuestro sistema.

En general, salvo que montases alguna estratagema para conseguir validar solo los controles del formulario, el botón de envío de validaría el formulario entero y si las cajas de texto del login y pass del WebUserControl no nos dejaría continuar.

Este es un problema real que existe en la versión actual de ASP.NET y en ASP.NET 2.0 lo han tenido en cuenta y han creado los Validation Groups.

Como su propio nombre indica en ASP.NET 2.0 se pueden crear grupos de validación y especificar que grupo de validación valida cada botón de tu formulario.

La mejor forma de verlo un ejemplo:

1 <%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="Default_aspx" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7     <title>Untitled Page</title>
8 </head>
9 <body>
10     <form id="form1" runat="server">
11         <div>
12             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
13             <asp:Button ID="Button1" runat="server" Text="Validar Grupo 1" ValidationGroup="Grupo1" />
14             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Grupo 1 de validación"
15                 ControlToValidate="TextBox1" ValidationGroup="Grupo1">*</asp:RequiredFieldValidator>
16             <br />
17             <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
18             <asp:Button ID="Button2" runat="server" Text="Validar Grupo 2" ValidationGroup="Grupo2" />
19             <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Grupo 2 de validación"
20                 ControlToValidate="TextBox2" ValidationGroup="Grupo2">*</asp:RequiredFieldValidator>
21         </div>
22     </form>
23 </body>
24 </html>
25

Post Update: Añadí un link al codigo de ejemplo.

De aquí puedes descargar el código de este ejemplo.
http://blogs.clearscreen.com/dtax/files/ValidationGroupsWeb.zip

ASP.NET 2.0 Series

Jesús Jiménez — Sun, 03 Apr 2005 22:16:00 GMT

Debido a que me gustaría tocar muchos temas de ASP.NET 2.0 y por motivos de organización he creado una nueva categoria en mi blog.

"ASP.NET 2.0 Series" englobara todos los post que ire haciendo de esta nueva tecnología. Y para no andarme con más rodeos ahi va el primer post de esta nueva categoría.

ASP.NET Page LifeCycle

Jesús Jiménez — Sat, 26 Mar 2005 13:44:00 GMT

Aunque hace ya algun tiempo que Léon andrianarivony posteo este diagrama del ciclo de vida de las paginas ASP.NET me ha parecido interesante hacer un post.

Este diagrama se basa en las paginas de ASP.NET 2.0 (Beta 1) y aun que no se esperan grandes cambios es posible que este ciclo cambie.

Cross-Page Posting

Jesús Jiménez — Fri, 25 Mar 2005 21:38:00 GMT

Estos días he estado leyendo sobre algo que nos ofrece ASP.NET 2.0 y que me parece muy útil, el Cross-Page Posting.

Para usar esta característica tenemos a nuestra disposición dos propiedades que nos proporcionaran todo lo necesario.

• PostbackUrl: Esta nueva propiedad del control Button nos permite establecer cual será la pagina a la que se redirecionara al usuario cuando pulsemos el botón y después de que el código que hayamos escrito en el evento del botón se ejecute.
Esta propiedad es pública y de tipo string. Se puede establecer tanto en entorno de diseño como en entorno de ejecución.

• PreviousPage: Con esta propiedad desde nuestra página de destino podemos acceder a la página desde la que venimos y como podemos acceder a todos sus controles y ver que valores fueron enviados en el post.
Esta propiedad es de solo lectura y de tipo Page.

La cuestión es que con este método podemos ahorrarnos, en algunos casos, esos tan poco estéticos QueryStrings.

En esta pagina Default.aspx hemos establecido la propiedad PostBackUrl de btnNextPage igual a Default2.aspx.

1@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="Default_aspx" %>
2DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3html xmlns="http://www.w3.org/1999/xhtml" >
4head runat="server">
5    title>Cross-Page Posting Page 1span style="COLOR: #800000">title>
6span style="COLOR: #800000">head>
7body>
8    form id="form1" runat="server">
9        TABLE>
10            TR>
11                TD>
12                    asp:Label ID="lblName" runat="server" Text="Introduzca su nombre :">span style="COLOR: #800000">asp:Label>
13                span style="COLOR: #800000">TD>
14            span style="COLOR: #800000">TR>
15            TR>
16                TD>
17                    asp:TextBox ID="tboxName" runat="server">span style="COLOR: #800000">asp:TextBox>
18                    asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
19                        ErrorMessage="Es un campo obligatorio" ControlToValidate="tboxName">*span style="COLOR: #800000">asp:RequiredFieldValidator>
20                span style="COLOR: #800000">TD>
21            span style="COLOR: #800000">TR>
22            TR>
23            TD>
24                asp:Button ID="btnNextPage" runat="server" Text="Página siguiente" PostBackUrl="default2.aspx" />
25            span style="COLOR: #800000">TD>
26        span style="COLOR: #800000">TR>
27    span style="COLOR: #800000">TABLE>
28    span style="COLOR: #800000">form>
29span style="COLOR: #800000">body>
30span style="COLOR: #800000">html>

Y en Default2.aspx realizamos las acciones necesarias para recuperar los datos de Default.aspx.


using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2_aspx : System.Web.UI.Page

{
    public Default2_aspx ()
    {
        Load += new EventHandler(Page_Load);
    }
    
    void Page_Load(object sender, EventArgs e)
    {
        //Comprobamos si nuestra pagina esta usando Cross-Page Posting.
        if (Page.PreviousPage.IsCrossPagePostBack)
        {
            //Buscamos el control o controles que necesitemos.
            Control c = Page.PreviousPage.FindControl("tboxName");

            //Y asignamos o usamos los valores que se envaron atraves del PostBack.
            if (c != null)
                lblPreviousData.Text = ((TextBox)c).Text;
            else
                lblPreviousData.Text = "No se pudo tomar el valor";
        }
        else
            Response.Redirect("default.aspx");
    }
}

Es una práctica bastante sencilla y útil.

Explorando ASP.NET 2.0 usando Visual C# 2005

Jesús Jiménez — Sat, 12 Feb 2005 19:34:00 GMT

El titulo de este post no es otro que el de un producto que AppDev ha sacado al mercado consistente en un DVD ó 6 CDs con videos y documentación referente a ASP.NET 2.0. Su precio no es que sea muy agradable, 495$, pero por mediación de Microsoft se puede descargar desde la MSDN la ISO del primero de los CDs totalmente gratuita.

Como podréis imaginar este producto esta en inglés por completo aunque casi me he visto todos los videos y son fáciles de enteder con un nivel medio de inglés. Ademas el que vayan haciendo todo lo que dicen de forma gráfica ayuda mucho a entender de que estan hablando.