Ejecución de pruebas

2015-11-10

Evaluación de UI de aplicaciones web con jQuery

James McCaffrey

James McCaffrey La biblioteca jQuery es una colección de código abierto de funciones JavaScript. A pesar de que jQuery se creó pensando en el desarrollo web, la biblioteca posee varias características que la hacen ideal para la automatización de aplicaciones web ligeras de pruebas de UI. En la columna de este mes, les mostraré cómo hacerlo.

La mejor manera de ver a donde voy es examinar la captura de pantalla que se muestra en la figura 1, donde se muestra en acción la automatización de pruebas de UI con jQuery. El agente de prueba está hospedado en Internet Explorer y consiste de una página HTML llamada UITestHarness.html.

La página de agente de prueba es, en realidad, sólo un contenedor con dos elementos de marco HTML. El marco a la derecha contiene a la aplicación web puesta a prueba, en este caso una aplicación de calculadora ASP.NET simple pero representativa, llamada MiniCalc. El marco a la izquierda contiene una página HTML llamada TestScenario001.html, la cual consiste en un elemento TextArea para mostrar mensajes de progreso, un elemento Button para iniciar manualmente la automatización y funciones JavaScript basadas en jQuery para manipular la aplicación web puesta a prueba y revisar el estado obtenido por la aplicación para determinar un resultado de aprobado o rechazado.

image: UI Test Automation with jQuery

Figura 1 Automatización de prueba de la UI con jQuery

La biblioteca de jQuery también es apropiada para pruebas de solicitud-respuesta de HTTP; traté el tema de pruebas de solicitud-respuesta con jQuery en la columna Ejecución de pruebas de enero de 2010 (msdn.microsoft.com/magazine/ee335793).

Este artículo da por supuesto que el lector está familiarizado con los aspectos básicos de la tecnología ASP.NET y que tiene habilidades intermedias de programación de JavaScript, pero no presupone que tenga experiencia previa con la biblioteca jQuery. Sin embargo, si no tuviese experiencia en ASP.NET o en automatización de pruebas en general, podrá, de todas formas, comprender la columna de este mes sin dificultad.

En las secciones a continuación, describiré la aplicación MiniCalc, de manera que sepa con exactitud cómo se relacionan la implementación de la aplicación a prueba con la automatización de prueba de UI. Posteriormente, mostraré los detalles de la automatización de pruebas de UI ligeras basadas en jQuery, como se muestra en la figura 1. Concluiré con una descripción de cómo extender las técnicas presentadas para satisfacer sus propias necesidades y discutiré las ventajas y desventajas de la automatización de pruebas de UI con jQuery en comparación a enfoques alternativos. Creo que las técnicas que se presentan aquí son interesantes y su añadido a los conjuntos de herramientas, pruebas, desarrollo y administración pueden resultar útiles.

La aplicación sometida a prueba

Demos un vistazo al código de la aplicación web ASP.NET MiniCalc, la cual es el objetivo de esta automatización de prueba de UI basada en jQuery.

Creé la aplicación MiniCalc usando Visual Studio 2008. Después que iniciarse Visual Studio, hice clic en Archivo | Nuevo | Sitio web. Para evitar el mecanismo de código subyacente de ASP.NET y conservar todo el código de mi aplicación web en un solo archivo, seleccioné la opción Sitio web vacío. Después, seleccioné la opción Modo HTTP (en lugar de Modo archivo) desde la lista desplegable del campo Ubicación y especifiqué la siguiente ubicación:

http://localhost/TestWithJQuery/MiniCalc

Decidí usar C# para la lógica de aplicación de MiniCalc. Las técnicas de automatización de prueba presentadas aquí funcionan en aplicaciones web escritas en ASP.NET con C# y Visual Basic, además de aplicaciones web creadas usando tecnologías como ASP clásico, CGI, PHP, JSP, Ruby, etc.

