Este artigo foi traduzido por máquina.

Execução de teste

Teste da interface do usuário do aplicativo Web com o jQuery

James McCaffrey

Baixe o código de exemplo

The jQuery library is an open source collection of JavaScript functions. Embora o jQuery tenha sido criado com o desenvolvimento da Web em mente, a biblioteca apresenta diversas características que o tornam adequado para a automação leve de testes da interface do usuário de aplicativos Web. Na coluna deste mês, mostrarei como fazer exatamente isso.

A melhor forma de você perceber onde quero chegar é examinando a captura de tela da Figura 1, que mostra a automação de testes da interface do usuário com o jQuery em ação. O agente de teste é hospedado pelo Internet Explorer e consiste em uma página HTML chamada UITestHarness.html.

A página do agente é de fato apenas um contêiner com dois elementos de quadro HTML. O quadro à direita contém o aplicativo Web em teste, nesse caso, um aplicativo de calculadora ASP.NET simples, mas representativo, chamado MiniCalc. O quadro à esquerda contém uma página HTML chamada TestScenario001.html, formada por um elemento TextArea, que exibe mensagens de andamento, um elemento Button, que inicia a automação manualmente, e funções de JavaScript baseadas no jQuery, que manipulam o aplicativo Web em teste e verificam o estado resultante do aplicativo para determinar um resultado de aprovação/reprovação.

Figura 1 Automação de testes da interface do usuário com o jQuery

A biblioteca jQuery também é adequada para testes de solicitação/resposta HTTP, e eu abordei os testes de solicitação/resposta com o jQuery na coluna Execução de teste de janeiro de 2010 (msdn.microsoft.com/magazine/ee335793).

Este artigo pressupõe que você tenha familiaridade básica com a tecnologia ASP.NET e habilidades intermediárias de programação em JavaScript, mas não presume que tenha experiência com a biblioteca jQuery. No entanto, mesmo que você seja novato em ASP.NET e na automação de testes em geral, ainda assim conseguirá acompanhar a coluna deste mês sem muita dificuldade.

Nas seções a seguir, primeiro descreverei o aplicativo MiniCalc para que você saiba exatamente como a implementação do aplicativo em teste está relacionada à automação de testes da interface do usuário. Em seguida, mostrarei os detalhes da criação da automação leve de testes da interface do usuário baseada no jQuery, conforme ilustrado na Figura 1. Concluirei descrevendo como estender as técnicas aqui apresentadas para que você possa atender às suas necessidades e discutirei as vantagens e desvantagens da automação de testes da interface do usuário jQuery em comparação com abordagens alternativas. Acredito que as técnicas aqui apresentadas são interessantes e podem ser uma contribuição útil para os seus conjuntos de ferramentas de desenvolvimento e gerenciamento.

O aplicativo em teste

Vamos dar uma olhada no código do aplicativo Web em ASP.NET MiniCalc, que é o alvo da minha automação de testes da interface do usuário baseada no jQuery.

I created the MiniCalc application using Visual Studio 2008. After launching Visual Studio I clicked File | New | Web Site. Para evitar o mecanismo de code-behind do ASP.NET e manter todo o código do meu aplicativo Web em um único arquivo, selecionei a opção Site Vazio. Em seguida, selecionei a opção do modo HTTP (em vez do modo Arquivo) na lista suspensa do campo Local e especifiquei o local como:

http://localhost/TestWithJQuery/MiniCalc

Decidi usar C# para a lógica do aplicativo MiniCalc. As técnicas de automação de testes apresentadas aqui funcionarão com aplicativos Web ASP.NET criados com C# e Visual Basic e com aplicativos Web criados com tecnologias como ASP, CGI, PHP, JSP, Ruby e assim por diante.

Cliquei em OK na caixa de diálogo Novo Site para configurar o IIS e gerar a estrutura do meu aplicativo Web. Em seguida, na janela do Gerenciador de Soluções, cliquei com o botão direito do mouse no nome do projeto MiniCalc e selecionei Adicionar Novo Item no menu de contexto. Depois, selecionei Formulário da Web na lista de modelos instalados e aceitei o nome de arquivo Default.aspx. Desmarquei a opção “Colocar código em arquivo separado” e cliquei no botão Adicionar.

