Condividi tramite


Il presente articolo è stato tradotto automaticamente.

Esecuzione di test

Test dell'interfaccia utente di applicazioni Web con jQuery

James McCaffrey

Scarica il codice di esempio

La libreria jQuery è un insieme di open source di funzioni JavaScript. Sebbene jQuery è stato creato con lo sviluppo del Web in mente, la biblioteca ha diverse caratteristiche che lo rendono particolarmente adatto per leggero Web applicazione dell'automazione di test. In mese questo ti mostrerò come fare proprio questo.

Il modo migliore per vedere dove ho guidato è di esaminare lo screenshot in Figura 1 , che mostra dell'automazione di test con jQuery in azione. Il test harness è ospitato da Internet Explorer e costituito da una pagina HTML denominata UITestHarness.html.

La pagina di test harness è davvero solo un contenitore con due elementi di frame HTML. Il frame a destra contiene l'applicazione Web sottoposta a test, in questo caso un ASP semplice ma rappresentativo.Applicazione calcolatrice netto denominata MiniCalc. Il frame a sinistra contiene una pagina HTML denominata TestScenario001.html, che consiste di un elemento TextArea per visualizzare i messaggi di stato, un elemento Button per avviare manualmente l'automazione, e funzioni JavaScript basato su jQuery che manipolano l'applicazione Web sottoposta a test e verificare lo stato risultante dell'applicazione per determinare un risultato di pass/fail.

image: UI Test Automation with jQuery

Figura 1 di Automazione di Test con jQuery

La libreria jQuery è adatta per il test di richiesta / risposta HTTP, e mi sono rivolto a richiesta-test di risposta con jQuery nel gennaio 2010 Test eseguito colonna ( msdn.microsoft.com/magazine/ee335793 ).

In questo articolo si presuppone la presenza di acquisire familiarità con ASP.Tecnologia netta e intermedi programmazione JavaScript abilità, ma non assumere non si ha alcuna esperienza con la libreria jQuery. Tuttavia, anche se sei nuovo di ASP.NET e test di automazione in generale, dovrebbe ancora essere in grado di seguire mese questo senza troppe difficoltà.

Nelle sezioni che seguono, verrà prima descritto l'applicazione MiniCalc così saprete esattamente come l'implementazione dell'applicazione da testare è correlato a prova di automazione interfaccia utente. Successiva, ti guiderà attraverso i dettagli della creazione leggero basato su jQuery dell'automazione di test, come illustrato nella Figura 1 di . Io sarò a capo fino descrivendo come è possibile estendere le tecniche che ho presentato per soddisfare le proprie esigenze, e I'll discutere i vantaggi e gli svantaggi di jQuery UI automazione rispetto ad approcci alternativi di test. Penso che le tecniche qui presentate sono interessanti e possono essere un'utile aggiunta al tuo testing, il set di strumenti per lo sviluppo e la gestione.

L'applicazione da testare

Diamo un'occhiata al codice per l'ASP MiniCalc.NET Web applicazione, che è la destinazione di automazione di test basato su jQuery UI.

Ho creato l'applicazione MiniCalc utilizzando Visual Studio 2008. Dopo il lancio di Visual Studio, ho cliccato su File | Novità | Sito Web. Per evitare l'ASP.Meccanismo di netto code-behind e mantenere tutto il codice per un'applicazione Web in un unico file, ho selezionato l'opzione sito Web vuoto. Successivamente, selezionato il HTTP modalità opzione (anziché modalità File) la discesa del campo Ubicazione e il percorso come specificato:

http://localhost/TestWithJQuery/MiniCalc

Ho deciso di utilizzare C# per la logica dell'applicazione MiniCalc. Le tecniche di automazione di test qui presentate funzionerà con ASP.NET Web applicazioni scritte con C# e Visual Basic come pure applicazioni Web create utilizzando tecnologie come il classico ASP, CGI, PHP, JSP, Ruby e così via.

Ho cliccato OK nella finestra di dialogo Nuovo sito Web di configurare IIS e generare la struttura dell'applicazione Web. Successivamente, sono andato alla finestra Esplora, selezionata il nome del progetto MiniCalc e selezionate Aggiungi nuovo elemento dal menu di scelta rapida. Poi selezionate il modulo Web dall'elenco dei modelli installati e accettate il nome del file Default.aspx. Sono stata deselezionata l'opzione "Inserisci codice in file separato" e quindi fa clic sul pulsante Aggiungi.