Hice clic en Aceptar en el diálogo Nuevo sitio web para configurar IIS y generar la estructura de mi aplicación web. A continuación, me dirigí a la ventana Explorador de soluciones, hice clic con el botón secundario en el proyecto MiniCalc y seleccioné Agregar nuevo elemento desde el menú contextual. Después, seleccioné Web Form de entre la lista de plantillas instaladas y acepté el nombre de archivo Default.aspx. Desactivé la opción “Colocar código en un archivo separado” e hice clic en el botón Agregar.

Después, hice doble clic en el archivo Default.aspx en el Explorador de soluciones para cargar el código generado por la plantilla en el editor de texto. Eliminé todo el código de la plantilla y lo reemplacé con el código que se indica en la figura 2.

Figura 2 Fuente de la aplicación web MiniCalc sometida a prueba

<%@ Page Language="C#" %>
<script runat="server">
  static Random rand = null;

  private void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack) 
      rand = new Random(0);
  }

  private void Button1_Click(object sender, System.EventArgs e)
  {
    int randDelay = rand.Next(1, 6); // [1-5]
    System.Threading.Thread.Sleep(randDelay * 1000);
    int x = int.Parse(TextBox1.Text);
    int y = int.Parse(TextBox2.Text);
    if (RadioButton1.Checked)
      TextBox3.Text = (x + y).ToString("F4");
    else if (RadioButton2.Checked)
      TextBox3.Text = (x * y).ToString("F4");
  }
</script>
<html>
  (client-side JavaScript and UI elements here)
</html>

Omití la corrección de errores normal para disminuir el tamaño del código fuente y hacerlo más comprensible. El código fuente completo de la aplicación MiniCalc y del agente de prueba está disponible en code.msdn.microsoft.com/mag201012TestRun.

Para escribir automatización de prueba para aplicaciones web, en la mayoría de los casos es necesario conocer los identificadores de los distintos controles de usuario. Como verá en la figura 2, usé TextBox1 y TextBox2 para contener dos valores enteros de entrada de usuario, RadioButton1 y RadioButton2 para seleccionar adición o multiplicación y TextBox3 para contener el resultado del cálculo aritmético.

Cuando un usuario hace clic en el control Button1, la aplicación MiniCalc tiene un retraso de una duración aleatoria de entre uno a cinco segundos para simular el procesamiento del lado del servidor y después calcula y muestra una suma o un producto de los dos valores ingresados por el usuario.

Después, decidí hacer que la aplicación MiniCalc sea asíncrona, usando tecnología AJAX. Para hacer esto, fue necesario un archivo web.config para la aplicación, de manera que, en lugar de crear un archivo web.config de forma manual desde cero, presioné la tecla F5 para dar la instrucción a Visual Studio para que cree y ejecute la aplicación por medio del depurador. Cuando Visual Studio solicitó permiso para agregar un archivo web.config, hice clic en Aceptar. Después, agregué un control ScriptManager del lado del servidor a la aplicación MiniCalc para habilitar AJAX:

<asp:ScriptManager ID="sm1" runat="server" EnablePartialRendering="true" />

Posteriormente, agregué las etiquetas necesarias para actualizar de manera asíncrona el elemento de resultado TextBox3, en conjunto con el evento de clic de Button1:

<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<p><asp:TextBox id="TextBox3" width="120"  runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Si observa detenidamente la figura 1, verá que, para enfatizar en que MiniCalc es una aplicación AJAX, coloqué un contador de duración de la página en la UI. Cuando se devuelve una solicitud asíncrona a MiniCalc, sólo se actualiza TextBox3 y no se reestablece el contador de duración de la página. El cuadro de texto pageLife está definido de la siguiente manera:

<input type="text" id="pageLife" size="1"/>

El JavaScript asociado al lado del cliente es el siguiente:

<script language="javascript">
  var count = 0;
  function updatePageLife() {
    ++count;
    var tb = document.getElementById("pageLife");
    tb.value = parseInt(count);
    window.setTimeout(updatePageLife, 1000);
  }
</script>

El contador se inicia por un evento onload de la aplicación:

