Test di applicazioni Silverlight con Visual Studio Feature Pack 2

November 19, 2010 18:01 by l.maiorfi

Rilasciato qualche giorno fa, il feature pack 2 per Visual Studio 2010 contiene al suo interno diverse novità interessanti, sommariamente divise in due aree: design e testing.

Tralasciando per ora l’area design, della quale torneremo a parlare dopo un po’ di sperimentazione “sul campo”, ci concentreremo in questo post sulle nuove funzionalità relative al test di applicazioni web, in particolare per quanto concerne lo sviluppo di procedure di “Coded UI Tests” per applicazioni Silverlight. Mentre infatti per applicazioni web “pure” esistono tool quali WatiN o Selenium, in cui l’analisi delle interazioni con il browser e la valutazione delle asserzioni avviene a livello di DOM, nel caso di applicazioni Silverlight la piattaforma di test “ufficiale” non prevede niente di analogo, limitandosi ad un insieme di strumenti utili al più per lo Unit Testing dei ViewModels, strumenti in cui ci si è concentrati a nostro avviso più sulla possibilità di effettuare test asincroni (e non di funzioni asicrone) che sulle reali necessità di chi sviluppa applicazioni LOB con Silverlight.

La principale novità introdotta riguarda la possibilità di creare progetti di Test, integrati nella piattaforma di testing di Visual Studio 2010, di tipo “Coded UI Tests”, ossia in cui tramite un modello ad oggetti accessibile da codice si sviluppano metodi di test che interagiscono, per tramite del browser, con gli elementi visuali di un’interfaccia utente Silverlight. Inoltre, alla flessibilità del modello ad oggetti in questione è stato affiancato un tool di “cattura” delle interazioni con la UI che permette anche di generare asserzioni in maniera completamente visuale.

Vediamo ora un esempio, a titolo di “walkthrough”, in cui creeremo una procedura di test volta a verificare che un’applicazione Silverlight (assolutamente dimostrativa, ancorché basata sul pattern MVVM) funzioni a dovere.

L’applicazione “under test” si presenta come illustrato nell’immagine seguente. Lo scopo di tale applicazione è quello di calcolare la data della Pasqua nell’anno indicato dalla apposita TextBox.

image

Senza soffermarci troppo sull’implementazione (trovate comunque i sorgenti qui), vediamo come creare un progetto di test di tipo “Coded UI Test”.

Come prima cosa, va aggiunto ai riferimenti del progetto Silverlight l’assembly “Microsoft.VisualStudio.TestTools.UITest.Extension.SilverlightUIAutomationHelper”. Sul sito MSDN viene sottolineato che tale assembly NON E’ liberamente ridistribuibile e che va pertanto rimosso dai riferimenti prima dell’effettivo rilascio in produzione. Viene inoltre illustrato come renderne l’inclusione condizionata ad un parametro “Production” da valorizzare opportunamente al momento della compilazione del progetto con MSBuild, feature utile prevalentemente a chi fa Continuos Integration.

Occorre quindi specificare un identificativo per ciascun controllo di ciascuna vista che si intende utilizzare nei Test. Le proprietà utilizzabili sono diverse, ma in ottica MVVM direi che il candidato migliore è “AutomationId”, come mostrato nel frammento di XAML che segue, relativo alla nostra unica View:

   1: <TextBox AutomationProperties.AutomationId="TxtYear" Margin="5" Padding="5" Text="{Binding Year,Mode=TwoWay}" />
   2:  
   3: <sdk:DatePicker AutomationProperties.AutomationId="DtpEaster" SelectedDateFormat="Long" SelectedDate="{Binding DtEaster}" Margin="5"/>
   4:  
   5: <Button AutomationProperties.AutomationId="BtnCalcola" Content="Calcola Pasqua" Command="{Binding CommandComputeEaster}" Margin="5" Padding="5" />

A questo punto è possibile aggiungere alla Solution un progetto di tipo Test. Eliminato, se si vuole, il file UnitTest1.cs compreso nella confezione, è arrivato il momento di aggiungere l’agognato Item di tipo “Coded UI Test”. Al momento della inclusione apparirà una richiesta di questo tipo (successivamente potranno essere utilizzate allo stesso scopo le corrispondenti voci di menu contestuale direttamente all’interno del sorgente di un metodo di Test):

image 

La prima scelta avvierà un tool di cattura che ci consentirà di registrare tutte le azioni che effettueremo attraverso il browser sull’interfaccia utente della nostra applicazione. Il tool in questione si presenta come illustrato sotto. Sono presenti un pulsante per avviare la registrazione, un pulsante che mostra un log sintetico degli step catturati, un “mirino” per la selezione dei controlli relativi alla generazione delle asserzioni “visuali” ed un pulsante per la generazione dei sorgenti relativi al playback delle azioni catturate e delle asserzioni definite.

