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

Articolo
06/08/2015

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

Nel menu FILE scegliere Nuovo, quindi selezionare Progetto.

Verrà visualizzata la finestra di dialogo Nuovo progetto.
Nel riquadro Installato espandere Visual C#, quindi selezionare Windows Desktop.
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à Name da <No Name> a button1.Modificare quindi il valore della proprietà Content da Button a Start.
Selezionare il controllo ProgressBar.Nella finestra Proprietà modificare il valore della proprietà Name da <No Name> a progressBar1.Modificare quindi il valore della proprietà Maximum da 100 a 10000.
Selezionare il controllo Checkbox.Nella finestra Proprietà modificare il valore della proprietà Name da <No Name> a checkBox1, quindi deselezionare la proprietà IsEnabled.
Fare doppio clic sul pulsante per aggiungere un gestore eventi Click.

MainWindow.xmal.cs viene visualizzato nell'Editor di codice con il cursore nel nuovo metodo button1_Click.

Nella parte superiore della classe MainWindow aggiungere un delegato,che verrà usato per l'indicatore di stato.Per aggiungere il delegato, aggiungere il codice seguente:

public partial class MainWindow : Window
{
        private delegate void ProgressBarDelegate(System.Windows.DependencyProperty dp, Object value);        

    public MainWindow()
    {

        InitializeComponent();
    }

Nel metodo button1_Click aggiungere il codice seguente:

private void button1_Click(object sender, RoutedEventArgs e)
{
    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;
}

Salvare il file.

Verificare che l'applicazione WPF venga eseguita correttamente

Dal menu DEBUG scegliere Avvia debug o premere F5.
Si noti che il controllo CheckBox è disabilitato.Scegliere Avvia.

L'indicatore di stato dovrebbe essere completato al 100% in pochi secondi.
È ora possibile selezionare il controllo CheckBox.
Chiudere SimpleWPFApp.

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

Individuare l'applicazione SimpleWPFApp creata precedentemente.Per impostazione predefinita, l'applicazione è salvata in C:\Users\<nomeutente>\Documenti\Visual Studio 2013\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.

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 di test codificato dell'interfaccia utente denominato CodedUITestProject1 viene 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.

La finestra UIMap – Generatore di test codificato dell'interfaccia utente è visualizzata e Visual Studio è ridotto a icona.

Per altre informazioni sulle opzioni disponibili nella finestra di dialogo, vedere Creazione di test codificati dell'interfaccia utente.

Scegliere Avvia registrazione in UIMap - Generatore di test codificati dell'interfaccia utente.

Avviare la registrazione

Se necessario, è possibile sospendere la registrazione, ad esempio per controllare la posta elettronica in arrivo.

Sospendere la registrazione

Attenzione
Tutte le azioni eseguite sul desktop verranno registrate.Sospendere la registrazione se si eseguono azioni che possono comportare l'inserimento di dati sensibili nella registrazione.

Avviare SimpleWPFApp usando il collegamento sul desktop.

Anche in questo caso, si noti che il controllo CheckBox è disabilitato.
In SimpleWPFApp, scegliere Avvia.

L'indicatore di stato dovrebbe essere completato al 100% in pochi secondi.
Selezionare il controllo CheckBox, ora abilitato.
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.
Salvare il progetto.

Eseguire il test codificato dell'interfaccia utente

Dal menuTEST scegliere Finestre, quindi scegliere Esplora test.
Dal menu COMPILA scegliere Compila soluzione.
Nel file CodedUITest1.cs individuare il metodo CodedUITestMethod, fare clic con il pulsante destro del mouse e scegliere Esegui test oppure eseguire i test da Esplora 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 è 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 è 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 usando i diversi metodi UITestControl.WaitForControlXXX() disponibili per il test codificato dell'interfaccia utente.Nella procedura seguente verrà descritto l'uso del metodo WaitForControlEnabled() per correggere il problema che ha impedito il corretto funzionamento di questo test.Per altre 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 Esplora test selezionare il test non riuscito, quindi nella sezione StackTrace scegliere il primo collegamento a 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 usando 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 usando 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 usato 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 usando 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 usato 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, individuare 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 Azioni dell'interfaccia utente selezionare il metodo di test (SimpleAppTest) da spostare nel file di UIMap.cs o UIMap.vb per facilitare la funzionalità di codice personalizzato che non sarà 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 usando l'Editor 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 di 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 usando 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 sono completati e nella finestra Esplora test è 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à modificare il valore della proprietà Name da button1 a buttonA.
Scegliere Compila soluzione dal menu COMPILA.
In Esplora test eseguire CodedUITestMethod1.

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 sezione StackTrace della finestra Esplora test scegliere il primo collegamento accanto a UIMpa.ModifiedSimpleAppTest().

Sarà aperto il file UIMap.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 usato 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 usato 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.
Usando 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 individuare la proprietà UIStartButton1.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 usato 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 usare la proprietà AutomationID con un valore "buttonA":
```
public UIMap()
        {
            this.UIMainWindowWindow.UIStartButton.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
        }
```
Scegliere Compila soluzione dal menu COMPILA.
In Esplora test eseguire CodedUITestMethod1.

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