<body bgColor="#ccffff" onload="updatePageLife();">

Evaluación de UI de aplicaciones web con jQuery

Después de ver la aplicación web a prueba, profundicemos en el código de automatización de prueba de UI. El agente de prueba principal es simplemente una página corriente de HTML con dos elementos de cuadro:

<html>
<!-- UITestHarness.html -->
<head>
  <title>Test Harness for MiniCalc AJAX Web App</title>
</head>
  <frameset cols="45%,*" onload="leftFrame.appLoaded=true">
    <frame src="http://localhost/TestWithJQuery/TestScenario001.html"
       name="leftFrame" >
    <frame src="http://localhost/TestWithJQuery/MiniCalc/Default.aspx"
       name="rightFrame">
  </frameset>
</html>

El cuadro llamado rightFrame hospeda la aplicación web a prueba tal cual es, sin modificación o instrumentación alguna. El cuadro llamado leftFrame hospeda una página HTML llamada TestScenario001.html, el cual contiene todo el código de automatización de prueba de jQuery. Observe que, cuando el evento onload del elemento de conjunto de cuadros se activa, se establece como verdadera una variable de la página leftFrame, llamada appLoaded. Esta variable se usará para asegurarse de que la automatización de prueba no comienza antes que la aplicación web bajo prueba esté completamente cargada en el agente de prueba. La estructura del código de escenario de prueba se indica en la figura 3.

Figura 3 Estructura de la página de automatización de prueba de UI

<html>
<!-- TestScenario001.html -->
<head>
  <script src='http://localhost/TestWithJQuery/jquery-1.3.2.js'></script>
  <script type="text/javascript">
    $(document).ready(function() {
      logRemark("jQuery Library found and harness DOM is ready\n");
    } );
  
    var testScenarioID = "Test Scenario 001";
    var maxTries = 20;
    var numTries;
    var polling = 500; // milliseconds
    var appLoaded = false;
    var started = false;
    
    function launch() {
      if (!started)
        runTest();
    }
    
    function waitUntilAppLoaded() {
      // Code
    }
    
    function runTest() {
      // Start automation
    }
    
    function step1() {
      // Manipulate state
    }

    function clickCalculate() {
      // Click the Calculate button
    }
    function checkControl(controlID, controlVal) {
      // Determine if control has specified value
    }
    
    function step2() {
      // Manipulate state
    }
    
    function callAndWait(action, checkControlFunc, controlID, controlVal,
      callbackFunc, pollTime) {
      // The heart of the automation
    }

    function doWait(checkControlFunc, controlID, controlVal, 
      callbackFunc, pollTime) {
      // Wait until Web app responds
    }
    
    function finish() {
      // Determine pass/fail result
    }
       
    function logRemark(comment) {
      // Utility logging function
    }
  </script>

</head>
<body bgcolor="#F5DEB3">
  <h3>This is the UI test scenario with jQuery script page</h3>
  <p>Actions:</p><p><textarea id="comments" rows="22" cols="34">
  </textarea></p>
  <input type="button" value="Run Test" onclick="runTest();" /> 
</body>
</html>

El script de prueba se inicia al hacer referencia a la librería de jQuery:

<script src='http://localhost/TestWithJQuery/jquery-1.3.2.js'>

Aquí indico una copia local de la biblioteca jQuery que descargué del sitio web del proyecto jQuery (jquery.com) y lo copio al directorio raíz de la aplicación MiniCalc. Usé la versión 1.3.2 de jQuery. La biblioteca está en constante desarrollo, de manera que probablemente exista una versión más reciente para el momento en el que lea este artículo. Para obtener más información acerca de referencias a la biblioteca de jQuery en su código, consulte "Obtener la biblioteca jQuery".

Obtener la biblioteca jQuery