Em seguida, cliquei duas vezes no nome de arquivo Default.aspx, no Gerenciador de Soluções, para carregar o código gerado pelo modelo no editor de texto. Exclui todo o código do modelo e o substitui pelo código mostrado na Figura 2.

Figura 2 Aplicativo Web MiniCalc no código-fonte de teste

<%@ 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>

Para manter o meu código-fonte pequeno e fácil de entender, omiti a verificação de erros normal. O código-fonte completo do aplicativo MiniCalc e do agente de teste está disponível em code.msdn.microsoft.com/mag201012TestRun.

Para escrever a automação de testes para aplicativos Web, na maioria dos casos você precisa conhecer as IDs dos diversos controles de usuário. Como podemos ver na Figura 2, usei TextBox1 e TextBox2 para conter dois valores de inteiro de entrada de usuário — RadioButton1 e RadioButton2, para escolher adição ou multiplicação — e TextBox3 para conter o resultado do cálculo aritmético.

Quando um usuário clica no controle Button1, primeiro o aplicativo MiniCalc entra em um atraso aleatório de 1 a 5 segundos para simular o processamento no servidor e depois calcula e exibe uma soma ou o produto de dois valores de entrada de usuário.

Em seguida, decidi tornar o aplicativo MiniCalc assíncrono usando a tecnologia AJAX. Para fazer isso, precisei de um arquivo web.config para o aplicativo, assim, em vez de criar um arquivo web.config manualmente a partir do zero, pressionei a tecla F5 para instruir o Visual Studio a compilar e executar o aplicativo através do depurador. Quando o Visual Studio me pediu permissão para adicionar um arquivo web.config, cliquei em OK. Depois, adicionei um controle de servidor ScriptManager ao aplicativo MiniCalc para habilitar o AJAX:

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

Em seguida, adicionei as marcas necessárias para atualizar o elemento resultante TextBox3 de modo assíncrono junto com o evento de clique 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>

Se você examinar a Figura 1 bem de perto, verá que, para enfatizar que MiniCalc é um aplicativo do AJAX, coloquei um contador de expectativa de vida da página de cliente na interface do usuário. Quando é retornada uma solicitação assíncrona para MiniCalc, somente TextBox3 é atualizado e o contador de expectativa de vida da página não é zerado. A caixa de texto pageLife é definida como:

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

O código JavaScript de cliente associado é:

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

O contador é iniciado pelo evento onload do aplicativo:

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

Teste da interface do usuário do aplicativo Web com o jQuery

Agora que você viu o aplicativo Web em teste, vamos mergulhar no código de automação de testes da interface do usuário. O principal agente de teste é apenas uma página HTML comum com dois elementos de quadro:

    <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>

O quadro chamado rightFrame hospeda o aplicativo Web em teste como está, sem quaisquer modificações ou instrumentação de teste. O quadro leftFrame hospeda uma página HTML chamada TestScenario001.html, que contém todo o código de automação de testes do jQuery. Quando o evento onload do elemento conjunto de quadros é disparado, uma variável chamada appLoaded na página leftFrame é definida como true. Essa variável será utilizada para assegurar que a automação de testes não comece antes de o aplicativo Web em teste ser totalmente carregado no agente de teste. A estrutura do código do cenário de teste é apresentada na Figura 3.

Figura 3 Estrutura da página de automação de testes da interface do usuário

    <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>

O script de teste começa fazendo referência à biblioteca jQuery:

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

Aqui aponto uma cópia local da biblioteca jQuery que baixei do site do Projeto jQuery (jquery.com) e copiei para o diretório raiz do aplicativo MiniCalc. Usei o jQuery versão 1.3.2. A biblioteca está em constante desenvolvimento, por isso provavelmente haverá uma versão mais nova disponível quando você ler este artigo. Para obter mais informações sobre como fazer referência à biblioteca jQuery no seu código, consulte “Obtendo a biblioteca jQuery”.

