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

Articolo
08/11/2011

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 2010 Ultimate o Visual Studio 2010 Premium.

Creare una semplice applicazione WPF

Scegliere Nuovo dal menu File, quindi scegliere Progetto.

Verrà visualizzata la finestra di dialogo Nuovo progetto.
Nel riquadro Modelli installati 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.
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.
Fare clic su OK.

Verrà aperto WPF Designer per Visual Studio e la finestra principale del progetto.
Aprire la casella degli strumenti, se non è già aperta. Scegliere Casella degli strumenti dal menu Visualizza.
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 Click.

MainWindow.xmal.cs viene visualizzato nell'Editor di codice con il cursore nel nuovo evento button1_Click.
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_Click 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.
Fare clic 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 Modelli installati espandere Visual C#, quindi selezionare Test.
Nel riquadro centrale selezionare il modello Progetto di test.
Fare clic su OK.

In Esplora soluzioni il nuovo progetto di test denominato TestProject1 viene aggiunto alla soluzione e il file UnitTest1.cs viene visualizzato nell'Editor di codice. È possibile chiudere il file UnitTest1.cs in quanto non viene utilizzato in questa procedura dettagliata.
In Esplora soluzioni fare clic con il pulsante destro del mouse su TestProject1, scegliere Aggiungi, quindi selezionare Test codificato dell'interfaccia utente.

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 fare clic su OK.

Verrà visualizzato UIMap - Generatore di test codificati dell'interfaccia utente.

Per ulteriori informazioni sulle opzioni di questa finestra di dialogo, vedere Procedura: creare un test codificato 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 2010\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.

Fare clic su 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 fare clic su 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 fare clic su Genera codice.
In Nome metodo digitare SimpleAppTest e fare clic su 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 fare clic sul 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.

Nel file UIMapDesinger.cs selezionare tutto il codice del metodo SimpleAppTest e copiarlo.
In Esplora soluzioni aprire il file UIMap.cs.
Incollare il codice del metodo SimpleAppTest nella classe parziale UIMap.
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 fare clic su Visualizzazione test.
In Visualizzazione test selezionare CodedUITestMethod1 nella colonna Nome test, quindi fare clic su 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 fare clic sul primo collegamento accanto a TestProject1.UIMpa.SimpleAppTest().

Verrà aperto il file UIMap.Designer.cs. Il punto di errore è evidenziato nel codice:
```
// Click '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 fare clic su 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 fare clic sulla freccia nell'angolo superiore sinistro per espandere la mappa del controllo dell'interfaccia utente. Si noti che UIStartButton1 è selezionato.
Sulla barra degli strumenti fare clic su 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 fare clic su 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.
Fare clic su Generate.
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.

Vedere anche

Condividi tramite