Existen algunas opciones para la ubicación de la biblioteca de jQuery usada por su aplicación. Como se mencionó anteriormente, se puede descargar la versión más reciente en jquery.com y úsela desde su sistema de archivos local. El sitio de jQuery tiene descargas de desarrollo (sin comprimir) y de producción (minimizada; es decir, que se le eliminaron los espacios en blanco para obtener una huella menor) disponibles. Sólo seleccione el paquete que desea y guarde el archivo .js en su directorio de proyecto.

Si el host de su aplicación tiene una conexión a Internet activa, una opción aún más sencilla es indicar la versión más reciente de jQuery desde una red de entrega de contenido (CDN) en línea. Existen varias fuentes que se pueden usar (incluyendo usar una que hospede usted mismo), pero dos CDN con alta disponibilidad son la red de entrega de contenido AJAX de Microsoft (asp.net/ajaxlibrary/cdn.ashx) y la API de Google Libraries (code.google.com/apis/libraries).

Por ejemplo, podría usarse la versión minimizada de jQuery desde la CDN AJAX de Microsoft con la siguiente etiqueta de script:

<script 
  src="https://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" 
  type="text/javascript">
</script>

Scott Guthrie hizo una interesante publicación de blog acerca del uso de la CDN AJAX de Microsoft para jQuery y para ASP.NET AJAX en tinyurl.com/q7rf4w.

Por lo general, al usar jQuery para la automatización de pruebas, el uso de una copia local desempaquetada de la biblioteca en el agente de prueba es más confiable que usar una copia remota o empaquetada. Sin embargo, para aplicaciones de producción, es mejor usar una biblioteca hospedada de confianza.

A continuación, usaré una expresión de jQuery para determinar si mi automatización hizo acceso a la biblioteca jQuery:

$(document).ready(function() {
  logRemark("jQuery Library found and harness DOM is ready\n");
} );

La función ready de jQuery se activa en cuanto el documento contenedor DOM se carga completamente en la memoria del host de prueba y todos los elementos DOM están disponibles. Si no se puede acceder a la biblioteca jQuery, lo que ocurre habitualmente al especificar una ruta incorrecta a la biblioteca, se mostrará un error "Se esperaba un objeto".

La función ready acepta una función anónima como su único parámetro. Las funciones anónimas se usan habitualmente en la automatización de pruebas, tanto para jQuery como para JavaScript. Una función anónima es algo así como una función definida en el momento al usar la palabra clave function.

A continuación se muestra un ejemplo de una función llamada logRemark:

function logRemark(comment) {
  var currComment = $("#comments").val();
  var newComment = currComment + "\n" + comment;
  $("#comments").val(newComment);
}

En esta situación, defino una función que simplemente invoca una función de registro definida por el programa, llamada logRemark, para mostrar un mensaje al agente de prueba que indica que jQuery está disponible. También podría haber usado la función alert, intrínseca a JavaScript.

Doy inicio a esto usando el selector y la sintaxis de encadenamiento de jQuery para obtener el texto actual en textarea con el identificador “comentarios”. La notación $ es un alias para la metaclase jQuery. La sintaxis “#” se usa para seleccionar un elemento HTML por identificador, y la función val puede actuar como establecedor y captador de valor (lo que llamaríamos en terminología de programación orientada a objetos una propiedad). Anexo el parámetro del comentario y un carácter de nueva línea al texto de comentario existente, y luego uso la sintaxis jQuery para actualizar el elemento TextArea.

A continuación, establezco algunas variables globales de automatización de prueba:

var testScenarioID = "Test Scenario 001";
var maxTries = 20;
var numTries;
var polling = 500;
var appLoaded = false;
var started = false;

Dado que esta automatización está relacionada con aplicaciones asíncronas, no uso retrasos con tiempos arbitrarios. En lugar de eso, uso una secuencia de retrasos corto (definidos por sondeo), donde se consulta en repetidas ocasiones (con numTries variable) si el valor de algún elemento HTML satisface una condición Booleana, con un máximo de intentos (maxTries variable). En este escenario de prueba, hago un retraso de 20 intentos a 500 ms por intento, por un total de 10 segundos. La variable appLoaded se usa para determinar si la aplicación web a prueba cargó totalmente en el agente de prueba. La variable iniciada se usa para coordinar la ejecución del agente de prueba.