Successivamente, fatto doppio clic sul nome del file Default.aspx in Esplora soluzioni per caricare il codice generato dal modello nell'editor di testo. Ho eliminato tutto il codice del modello e sostituito con il codice mostrato in di Figura 2.

Figura 2 di applicazione Web MiniCalc sotto fonte di prova

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

Per mantenere le dimensioni del mio codice sorgente piccolo e facile da capire, è stato omesso controllo errori normale.Il codice sorgente completo di applicazione MiniCalc e test harness è disponibile a partire da code.msdn.microsoft.com/mag201012TestRun .

Per scrivere un'automazione di test per applicazioni Web, nella maggior parte dei casi è necessario conoscere gli ID dei vari controlli utente.Come può vedere in di Figura 2, ho usato TextBox1 e TextBox2 per contenere i valori di input due interi utente — RadioButton1 e RadioButton2 per selezionare addizione e moltiplicazione — e TextBox3 per contenere il risultato del calcolo aritmetico.

Quando un utente fa clic sul controllo Button1, l'app MiniCalc prima va in un ritardo casuale di un massimo di cinque secondi per simulare l'elaborazione sul lato server di qualche tipo e quindi calcola e Visualizza una somma o prodotto dei valori di input due utente.

Successivamente, ho deciso di fare l'app MiniCalc asincroni utilizzando la tecnologia AJAX.Per fare che mi serviva un file web.config per l'applicazione, così, anziché creare un file web.config manualmente da zero, mi ha colpito il tasto F5 per indicare a Visual Studio per generare ed eseguire l'applicazione tramite il debugger.Quando Visual Studio ha spinto per il permesso di aggiungere un file web.config, fatto clic su OK.Successivamente, aggiunto un controllo sul lato server di ScriptManager per l'applicazione MiniCalc per abilitare AJAX:

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

Poi ho aggiunto i tag necessari per l'aggiornamento in modo asincrono l'elemento del risultato di TextBox3 in collaborazione con il Button1 evento click:

<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 si esamina attentamente il di Figura 1, si può vedere che, per sottolineare il fatto che il MiniCalc è un'applicazione AJAX, ho messo un contatore di vita della pagina sul lato client nell'interfaccia utente. Quando una richiesta asincrona a restituisce MiniCalc, solo TextBox3 viene aggiornato e non viene reimpostato il contatore di vita della pagina. La casella di testo pageLife è definita come:

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

Il JavaScript lato client associato è:

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

Il contatore viene avviato dall'evento onload applicazione:

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

Test dell'interfaccia utente di applicazioni Web con jQuery

Ora che hai visto l'applicazione Web da testare, Let's tuffarsi proprio il codice di automazione di test dell'interfaccia utente. Principali test harness è semplicemente una normale pagina HTML con due elementi frame:

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

Il fotogramma denominato rightFrame host Web applicazione sottoposta a test come è, senza modifiche o strumentazione di prova. Il fotogramma denominato leftFrame ospita una pagina HTML denominata TestScenario001.html, che contiene tutto il codice di automazione test jQuery. Si noti che quando viene generato l'evento onload di elemento frameset, una variabile nella pagina leftFrame, denominata appLoaded, è impostata su true. Questa variabile servirà per assicurarsi che l'automazione di test non iniziare prima che l'applicazione Web da testare viene caricato completamente nel test harness. La struttura del codice di test scenario è elencata in di Figura 3.

Figura 3 di struttura della pagina di automazione interfaccia utente Test

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

Lo script di test inizia con riferimento alla libreria di jQuery:

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

Qui I punto a una copia locale della libreria jQuery che avevo scaricato dal sito Web del progetto jQuery (di jquery.com ) e copiati nella directory principale di applicazione MiniCalc.Ho usato la versione 1.3.2 di jQuery.La biblioteca è in costante sviluppo, così ci sarà probabilmente una versione più recente disponibile dal tempo di che leggere questo articolo.Per ulteriori informazioni su riferimento alla libreria jQuery nel codice, vedere "Ottenendo la libreria jQuery."

