Procedura dettagliata: creazione, modifica e gestione di un test codificato dell'interfaccia utente

Articolo
06/07/2013

In questa procedura dettagliata verrà creata una semplice applicazione Windows Presentation Foundation (WPF) per dimostrare come creare, modificare e gestire un test codificato dell'interfaccia utente.Nella procedura dettagliata vengono fornite le soluzioni per correggere i test interrotti da vari problemi di temporizzazione e dal refactoring del controllo.

Prerequisiti

Per la procedura dettagliata è necessario il seguente componente:

Visual Studio Ultimate o Visual Studio Premium.

Creare una semplice applicazione WPF

Scegliere Nuovo dal menu File, quindi scegliere Progetto.

Verrà visualizzata la finestra di dialogo Nuovo progetto.
Nel riquadro Installato espandere Visual C#, quindi selezionare Finestre.
Sopra il riquadro centrale verificare che l'elenco a discesa del framework di destinazione sia impostato su .NET Framework 4.5.
Nel riquadro centrale selezionare il modello Applicazione WPF.
Nella casella di testo Nome digitare SimpleWPFApp.
Scegliere una cartella in cui verrà salvato il progetto.Nella casella di testo Percorso digitare il nome della cartella.
Scegliere OK.

Verrà aperto WPF Designer per Visual Studio e la finestra principale del progetto.
Aprire la casella degli strumenti, se non è già aperta.Scegliere il menu Visualizza quindi scegliere Casella degli strumenti.
Nella sezione Tutti i controlli di WPF trascinare i controlli Button, CheckBox e ProgressBar nell'area di progettazione della finestra principale.
Selezionare il controllo Button.Nella finestra Proprietà modificare il valore della proprietà Content da Button in Start.
Selezionare il controllo ProgressBar.Nella finestra Proprietà modificare il valore della proprietà Maximum da 100 in 1000.
Selezionare il controllo Checkbox.Nella finestra Proprietà cancellare la proprietà IsEnabled.
Fare doppio clic sul pulsante per aggiungere un evento Choose.

MainWindow.xmal.cs viene visualizzato nell'Editor di codice con il cursore nel nuovo evento button1_Choose.
Nella parte superiore della classe MainWindow aggiungere un delegato,che verrà utilizzato per l'indicatore di stato.Per aggiungere il delegato, aggiungere il codice seguente:
```
        private delegate void ProgressBarDelegate(
        System.Windows.DependencyProperty dp, Object value);
```

Nel metodo button1_Choose aggiungere il codice seguente:

            double progress = 0;

            ProgressBarDelegate updatePbDelegate =
        new ProgressBarDelegate(progressBar1.SetValue);

            do
            {
                progress ++;

                Dispatcher.Invoke(updatePbDelegate,
                    System.Windows.Threading.DispatcherPriority.Background,
                    new object[] { ProgressBar.ValueProperty, progress });
                progressBar1.Value = progress;
            }
            while (progressBar1.Value != progressBar1.Maximum);

            checkBox1.IsEnabled = true;

Verificare che l'applicazione WPF venga eseguita correttamente

Scegliere Avvia debug dal menu Debug o premere F5.
Scegliere Avvia.

L'indicatore di stato dovrebbe essere completato al 100% in pochi secondi.Il controllo CheckBox è così abilitato.
Chiudere SimpleWPFApp.

Creare ed eseguire un test codificato dell'interfaccia utente per SimpleWPFApp

In Esplora soluzioni fare clic con il pulsante destro del mouse sulla soluzione, scegliere Aggiungi, quindi Nuovo progetto.

Verrà visualizzata la finestra di dialogo Aggiungi nuovo progetto.
Nel riquadro Installato espandere Visual C#, quindi selezionare Test.
Nel riquadro centrale selezionare il modello Progetto di test codificato dell'interfaccia utente.
Scegliere OK.

In Esplora soluzioni, il nuovo progetto del test codificato dell'interfaccia utente denominato CodedUITestProject1 verrà aggiunto alla soluzione.

Verrà visualizzata la finestra di dialogo Genera codice per test codificato dell'interfaccia utente.
Selezionare l'opzione Registra azioni, modifica mappa dell'interfaccia utente o aggiungi asserzioni e scegliere OK.

UIMap – Generatore di test codificati dell'interfaccia utente verrà visualizzata la finestra di Visual Studio viene ridotta a icona.