Para iniciar de forma manual la automatización, puede hacer clic en el botón Ejecutar prueba:

<input type="button" value="Run Test" onclick="runTest();" />

La función launch indicada en la figura 3 se usa para una automatización de prueba total, como explicaré en breve. La función runTest actúa como una función coordinante principal para la automatización de prueba:

function runTest() {
  waitUntilAppLoaded();
  started = true;
  try {
    logRemark(testScenarioID);
    logRemark("Testing 3 + 5 = 8.0000\n");
    step1();
  }
  catch(ex) {
    logRemark("Fatal error: " + ex);
  }
}

La función runTest se inicia al llamar a la función waitUntilAppLoaded, que se define de la siguiente manera:

function waitUntilAppLoaded() {
  if (appLoaded == true) return true;
  else window.setTimeout(waitUntilAppLoaded, 100);
}

Recuerde que el escenario de prueba inicia la variable appLoaded como falsa y que el evento onload del agente del conjunto de cuadros establece appLoaded como verdadera. Aquí uso la función intrínseca setTimeout para dar pausa de forma repetida por 100 ms, hasta que el valor de appLoaded se vuelva verdadero. Observe que este enfoque podría producir un retraso que dure para siempre. Para evitar esta posibilidad, puede agregar un contador global y devolver false después de un número máximo de retrasos.

Después de configurar la variable global de inicio, runTest muestra algunos comentarios e invoca a una función step1 en un contenedor de controlador de excepciones. La estructura de agente que presento aquí es sólo una posibilidad, puede modificar la organización del agente para que se adecue a su estilo de programación y entorno de prueba. Con mi estructura, considero un escenario de prueba como una secuencia de cambios de estado, cada uno de los cuales está representado por una función stepX.

La función step1 manipula el estado de la aplicación web a prueba al simular una entrada de usuario, como se muestra en la figura 4.

Figura 4 Simulación de entrada con la función step1

function step1() {
  logRemark(
    "Entering 3 and 5 and selecting Addition");
  var tb1 = 
    $(parent.rightFrame.document).find('#TextBox1');
  tb1.val('3');

  var tb2 = 
    $(parent.rightFrame.document).find('#TextBox2');
  tb2.val('5');

  var rb1 = 
    $(parent.rightFrame.document).find('#RadioButton1');
  rb1.attr("checked", true);

  logRemark(
    "\nClicking Calculate, waiting for async response '8.0000'");
  callAndWait(clickCalculate, checkControl, "TextBox3", "8.0000", 
    step2, polling);
}

La sintaxis de jQuery para tener acceso y manipular elementos HTML es consistente, elegante y, en su mayor parte, independiente de exploradores. Observe que para tener acceso a la aplicación web cargada en el elemento rightFrame desde el código en el elemento leftFrame, se debe usar la palabra clave parent. Observe también que debo usar el filtro de búsqueda jQuery.

Al manipular los elementos TextBox1 y TextBox2, doy por sentado que la aplicación web a prueba está completamente cargada en el elemento rightFrame. Puede que esta conclusión no sea razonable para aplicaciones con tiempos largos de carga; en dichas situaciones puede colocar el código del selector jQuery en un bucle de retraso window.setTimeout, lo que pondrá a prueba al objetivo frente al valor integrado "undefined", o “no definido”.

Dado que la aplicación MiniCalc puesta a prueba es una aplicación AJAX, mi agente no puede simplemente invocar el evento de clic en el botón Calcular, puesto que el código de agente de prueba continuaría ejecutándose sin esperar la respuesta asíncrona de la aplicación. Por lo tanto, uso una función definida por el programa denominada callAndWait:

function callAndWait(action, checkControlFunc, controlID,
  controlVal, callbackFunc, pollTime) {
    numTries = 0;
    action();
    window.setTimeout(function(){doWait(
      checkControlFunc, controlID, controlVal, 
      callbackFunc, pollTime);}, pollTime);
}