Obtendo a biblioteca jQuery

Você tem algumas opções para o local da biblioteca jQuery utilizada pelo seu aplicativo. Como mencionei, você pode baixar a versão mais recente do site jquery.com e usá-la do sistema de arquivos local. O site do jQuery tem disponíveis tanto downloads para desenvolvimento (não compactados) quanto para produção (reduzidos — espaços em branco removidos — para ocupar menos 
espaço). Basta selecionar o pacote desejado e salvar o arquivo .js no diretório do projeto.

Se o seu host de aplicativo tem uma conexão ativa com a Internet, uma opção ainda mais fácil é apontar para versão mais atual do jQuery de uma rede de distribuição de conteúdo (CDN) online. Existem inúmeras fontes que você pode usar (inclusive sua versão hospedada), mas duas CDNs altamente disponíveis são a Rede de Distribuição de Conteúdo Microsoft AJAX (asp.net/ajaxlibrary/cdn.ashx) e a API de Bibliotecas do Google (code.google.com/apis/libraries).

Por exemplo, você poderia usar a versão reduzida do jQuery disponível na CDN Microsoft Ajax com a seguinte marca de script:

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

Scott Guthrie tem uma postagem de blog muito útil sobre como usar a CDN Microsoft Ajax para o jQuery e o ASP.NET AJAX, em tinyurl.com/q7rf4w.

De um modo geral, quando você usa o jQuery para automação de testes, é muito mais confiável utilizar uma cópia local descompactada da biblioteca no agente de teste do que uma cópia remota ou compactada. Para aplicativos de produção, no entanto, convém usar uma biblioteca hospedada confiável.

Em seguida, utilizo uma expressão padrão do jQuery para determinar se a minha automação tem acesso à biblioteca jQuery:

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

A função ready do jQuery é acionada assim que o DOM de documento que a contém é totalmente carregado na memória do host de teste e todos os elementos DOM se tornam disponíveis. Se a biblioteca jQuery não estiver acessível, o que costuma acontecer quando você especifica um caminho incorreto, será exibido um erro de “Objeto esperado”.

A função ready aceita uma função anônima como seu único parâmetro. Funções anônimas são usadas com frequência na automação de testes para jQuery e JavaScript. Pense em uma função anônima como uma função que é definida rapidamente usando-se a palavra-chave function.

Vejamos um exemplo de uma função chamada logRemark:

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

Nessa situação, defino uma função que apenas chama uma função de log definida por programa chamada logRemark para exibir uma mensagem ao agente de teste informando que o jQuery está disponível. Também poderia ter usado a função alert do JavaScript.

I begin by using the jQuery selector and chaining syntax to get the current text in the textarea with ID “comments.” The $ notation is a shortcut alias for the jQuery meta-class. A sintaxe # é usada para selecionar um elemento HTML por ID, e a função val pode atuar tanto como setter quanto como getter de valor (uma propriedade na terminologia da programação orientada a objeto). Acrescento o parâmetro de comentário e um caractere de nova linha ao texto de comentário existente e, depois, uso a sintaxe do jQuery para atualizar o elemento TextArea.

Em seguida, configuro algumas variáveis globais de automação de testes:

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

Como a minha automação trabalha com um aplicativo assíncrono, não uso retardos arbitrários. Em vez disso, uso uma sequência de atrasos curtos (definidos pela variável polling), verificando repetidamente (variável numTries) para saber se o valor de algum elemento HTML atende a uma condição booleana, até atingir o número máximo de tentativas (variável maxTries). Neste cenário de teste, atraso no máximo 20 tentativas a 500 ms de atraso por tentativa, o que totaliza 10 segundos. A variável appLoaded é usada para determinar quando o aplicativo Web em teste está totalmente carregado no agente de teste. A variável started é usada para coordenar a execução do agente de teste.

Para iniciar a automação manualmente, clique no botão Executar Teste:

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