Per ulteriori informazioni sulle opzioni di questa finestra di dialogo, vedere Creare test codificati dell'interfaccia utente.
Individuare ed eseguire l'applicazione SimpleWPFApp creata precedentemente.Per impostazione predefinita, l'applicazione viene salvata nel percorso C:\Users\<nomeutente>\Documenti\Visual Studio 2012\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe

Creare un collegamento sul desktop all'applicazione SimpleWPFApp.Fare clic con il pulsante destro del mouse su SimpleWPFApp.exe e scegliere Copia.Sul desktop fare clic con il pulsante destro del mouse e scegliere Incolla collegamento.

Suggerimento
Un collegamento all'applicazione rende più facile aggiungere o modificare i test codificati dell'interfaccia utente per l'applicazione, perché consente di avviare rapidamente l'applicazione.Non è necessario passare a tale percorso.L'applicazione dovrà essere eseguita di nuovo in questa procedura dettagliata.

Scegliere Avvia registrazione in UIMap - Generatore di test codificati dell'interfaccia utente.Il Generatore di test codificati dell'interfaccia utente sarà pronto in pochi secondi.
Eseguire SimpleWPFApp.exe utilizzando il collegamento sul desktop.
In SimpleWPFApp, scegliere Avvia.

L'indicatore di stato dovrebbe essere completato al 100% in pochi secondi.Il controllo CheckBox è così abilitato.
Selezionare la casella del controllo Checkbox.
Chiudere l'applicazione SimpleWPFApp.
In UIMap - Generatore di test codificati dell'interfaccia utente scegliere Genera codice.
In Nome metodo digitare SimpleAppTest e scegliere Aggiungi e genera.Entro pochi secondi il test codificato dell'interfaccia utente verrà visualizzato e aggiunto alla soluzione.
Chiudere UIMap - Generatore di test codificati dell'interfaccia utente.

Il file CodedUITest1.cs verrà visualizzato nell'Editor di codice.

Eseguire il test codificato dell'interfaccia utente

Nel file CodedUITest1.cs individuare il metodo CodedUITestMethod, fare clic con il pulsante destro del mouse e scegliere Esegui test.

Durante l'esecuzione del test codificato dell'interfaccia utente, SimpleWPFApp rimane visibile.Vengono eseguiti i passaggi effettuati nella procedura precedente.Tuttavia, quando nel test viene effettuato il tentativo di selezionare la casella di controllo relativa al controllo CheckBox, nella finestra Risultati test viene indicato che il test non è stato completato.Ciò è dovuto al fatto che durante l'esecuzione del test viene effettuato il tentativo di selezionare la casella di controllo, senza considerare che il controllo CheckBox rimane disabilitato finché l'indicatore di stato non sarà completato al 100%.È possibile correggere questo e problemi analoghi utilizzando i diversi metodi UITestControl.WaitForControlXXX() disponibili per il test codificato dell'interfaccia utente.Nella procedura seguente verrà descritto l'utilizzo del metodo WaitForControlEnabled() per correggere il problema che ha impedito il corretto funzionamento di questo test.Per ulteriori informazioni, vedere Impostazione dei test codificati dell'interfaccia utente per l'attesa di eventi specifici durante la riproduzione.

Modificare ed eseguire di nuovo il test codificato dell'interfaccia utente

Nella finestra dei risultati del test fare clic con il pulsante destro del mouse sul test che non è stato completato e scegliere Visualizza dettagli risultati test.

Verrà visualizzato CodedUITestMethod1[Results].
Nella sezione Analisi dello stack errori scegliere il primo collegamento accanto a TestProject1.UIMap.SimpleAppTest().

Il file UIMap.Designer.cs verrà aperto con il punto di errore evidenziato nel codice:
```
// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;
```

Per correggere questo problema, è possibile fare in modo che il test codificato dell'interfaccia utente attenda che il controllo CheckBox sia abilitato prima di continuare fino a questa riga utilizzando il metodo WaitForControlEnabled().

Attenzione
Il file UIMap.Designer.cs non deve essere modificato.Qualsiasi modifica del codice apportata nel file UIMapDesigner.cs verrà sovrascritta ogni volta che si genera codice utilizzando UIMap - Generatore di test codificati dell'interfaccia utente.Se è necessario modificare un metodo registrato, copiarlo nel file UIMap.cs e rinominarlo.Il file UIMap.cs può essere utilizzato per eseguire l'override dei metodi e delle proprietà contenuti nel file UIMapDesigner.cs.È necessario rimuovere il riferimento al metodo originale nel file Coded UITest.cs e sostituirlo con il nome del metodo rinominato.