La función callAndWait invocará una función (el parámetro action), iniciará un bucle de retraso y hará pausa por un tiempo breve (variable pollTime) y después revisará si algún estado de la aplicación es verdadero al llamar a la función de parámetro checkControlFunc con los argumentos de parámetro controlID y controlVal. Cuando checkControlFunc sea devuelto como verdadero o se hayan ejecutado un número máximo de retrasos, se transferirá el control a la función de parámetro callbackFunc.

La función callAndWait trabaja en conjunto con una función definida por el programa denominada doWait:

function doWait(checkControlFunc, controlID, 
  controlVal, callbackFunc, pollTime) {
  ++numTries;

  if (numTries > maxTries) finish();
  else  if (checkControlFunc(controlID, controlVal)) 
    callbackFunc();
  else window.setTimeout(function(){
    doWait(checkControlFunc, controlID,
    controlVal, callbackFunc, pollTime);}, pollTime);
}

La función doWait es recursiva y sale cuando checkControlFunc es devuelto como verdadero o el contador local numTries supera la variable global maxTries. Por lo tanto, esta función llama a una función denominada clickCalculate, inicia un bucle de retraso, hace pausa al sondeo por 500 ms y llama a la función checkControl con argumentos de TextBox3 y 8.0000 hasta que checkControl es devuelto como verdadero o el bucle de retraso se ejecutó 20 veces (como lo especifica maxTries):

callAndWait(clickCalculate, checkControl, "TextBox3", 
  "8.0000", step2, polling);

Si checkControl es devuelto como verdadero, se transfiere el control a la función step2. La función clickCalculate usa selección y encadenamiento de jQuery:

function clickCalculate() {
  var btn1 = $(parent.rightFrame.document).find('#Button1');
  if (btn1 == null || btn1.val() == undefined) 
    throw "Did not find btn1";
  btn1.click();
}

La razón principal para definir una función contenedora de acción como ésta es que la función puede hacerse pasar sin dificultad por nombre a la función callAndWait. La función checkControl es clara y concisa:

function checkControl(controlID, controlVal) {
  var ctrl = $(parent.rightFrame.document).find('#' + controlID);
  if (ctrl == null || ctrl.val() == undefined || ctrl.val() == "")
    return false;
  else
    return (ctrl.val() == controlVal);
}

Primero, uso sintaxis de jQuery para obtener una referencia al control especificado por el parámetro controlID. Si el valor del control no está disponible aún, inmediatamente regreso al bucle de retraso. Una vez que el valor de control está listo, puede revisar si es igual a algún valor esperado de acuerdo al parámetro controlVal.

Después de llamar a cuantas funciones stepX desee, transfiero el control a una función finish. Esta función primero determina cómo se alcanzó:

if (numTries > maxTries) {
  logRemark("\nnumTries has exceeded maxTries");
  logRemark("\n*FAIL*");
}
else ....

Si el valor de la variable global numTries supera el valor de maxTries, entonces sabré que la aplicación web a prueba no respondió dentro del tiempo permitido. Aquí, decido de forma arbitraria que este es un fallo de caso de prueba y no alguna forma de resultado no determinado. Si numTries no superó a maxTries, comienzo a buscar el estado final de la aplicación a prueba:

logRemark("\nChecking final state");
var tb1 = $(parent.rightFrame.document).find('#TextBox1');
var tb2 = $(parent.rightFrame.document).find('#TextBox2');
var tb3 = $(parent.rightFrame.document).find('#TextBox3');

Aquí obtengo referencias a los tres controles textbox. Exactamente cuáles elementos de la aplicación web a prueba decida revisar dependerá de los detalles de su aplicación en particular. A continuación, examino el valor de cada control textbox para determinar si cada uno tiene un valor esperado:

var result = "pass";
if (tb1.val() != "3") result = "fail";
if (tb2.val() != "5") result = "fail";
if (tb3.val() != "8.0000") result = "fail";