Ottenere la libreria jQuery

Si hanno alcune opzioni per l'ubicazione della libreria jQuery utilizzata dall'applicazione.Come accennato, potete scaricare la versione più recente da jquery.com di e utilizzarlo dal file system locale.Il sito di jQuery è sia lo sviluppo (non compresso) e produzione (minified — rimosso gli spazi vuoti — per un footprint più piccole) download disponibili.Basta selezionare il pacchetto desiderato e salvare il file .js alla directory del progetto.

Se l'applicazione host dispone di una connessione Internet attiva, un'opzione ancora più semplice è quello di scegliere la versione più recente di jQuery da un online content delivery network (CDN).Ci sono una serie di fonti, che è possibile utilizzare (compreso il tuo versione hosted), ma due CDNs altamente disponibili sono il Microsoft AJAX Content Delivery Network ( asp.net/ajaxlibrary/cdn.ashx ) e librerie API di Google ( code.google.com/apis/libraries ).

Ad esempio, si potrebbe utilizzare la versione minified di jQuery da Microsoft Ajax CDN con il seguente tag di script:

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

Scott Guthrie ha un post utile blog utilizzando Microsoft Ajax CDN per jQuery e ASP.NET AJAX a tinyurl.com/q7rf4w .

In generale, quando utilizzando jQuery per l'automazione di test, utilizzando un locale, spacchettato copia della libreria nel test harness è più affidabile rispetto all'utilizzo di una copia remota o imballata. Per le applicazioni di produzione, tuttavia, sarà da utilizzare una libreria di hosting affidabile.

Successivamente, si utilizzerà un idioma di jQuery standard per determinare se l'automazione ha accesso alla libreria jQuery:

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

La funzione pronto jQuery viene attivato non appena il documento contiene DOM è completamente caricato nella memoria dell'host di test e di tutti gli elementi DOM sono disponibili. Se la libreria jQuery non è accessibile — che in genere accade quando si specifica un percorso non corretto alla libreria — verrà generato un errore di "Oggetto previsto".

La funzione pronta accetta una funzione anonima come unico parametro. Funzioni anonime vengono spesso utilizzati nell'automazione di test sia jQuery e JavaScript. Si può pensare di una funzione anonima come una funzione che è definita il volo utilizzando la parola chiave function.

Ecco un esempio per una funzione chiamata logRemark:

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

In questa situazione che è possibile definire una funzione che semplicemente richiama una funzione di registrazione definite dal programma chiamata logRemark per visualizzare un messaggio per il test harness che jQuery è disponibile. Avrei potuto anche utilizzare la funzione di alert JavaScript intrinseca.

Iniziare utilizzando il selettore di jQuery e concatenamento sintassi per ottenere il testo corrente in textarea con ID "commenti". La notazione è un alias di scelta rapida per la meta-classe di jQuery. Il # syntax viene utilizzata per selezionare un elemento HTML con l'ID e la funzione val può fungere da richiamo (una proprietà nella terminologia di programmazione object oriented) sia un valore setter. Aggiungere il parametro di commento e un carattere di nuova riga per il testo del commento esistente e quindi utilizzare la sintassi di jQuery per aggiornare l'elemento TextArea.

Successivamente, impostare variabili globali da alcuni test di automazione:

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

Perché il mio automazione occupa un'applicazione asincrona, io non uso arbitrario ritardi. Invece, utilizzare una sequenza di brevi (definito dalla variabile polling) ritardi, verifica ripetutamente (variabile numTries) per vedere se il valore di qualche elemento HTML soddisfa una condizione booleana, fino a un numero massimo di tentativi (maxTries variabile). In questo scenario di test ritardare un massimo di 20 tentativi di 500 ms ritardo per ogni tentativo per un totale di 10 secondi. La variabile appLoaded viene utilizzata per determinare quando l'applicazione Web da testare è completamente caricato nel test harness. La variabile iniziata viene utilizzata per coordinare l'esecuzione di test harness.

Per avviare manualmente l'automazione che è possibile fare clic sul pulsante Esegui Test:

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

La funzione di lancio mostrata in di Figura 3 viene utilizzata per l'automazione di test completo, come spiegherò in breve. La funzione runTest agisce come la principale funzione di coordinamento per l'automazione di test:

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