Il file UIMap.Designer.cs non deve essere modificato.Qualsiasi modifica del codice apportata nel file UIMapDesigner.cs verrà sovrascritta ogni volta che si genera codice utilizzando UIMap - Generatore di test codificati dell'interfaccia utente.Se è necessario modificare un metodo registrato, copiarlo nel file UIMap.cs e rinominarlo.Il file UIMap.cs può essere utilizzato per eseguire l'override dei metodi e delle proprietà contenuti nel file UIMapDesigner.cs.È necessario rimuovere il riferimento al metodo originale nel file Coded UITest.cs e sostituirlo con il nome del metodo rinominato.

In Esplora soluzioni, individua UIMap.uitest nel progetto di test codificato dell'interfaccia utente.
Aprire il menu di scelta rapida per UIMap.uitest e scegliere Apri.

Il test codificato dell'interfaccia utente viene visualizzato nell'Editor test codificati dell'interfaccia utente.È quindi possibile visualizzare e modificare il test codificato dell'interfaccia utente.
Nel riquadro dell'azione dell'interfaccia utente, selezionare il metodo di test che si desidera spostare nel file di UIMap.vb o UIMap.cs per facilitare la funzionalità di codice personalizzato che non verrà sovrascritta quando il codice di test viene ricompilato.
Scegliere il pulsante Sposta codice nella barra degli strumenti dell'Editor di test codificati dell'interfaccia utente.
Verrà visualizzata una finestra di dialogo di Microsoft Visual StudioSi tratta di un avviso indicante che il metodo verrà spostato dal file UIMap.uitest al file UIMap.cs e che non sarà più possibile modificare il metodo utilizzando l'Editor di test codificati dell'interfaccia utente.Scegliere Sì.

Il metodo di test verrà rimosso dal file UIMap.uitest e non verrà più visualizzato nel riquadro delle azioni dell'interfaccia utente.Per modificare il file di test spostato, aprire il file UIMap.cs da Esplora soluzioni.

Nella barra degli strumenti Visual Studio, scegliere Salva.

Gli aggiornamenti al metodo di test vengono salvati nel file UIMap.Designer.

Attenzione
Una volta che è stato spostato il metodo, non è più possibile modificarlo tramite l'Editor test codificati dell'interfaccia utente.È necessario aggiungere il codice personalizzato e gestirlo utilizzando l'editor di codice.

Rinominare il metodo SimpleAppTest() in ModifiedSimpleAppTest().

Aggiungere al file l'istruzione using seguente:

using Microsoft.VisualStudio.TestTools.UITesting.WpfControls;

Aggiungere il metodo WaitForControlEnabled() seguente prima della riga di codice che causa il problema identificato precedentemente:

uICheckBoxCheckBox.WaitForControlEnabled();

// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;

Nel file CodedUITest1.cs individuare il metodo CodedUITestMethod e impostare come commento o rinominare il riferimento al metodo SimpleAppTest() originale, quindi sostituirlo con il nuovo metodo ModifiedSimpleAppTest():

[TestMethod]
        public void CodedUITestMethod1()
        {
            // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
            // For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
            //this.UIMap.SimpleAppTest();
            this.UIMap.ModifiedSimpleAppTest();
        }

Scegliere Compila soluzione dal menu Compila.
Fare clic con il pulsante destro del mouse sul metodo CodedUITestMethod e selezionare Esegui test.
Questa volta tutti i passaggi del test codificato dell'interfaccia utente vengono completati e nella finestra Risultati test viene visualizzato Superato.

Effettuare il refactoring di un controllo in SimpleWPFApp

Nel file MainWindow.xaml selezionare il pulsante nella finestra di progettazione.
Nella parte superiore della finestra Proprietà selezionare il valore button1 accanto a Button e impostare il valore su buttonA.
Scegliere Compila soluzione dal menu Compila.
Scegliere Finestre dal menu Test e scegliere Visualizzazione test.
Selezionare CodedUITestMethod1 nella colonna Nome test, quindi scegliere Esegui selezione sulla barra degli strumenti.

Il test non funziona perché il test codificato dell'interfaccia utente non è in grado di individuare il pulsante mappato in origine come button1 in UIMap.Il refactoring può influire in questo modo sui test codificati dell'interfaccia utente.
Nella finestra dei risultati del test fare clic con il pulsante destro del mouse sul test che non è stato completato e scegliere Visualizza dettagli risultati test.

Verrà visualizzato CodedUITestMethod1[Results].
Nella sezione Analisi dello stack errori scegliere il primo collegamento accanto a TestProject1.UIMpa.SimpleAppTest().