Mi script de escenario de prueba tiene toda la entrada de prueba de caso y los valores esperados codificados. La automatización de prueba que presento es apropiada para situaciones de prueba rápidas y ligeras, donde los datos de prueba codificados son simples y efectivos.

La función finish concluye la ejecución de prueba al mostrar un resultado de aprobado o rechazado:

if (result == 'pass')
  logRemark("\n*Pass*");
else
  logRemark("\n*FAIL*");

Tal como los datos de entrada de caso de prueba, este enfoque es ligero y puede desear escribir resultados de prueba en un archivo externo en el host o servidor web de prueba o quizás enviar los resultados de prueba por SMTP a una dirección de correo electrónico.

Conclusión

El agente descrito aquí está semiautomatizado en cuanto a que se debe hacer clic en un control de botón para iniciar la prueba. Puede automatizar completamente el agente al agregar una función de inicio de contenedor:

function launch() {
  if (!started)
    runTest();
}

Agregue un atributo onload=“leftFrame.launch();” al elemento de conjunto de cuadros a la página agente. Cada carga de la aplicación web en el agente iniciará un evento onload, de manera que uso la variable global “start” para evitar que se reestablezca la automatización de prueba. Algo interesante es que, pese a que el elemento Marco HTML no es compatible con un evento onload, se puede colocar, en efecto, un atributo onload en el elemento de marco de agente y el evento se elevará hasta el elemento de conjunto de cuadros principal.

Ahora podrá crear un archivo .bat con comandos tales como:

iexplore http://localhost/TestWithJQuery/UITestHarness001.html
iexplore http://localhost/TestWithJQuery/UITestHarness002.html

Cuando se ejecute el archivo .bat, quizás por medio de un programador de tareas de Windows, se cargará el agente y su automatización se iniciará automáticamente. Otra manera en la que podría querer extender el sistema de prueba que presento aquí es mostrar las funciones definidas por el programa en un complemento de jQuery.

Al escribir automatización de prueba de UI de aplicaciones web ligeras, cuenta con varias alternativas al enfoque basado en jQuery que presenté aquí. Una de las principales ventajas de usar la biblioteca jQuery en comparación a usar JavaScript puro es que jQuery funciona en conjunto con varios exploradores, tales como Internet Explorer, Firefox y Safari. Otra ventaja significativa es que, al usar jQuery para escribir automatización de prueba, puede desarrollar de forma activa su conocimiento del uso de jQuery para tareas de desarrollo web.

Usar jQuery tiene desventajas en comparación a otros enfoques. El uso de jQuery implica algún grado de dependencia externa y la automatización de pruebas basadas en script tienden a ser más difíciles de administrar que la automatización de prueba que no se basan en script. En contraste a marcos de prueba tal como Selenium o Watir, la automatización basada en jQuery proporciona una mayor flexibilidad, pero se debe escribir código con un nivel inferior de abstracción.

Como es usual, le recordaré que ningún enfoque de automatización de prueba es el mejor para todas las situaciones, pero la automatización de prueba de UI de aplicación web basada en jQuery puede ser una técnica eficiente y efectiva en muchos escenarios de desarrollo de software.

El Dr. James McCaffrey trabaja en Volt Information Sciences, Inc., donde se encarga de los programas de aprendizaje técnico dirigidos a los ingenieros de software que trabajan en el campus de Microsoft en Redmond, Washington. Ha colaborado en el desarrollo de varios productos de Microsoft como, por ejemplo, Internet Explorer y MSN Search. El Dr. McCaffrey es el autor de “.NET Test Automation Recipes” (Apress, 2006) y puede ponerse en contacto con él en la dirección jammc@microsoft.com.

Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Scott Hanselman y Matthew Osborn

Compartir a través de

Ejecución de pruebas

Evaluación de UI de aplicaciones web con jQuery

James McCaffrey

La aplicación sometida a prueba

Evaluación de UI de aplicaciones web con jQuery

Obtener la biblioteca jQuery

Conclusión

Recursos adicionales