image

Premuto il pulsante di registrazione ed avviato il browser, questo si presenterà con la barra del titolo leggermente modificata, ad indicare la cattura in corso:

image 

Dopo aver eseguito la sequenza di Test desiderata, ad esempio nella nostra applicazioni dimostrativa specificando l’anno 2011 e cliccando sul pulsante “Calcola Pasqua”, e dopo aver generato i sorgenti relativi alle operazioni catturate, è possibile (e opportuno) generare una asserzione che controlli che il valore calcolato sia effettivamente quello atteso, mediante la funzione del tool illustrata nelle due immagini che seguono.

image 

image

 

Se tutto è andato come deve, dopo aver di nuovo dato il via alla generazione del codice del test, vedremo il seguente frammento all’interno del metodo di test editato.

   1: [TestMethod]
   2: public void CodedUITestMethod1()
   3: {
   4:     this.UIMap.CalcoloPasqua2011();
   5:     this.UIMap.AssertDataGiustaDom24Apr2011();
   6: }

In cui vengono invocati due metodi generati dal tool di cattura il cui sorgente è riportato di seguito.

   1: /// <summary>
   2: /// CalcoloPasqua2011 - Use 'CalcoloPasqua2011Params' to pass parameters into this method.
   3: /// </summary>
   4: public void CalcoloPasqua2011()
   5: {
   6:     #region Variable Declarations
   7:     WinButton uINotificationChevronButton = this.UIItemWindow.UINotificationChevronButton;
   8:     BrowserWindow uIHttplocalhost3821DemWindow = this.UIHttplocalhost3821DemWindow;
   9:     SilverlightEdit uITxtYearEdit = this.UIHttplocalhost3821DemWindow.UIHttplocalhost3821DemDocument.UISilverlightControlHoPane.UIItemCustom.UIMainPageMainPage.UIItemPage.UIPageScrollViewerPane.UITxtYearEdit;
  10:     SilverlightButton uICalcolaPasquaButton = this.UIHttplocalhost3821DemWindow.UIHttplocalhost3821DemDocument.UISilverlightControlHoPane.UIItemCustom.UIMainPageMainPage.UIItemPage.UIPageScrollViewerPane.UICalcolaPasquaButton;
  11:     #endregion
  12:  
  13:     // Go to web page 'about:blank' using new browser instance
  14:     this.UIHttplocalhost3821DemWindow.LaunchUrl(new System.Uri(this.CalcoloPasqua2011Params.UIHttplocalhost3821DemWindowUrl));
  15:  
  16:     // Go to web page 'http://localhost:3821/DemoSLTestingTestPage.aspx'
  17:     uIHttplocalhost3821DemWindow.NavigateToUrl(new System.Uri(this.CalcoloPasqua2011Params.UIHttplocalhost3821DemWindowUrl1));
  18:  
  19:     // Type '2011' in 'TxtYear' text box
  20:     uITxtYearEdit.Text = this.CalcoloPasqua2011Params.UITxtYearEditText;
  21:  
  22:     // Click 'Calcola Pasqua' button
  23:     Mouse.Click(uICalcolaPasquaButton, new Point(48, 10));
  24: }
  25:  
  26: /// <summary>
  27: /// AssertDataGiustaDom24Apr2011 - Use 'AssertDataGiustaDom24Apr2011ExpectedValues' to pass parameters into this method.
  28: /// </summary>
  29: public void AssertDataGiustaDom24Apr2011()
  30: {
  31:     #region Variable Declarations
  32:     SilverlightEdit uITextBoxEdit = this.UIHttplocalhost3821DemWindow.UIHttplocalhost3821DemDocument.UISilverlightControlHoPane.UIItemCustom.UIMainPageMainPage.UIItemPage.UIDtpEasterDatePicker.UITextBoxEdit;
  33:     #endregion
  34:  
  35:     // Verify that 'TextBox' text box's property 'Text' equals 'domenica 24 aprile 2011'
  36:     Assert.AreEqual(this.AssertDataGiustaDom24Apr2011ExpectedValues.UITextBoxEditText, uITextBoxEdit.Text);
  37: }

Da questo momento in poi, è possibile eseguire il Test in questione come qualsiasi altro, ad esempio avviando la verifica dalla ToolWindow “TestView”:

image

L’esecuzione del test aprirà il browser, eseguirà i passi registrati (apparentemente non con gli stessi tempi, pur rispettando la logica degli stati dei controlli con cui c’è interazione) e verificherà le asserzioni, riportando l’esito del test come sempre nella ToolWindos “TestResults” di Visual Studio:

image

Trovate i sorgenti relativi al progetto di esempio qui.


Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5