A função launch mostrada na Figura 3 é usada para automação de testes completa, como explicarei brevemente. A função runTest é a principal função de coordenação da automação de testes:

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

A função runTest começa chamando a função waitUntilAppLoaded, que é definida como:

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

Lembre que o cenário de testes inicializa a variável appLoaded como false e que o evento onload do conjunto de quadros do agente define appLoaded como true. Aqui eu uso a função setTimeout intrínseca para pausar várias vezes durante 100 ms até o valor de appLoaded se tornar true. Observe que essa abordagem poderia causar um atraso contínuo. Para evitar essa possibilidade, convém adicionar um contador global e retornar false após um número máximo de atrasos.

Depois de definir a variável global start, runTest exibe alguns comentários e chama uma função step1 em um wrapper de manipulador de exceção. A estrutura do agente que apresento aqui é apenas uma possibilidade, e você pode modificar a organização do agente de acordo com seu estilo de programação e o ambiente de teste. Com a minha estrutura considero um cenário de teste como uma sequência de alterações de estado, cada uma representada por uma função stepX.

A função step1 manipula o estado do aplicativo Web em teste simulando entrada do usuário, como ilustrado na Figura 4.

Figura 4 Simulando entrada com a função 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'");
  asyncCall(clickCalculate, checkTextBox3, "8.0000", 
    step2, polling);
}

A sintaxe do jQuery para acessar e manipular elementos HTML é consistente, elegante e, na maioria das vezes, independente do navegador. Observe que, para acessar o aplicativo Web carregado no elemento rightFrame do código no elemento leftFrame, devo usar a palavra-chave parent. Observe também que devo usar o filtro find do jQuery.

Quando manipula os elementos TextBox1 e TextBox2, pressuponho que o aplicativo Web em teste está totalmente carregado no elemento rightFrame. Essa suposição pode não ser razoável para aplicativos com tempos de carregamento longos e, em situações como essa, você pode colocar o código do seletor do jQuery em um loop de atraso window.setTimeout, testando o objeto com o valor interno “undefined”.

Como o aplicativo MiniCalc em teste é um aplicativo do AJAX, meu agente não pode simplesmente chamar o evento de clique de botão Calculate, uma vez que o código do agente de teste daria continuidade à execução sem esperar a resposta assíncrona do aplicativo. Por isso, uso uma função callAndWait definida pelo programa:

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

A função callAndWait chamará uma função (o parâmetro action), entrará em um loop de atraso e pausará por um curto tempo (variável pollTime), verificando se algum estado de aplicativo está definido como true ao chamar a função de parâmetro checkControlFunc com argumentos de parâmetro controlID e controlVal. Quando checkControlFunc retornar true, ou se um número máximo de atrasos for executado, o controle será transferido para a função de parâmetro callbackFunc.

A função callAndWait trabalha lado a lado com uma função doWait definida pelo programa:

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);
}

A função doWait é recursiva e sai quando checkControlFunc retorna true ou o contador local numTries excede a variável global maxTries. Assim, ela chama uma função clickCalculate, entra em um loop de atraso, pausa a sondagem por 500 ms e chama a função checkControl com argumentos de TextBox3 e 8,0000 até checkControl retornar true ou até o loop de atraso ser executado 20 vezes (valor especificado por maxTries):

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

Se checkControl retorna true, o controle é transferido para a função step2. A função clickCalulate usa seleção e encadeamento do jQuery:

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

O principal motivo de se definir uma função de wrapper de ação como esta é para que a função possa ser passada por nome à função callAndWait de um modo conveniente. A função checkControl é simples:

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);
}

Primeiro uso a sintaxe do jQuery para obter uma referência ao controle especificado pelo parâmetro controlID. Se o valor do controle ainda não está disponível, retorno imediatamente para o loop de atraso. Uma vez que o valor do controle esteja pronto, posso verificar se ele é igual a algum valor esperado informado pelo parâmetro controlVal.