La funzione runTest comincia chiamando la funzione waitUntilAppLoaded, che è definita come:

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

Ricordo che lo scenario di prova Inizializza la variabile appLoaded su false e che l'evento onload frameset di imbracatura imposta appLoaded su true. Qui, io uso la funzione setTimeout intrinseca ripetutamente pausa di 100 ms, fino a quando il valore di appLoaded diventa true. Si noti che questo approccio potrebbe ritardare per sempre. Per evitare questa possibilità, è possibile aggiungere un contatore globale e restituire false dopo qualche numero massimo di ritardi.

Dopo aver impostato la variabile globale start, runTest Visualizza alcuni commenti e richiama una funzione di step1 in un wrapper di gestore di eccezioni. La struttura di imbracatura che presento qui è solo una possibilità, ed è possibile modificare l'organizzazione di imbracatura per adattarlo all'ambiente di test e stile di programmazione. Con la mia struttura considero uno scenario di test come una sequenza di cambiamenti di stato, ognuno dei quali è rappresentato da una funzione di stepX.

La funzione step1 manipola lo stato dell'applicazione Web sottoposta a test simulando l'input dell'utente, come illustrato in di Figura 4.

Figura 4 di Simulare Input con la funzione 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);
}

La sintassi di jQuery per l'accesso e la modifica di elementi HTML è coerente, elegante e, per la maggior parte, indipendente dal browser. Si noti che per accedere all'applicazione Web caricati nell'elemento rightFrame dal codice nell'elemento leftFrame, devo usare la parola chiave padre. Si noti inoltre che devo usare il filtro di ricerca di jQuery.

Quando si modificano gli elementi TextBox1 e TextBox2, fare l'ipotesi che l'applicazione Web da testare è completamente caricato nell'elemento rightFrame. Questa ipotesi non può essere ragionevole per applicazioni con tempi di caricamento lunghi, e in tali situazioni è possibile inserire il codice di jQuery selettore in un ciclo di ritardo window.setTimeout, test contro il valore "undefined" incorporato l'oggetto di destinazione.

Poiché l'applicazione MiniCalc sotto test è un'applicazione AJAX, harness non può semplicemente richiamare l'evento click del pulsante Calculate, perché il codice di test harness sarebbe continuare l'esecuzione senza attendere la risposta asincrona dell'applicazione. Quindi, utilizzare una funzione definita dal programma callAndWait:

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

La funzione di callAndWait sarà richiamare una funzione (il parametro action), andare in un ciclo di ritardo e mettere in pausa un breve lasso di tempo (variabile pollTime) e controllare per vedere se alcuni lo stato applicazione è vero chiamando il parametro funzione checkControlFunc con argomenti di parametro controlID e controlVal. Quando checkControlFunc restituisce true, o un numero massimo di ritardi è stato eseguito, controllo sarà trasferito al parametro funzione callbackFunc.

La funzione callAndWait funziona mano nella mano con una funzione definita dal programma 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 funzione doWait è ricorsiva e si chiude quando checkControlFunc restituisce true o locale contatore numTries supera maxTries variabile globale. Così, questo chiama una funzione denominata clickCalculate, entra in un ciclo di ritardo, pause di polling per 500 ms e chiama la funzione checkControl con argomenti di TextBox3 e 8.0000 fino a checkControl restituisce true o il ciclo di ritardo ha eseguito 20 volte (specificato da maxTries):

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

Se checkControl restituisce true, il controllo viene trasferito alla funzione step2. La funzione di clickCalulate utilizza jQuery selezione e concatenamento:

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

La ragione principale per la definizione di una funzione wrapper di azione come questo è in modo che la funzione può essere convenientemente passata dal nome della funzione callAndWait. La funzione checkControl è molto semplice:

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

In primo luogo utilizzare jQuery sintassi per ottenere un riferimento al controllo specificato dal parametro controlID. Se il valore del controllo non è ancora disponibile, torno subito per il ciclo di ritardo. Una volta che il valore del controllo è pronto posso controllare per vedere se è uguale a qualche valore atteso dato dal parametro controlVal.