Verrà aperto il file UIMap.Designer.cs.Il punto di errore è evidenziato nel codice:
```
// Choose 'Start' button
Mouse.Click(uIStartButton, new Point(27, 10));
```
Si noti che nella riga di codice precedente di questa procedura viene utilizzato UiStartButton, che corrisponde al nome di UIMap prima del refactoring.

Per correggere il problema, è possibile aggiungere il controllo di cui è stato effettuato il refactoring a UIMap tramite il Generatore di test codificati dell'interfaccia utente.È possibile aggiornare il codice del test in modo che venga utilizzato il codice, come illustrato nella procedura seguente.

Mappare il controllo di cui è stato effettuato il refactoring e modificare ed eseguire di nuovo il test codificato dell'interfaccia utente

Nel file CodedUITest1.cs fare clic con il pulsante destro del mouse sul metodo CodedUITestMethod1(), scegliere Genera codice per test codificato dell'interfaccia utente, quindi scegliere Usa il generatore di test codificati dell'interfaccia utente.

Verrà visualizzato UIMap - Generatore di test codificati dell'interfaccia utente.
Utilizzando il collegamento del desktop creato in precedenza, eseguire l'applicazione SimpleWPFApp creata precedentemente.
In UIMap - Generatore di test codificati dell'interfaccia utente trascinare il selettore di precisione sul pulsante Start in SimpleWPFApp.

Il pulsante Start è racchiuso in una casella blu. L'elaborazione dei dati per il controllo selezionato tramite il Generatore di test codificati dell'interfaccia utente richiede alcuni secondi, quindi verranno visualizzate le proprietà dei controlli.Si noti che AutomationUId è denominato buttonA.
Nelle proprietà del controllo scegliere la freccia nell'angolo superiore sinistro per espandere la mappa del controllo dell'interfaccia utente.Si noti che UIStartButton1 è selezionato.
Sulla barra degli strumenti scegliere Aggiungi controllo alla mappa del controllo dell'interfaccia utente.

Lo stato nella parte inferiore della finestra consente di verificare l'azione visualizzando il messaggio Il controllo selezionato è stato aggiunto alla mappa del controllo dell'interfaccia utente.
In UIMap – Generatore di test codificati dell'interfaccia utente scegliere Genera codice.

Viene visualizzato Generatore di test codificati dell'interfaccia utente - Genera codice con una nota in cui è indicato che non è richiesto alcun nuovo metodo e che il codice sarà generato solo per le modifiche alla mappa del controllo dell'interfaccia utente.
Scegliere Genera.
Chiudere SimpleWPFApp.exe.
Chiudere UIMap - Generatore di test codificati dell'interfaccia utente.

UIMap - Generatore di test codificati dell'interfaccia utente richiede alcuni secondi per elaborare le modifiche alla mappa di controllo dell'interfaccia utente.
In Esplora soluzioni aprire il file UIMap.Designer.cs.
Nel file UIMap.Designer.cs, sotto il costruttore nella classe del codice generato UIMainWindow, espandere l'area Proprietà.Si noti che è stata aggiunta la proprietà public WpfButton UIStartButton1.

Nella proprietà UIStartButton1 espandere l'area Criteri di ricerca.Si noti che SearchProperties è impostato su "buttonA":

public WpfButton UIStartButton1
        {
            get
            {
                if ((this.mUIStartButton1 == null))
                {
                    this.mUIStartButton1 = new WpfButton(this);
                    #region Search Criteria
                    this.mUIStartButton1.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
                    this.mUIStartButton1.WindowTitles.Add("MainWindow");
                    #endregion
                }
                return this.mUIStartButton1;
            }
        }

A questo punto è possibile modificare il test codificato dell'interfaccia utente in modo che venga utilizzato il controllo appena mappato.Come evidenziato nella procedura precedente, se si desidera eseguire l'override di metodi o proprietà nel test codificato dell'interfaccia utente, è necessario effettuare questa operazione nel file UIMap.cs.

Nel file UIMap.cs aggiungere un costruttore e specificare la proprietà SearchProperties della proprietà UIStartButton per utilizzare la proprietà AutomationID con un valore "buttonA":
```
public UIMap()
        {
            this.UIMainWindowWindow.UIStartButton.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
        }
```
Scegliere Compila soluzione dal menu Compila.
In Visualizzazione test selezionare CodedUITestMethod1 nella colonna Nome test, quindi sulla barra degli strumenti fare clic su Esegui selezione.

Questa volta tutti i passaggi del test codificato dell'interfaccia utente vengono completati.Nella finestra Risultati test viene visualizzato Superato.