Depois de chamar tantas funções stepX quantas desejo chamar, transfiro o controle para uma função de conclusão. Essa função primeiro determina como ele foi obtido:

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

Se o valor da variável global numTries exceder o valor de maxTries, saberei que o aplicativo Web em teste não respondeu no tempo permitido. Aqui decido arbitrariamente que essa é uma falha de caso de teste e não uma forma de resultado indeterminado. Se numTries não excedeu maxTries, começo a verificar o último estado do aplicativo em teste:

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');

Aqui obtenho referências aos três controles textbox. Os elementos exatos do aplicativo Web em teste você quer verificar dependerão dos detalhes do seu aplicativo específico. Em seguida, examino o valor de cada controle textbox para ver se eles têm um valor esperado:

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

No script do meu cenário de teste, todos os valores esperados e de entrada de caso de teste estão inseridos no código. A automação de testes que apresento aqui é mais adequada para situações de testes rápidos e leves, em que os dados de teste inseridos em código são simples e efetivos.

A função de conclusão conclui a execução de teste exibindo um resultado de aprovação ou de reprovação:

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

Assim como ocorre com os dados de entrada de caso de teste, esta abordagem é simples e convém gravar os resultados do teste em um arquivo externo no host de teste ou no servidor Web, ou talvez enviá-los por SMTP a um endereço de email.

Conclusão

O agente descrito aqui é semiautomatizado, porque você deve clicar em um controle de botão para iniciar o teste. Você pode automatizar totalmente o agente adicionando uma função start-wrapper:

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

Adicione um atributo de onload=“leftFrame.launch();” ao elemento conjunto de quadros na página do agente. Cada vez que o aplicativo Web for carregado no agente, será disparado um evento onload, por isso uso a variável global “start” para impedir que a automação de teste seja reiniciada. É interessante observar que, embora o elemento HTML Frame não dê suporte a um evento onload, você pode colocar um atributo onload no elemento quadro do agente, e o evento será propagado no respectivo elemento conjunto de quadros pai.

Agora você pode criar um arquivo .bat usando comandos como:

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

Quando o arquivo .bat for executado, talvez através de um Agendador de Tarefas 
do Windows, o agente carregará e a automação será iniciada automaticamente. Outra forma de estender o sistema de teste que apresentei aqui é colocar as funções definidas pelo programa em um plug-in do jQuery.

Ao escrever a automação leve de testes da interface do usuário de aplicativos Web, você tem várias alternativas para a abordagem baseada em jQuery que apresentei aqui. Uma das principais vantagens de usar a biblioteca jQuery em comparação ao uso de JavaScript bruto é que o jQuery funciona em vários navegadores, como Internet Explorer, Firefox e Safari. Outra vantagem importante é que, ao utilizar o jQuery para escrever a automação de testes, você pode aproveitar seu conhecimento de uso do jQuery para tarefas de desenvolvimento para a Web.

O jQuery tem desvantagens em comparação com abordagens alternativas. O uso do jQuery de certa forma acarreta uma dependência externa, e a automação de testes baseada em script tende a ser mais difícil de gerenciar do que a automação de testes sem script. Se compararmos com o uso de uma estrutura de teste, como Selenium ou Watir, escrever a automação baseada no jQuery traz mais flexibilidade, mas é preciso criar um código em um nível inferior de abstração.

Como de costume, lembrarei você de que não existe uma abordagem de automação de testes que seja mais adequada para todas as situações, mas a automação de testes da interface do usuário de aplicativos Web baseada no jQuery pode ser uma técnica eficiente e eficaz em muitos cenários de desenvolvimento de software.

Dr.James McCaffrey works for Volt Information Sciences Inc., where he manages technical training for software engineers working at the Microsoft Redmond, Wash., campus. He’s worked on several Microsoft products, including Internet Explorer and MSN Search. Dr. McCaffrey is the author of “.NET Test Automation Recipes” (Apress, 2006), and can be reached at jammc@microsoft.com.

*Graças aos seguintes especialistas técnicos para revisão deste artigo:*Scott Hanselman and Matthew Osborn