Dopo la chiamata come molte funzioni di stepX come I care chiamare, trasferisco il controllo a una funzione finish. Tale funzione determina innanzitutto come esso è stato raggiunto:

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

Se il valore della variabile globale numTries supera il valore di maxTries, so che l'applicazione Web sottoposta a test non ha risposto entro il tempo consentito. Qui arbitrariamente decidere che questo è un errore di test case piuttosto che qualche forma di un risultato indeterminato. Se numTries non ha superato maxTries inizia lo stato finale dell'applicazione sottoposta a test di verifica:

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

Qui ottenere riferimenti ai tre controlli textbox. Esattamente quali elementi dell'applicazione Web sottoposta a test si decide di archiviare dipenderà i dettagli della vostra applicazione particolare. Successivamente, esaminare il valore di ciascun controllo textbox per vedere se ognuno ha un valore previsto:

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

Il mio script di test scenario ha tutti i test case di input e i valori previsti hardcoded. L'automazione di test che presento è più adatto per situazioni test leggere, veloce, dove i dati di test hardcoded sono semplice ed efficace.

La finitura funzione avvolge il test eseguito visualizzando un pass o fallire il risultato:

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

Come con i dati di input del test case, questo approccio è leggero e si potrebbe voler scrivere risultati in un file esterno sul server Web host del test o dei test, o forse inviare risultati di test tramite SMTP a un indirizzo di posta elettronica.

Conclusioni

L'imbracatura qui descritto è semiautomatica nel senso che è necessario fare clic su un controllo pulsante per avviare il test. Potete automatizzare completamente l'imbracatura aggiungendo una funzione di avvio-wrapper:

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

Aggiungere un attributo di onload="leftFrame.launch();" per l'elemento frameset nella pagina di test harness. Ogni carico dell'applicazione Web nella selletta attiverà un evento onload, quindi utilizzare la variabile globale "start" per evitare che l'automazione di test dal riavvio. È interessante notare che, anche se l'elemento HTML Frame non supporta un evento onload, infatti, è possibile posizionare un attributo onload in elemento frame imbracatura e l'evento sarà bubble fino all'elemento padre frameset.

Ora è possibile creare un file .bat con comandi quali:

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

Quando si esegue il file .bat — forse tramite un'attività di Windows Scheduler — caricherà l'imbracatura e l'automazione si avvierà automaticamente. Un altro modo che è possibile estendere il sistema di test che ho presentato qui è quello di inserire le funzioni definite dal programma un jQuery plugin.

Durante la scrittura di automazione di test UI leggera applicazione Web hai diverse alternative per l'approccio basato su jQuery che ho presentato qui. Uno dei vantaggi principali di usando la libreria jQuery, rispetto all'utilizzo di materie prime JavaScript è che funziona jQuery su più browser come Internet Explorer, Firefox e Safari. Un altro vantaggio è che utilizzando jQuery per scrivere un'automazione di test, che è possibile costruire attivamente la conoscenza dell'utilizzo di jQuery per attività di sviluppo Web.

Utilizzando jQuery hanno svantaggi rispetto agli approcci alternativi. L'utilizzo di jQuery comporta una dipendenza dall'esterno in una certa misura e automazione di test basata su script tende ad essere più difficili da gestire rispetto automazione non-script di test. Rispetto all'utilizzo di un framework di test come il selenio o Watir, scrittura di automazione basata su jQuery ti dà più flessibilità, ma è necessario scrivere codice a un basso livello di astrazione.

Come al solito, ti ricordo che nessuno prova particolare approccio di automazione è più adatto per tutte le situazioni, ma basato su jQuery Web applicazione dell'automazione di test può essere una tecnica efficace ed efficiente in molti scenari di sviluppo del software.

Dr. James McCaffrey lavora per Volt Information Sciences Inc., dove gestisce la formazione tecnica per gli ingegneri software della Microsoft di Redmond, Washington, campus. Ha lavorato in diversi prodotti Microsoft, inclusi Internet Explorer e MSN Search.Dr.McCaffrey è l'autore di ".NET Test Automation Recipes"(Apress, 2006) e può essere raggiunto a jammc@microsoft.comdi .

*Grazie ai seguenti esperti per la revisione di questo articolo:*Scott Hanselman e Matthew Osborn