Exemplarische Vorgehensweise: Erstellen, Bearbeiten und Verwalten von Tests der codierten UI

Artikel
07/20/2011

In dieser exemplarischen Vorgehensweise erstellen Sie eine einfache Windows Presentation Foundation (WPF)-Anwendung, um das Erstellen, Bearbeiten und Verwalten eines Tests der codierten UI zu veranschaulichen. Die exemplarische Vorgehensweise umfasst Lösungen zum Korrigieren von Tests, die aufgrund verschiedener Probleme mit den Zeitabläufen und der Steuerelementumgestaltung nicht mehr funktionieren.

Vorbereitungsmaßnahmen

Für diese exemplarische Vorgehensweise benötigen Sie:

Visual Studio 2010 Ultimate oder Visual Studio 2010 Premium.

Erstellen einer einfachen WPF-Anwendung

Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

Das Dialogfeld Neues Projekt wird angezeigt.
Erweitern Sie im Bereich Installierte Vorlagen den Eintrag Visual C#, und wählen Sie Windows aus.
Stellen Sie sicher, dass die Dropdownliste für das Zielframework über dem mittleren Bereich auf .NET Framework 4 festgelegt ist.
Wählen Sie im mittleren Bereich die Vorlage WPF-Anwendung aus.
Geben Sie im Textfeld Name den Namen "SimpleWPFApp" ein.
Wählen Sie einen Ordner zum Speichern des Projekts aus. Geben Sie im Textfeld Speicherort den Namen des Ordners ein.
Klicken Sie auf OK.

Der WPF-Designer für Visual Studio wird geöffnet und zeigt das MainWindow-Element des Projekts an.
Öffnen Sie die Toolbox, sofern sie nicht geöffnet ist. Klicken Sie auf das Menü Ansicht und dann auf Toolbox.
Ziehen Sie unter dem Abschnitt Alle WPF-Steuerelemente ein Button-, ein CheckBox- und ein ProgressBar-Steuerelement auf das MainWindow-Element in der Entwurfsoberfläche.
Wählen Sie das Button-Steuerelement aus. Ändern Sie im Eigenschaftenfenster den Wert für die Eigenschaft Content von Button in "Start".
Wählen Sie das ProgressBar-Steuerelement aus. Ändern Sie im Eigenschaftenfenster den Wert für die Eigenschaft Maximum von 100 in 1000.
Wählen Sie das Checkbox-Steuerelement aus. Löschen Sie im Eigenschaftenfenster die IsEnabled-Eigenschaft.
Doppelklicken Sie auf das Schaltflächen-Steuerelement, um ein Click-Ereignis hinzuzufügen.

"MainWindow.xmal.cs" wird im Code-Editor angezeigt, und der Cursor ist im neuen button1_Click-Ereignis positioniert.
Fügen Sie am oberen Rand der MainWindow-Klasse einen Delegaten hinzu. Der Delegat wird für die Statusanzeige verwendet. Fügen Sie den Delegaten mit dem folgenden Code hinzu:
```
        private delegate void ProgressBarDelegate(
        System.Windows.DependencyProperty dp, Object value);
```

Fügen Sie folgenden Code in die button1_Click-Methode ein:

            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;

Überprüfen der ordnungsgemäßen Ausführung der WPF-Anwendung

Wählen Sie im Menü Debuggen die Option Debugging starten aus, oder drücken Sie F5.
Klicken Sie auf Start.

Die Statusanzeige sollte innerhalb einiger Sekunden vollständig abgeschlossen sein. Das Kontrollkästchen-Steuerelement ist jetzt aktiviert.
Schließen Sie "SimpleWPFApp".

Erstellen und Ausführen eines Tests der codierten UI für "SimpleWPFApp"

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe, klicken Sie auf Hinzufügen, und wählen Sie anschließend Neues Projekt aus.

Das Dialogfeld Neues Projekt hinzufügen wird angezeigt.
Erweitern Sie im Bereich Installierte Vorlagen den Eintrag Visual C#, und wählen Sie Test aus.
Wählen Sie im mittleren Bereich die Vorlage Testprojekt aus.
Klicken Sie auf OK.

Im Projektmappen-Explorer wird der Projektmappe das neue Testprojekt TestProject1 hinzugefügt, und die Datei "UnitTest1.cs" wird im Code-Editor angezeigt. Sie können die Datei "UnitTest1.cs" schließen, da sie in dieser exemplarischen Vorgehensweise nicht verwendet wird.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf TestProject1, klicken Sie auf Hinzufügen, und wählen Sie anschließend Test der codierten UI aus.

Das Dialogfeld Code für den Test der codierten UI generieren wird angezeigt.
Wählen Sie die Option Aktionen aufzeichnen, UI-Zuordnung bearbeiten oder Assertionen hinzufügen aus, und klicken Sie auf OK.

Der UIMap – Test-Generator für codierte UI wird angezeigt.

Weitere Informationen zu den Optionen in diesem Dialogfeld finden Sie unter Gewusst wie: Erstellen eines Tests für codierte UI.
Suchen Sie die zuvor erstellte Anwendung "SimpleWPFApp", und führen Sie diese aus. Standardmäßig befindet sich die Anwendung unter folgendem Pfad: C:\Users\<Benutzername>\Documents\Visual Studio 2010\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe.
Erstellen Sie eine Desktopverknüpfung zur SimpleWPFApp-Anwendung. Klicken Sie mit der rechten Maustaste auf "SimpleWPFApp.exe", und wählen Sie Kopieren aus. Klicken Sie auf dem Desktop mit der rechten Maustaste, und wählen Sie die Option Verknüpfung einfügen aus.

Tipp

Über eine Verknüpfung zur Anwendung können Tests der codierten UI für die Anwendung leichter hinzugefügt und geändert werden, da die Anwendung schnell gestartet werden kann. Sie müssen nicht zur Anwendung navigieren. Sie müssen die Anwendung zu einem späteren Zeitpunkt in dieser exemplarischen Vorgehensweise erneut ausführen.
Klicken Sie auf dem UIMap – Test-Generator für codierte UI auf Aufzeichnung starten. Der Test-Generator für codierte UI ist nach wenigen Sekunden bereit.
Führen Sie "SimpleWPFApp.exe" über die Desktopverknüpfung aus.
Klicken Sie in "SimpleWPFApp" auf Start.

Die Statusanzeige sollte innerhalb einiger Sekunden vollständig abgeschlossen sein. Das Kontrollkästchen-Steuerelement ist jetzt aktiviert.
Wählen Sie das Feld für das CheckBox-Steuerelement aus.
Schließen Sie die SimpleWPFApp-Anwendung.
Klicken Sie auf dem UIMap – Test-Generator für codierte UI auf Code generieren.
Geben Sie im Feld "Methodenname" den Namen "SimpleAppTest" ein, und klicken Sie auf Hinzufügen und generieren. Der Test der codierten UI wird nach wenigen Sekunden angezeigt und der Projektmappe hinzugefügt.
Schließen Sie den UIMap – Test-Generator für codierte UI.

Die Datei "CodedUITest1.cs" wird im Code-Editor geöffnet.

Ausführen des Tests der codierten UI

Suchen Sie in der Datei "CodedUITest1.cs" die CodedUITestMethod-Methode, klicken Sie mit der rechten Maustaste, und wählen Sie Tests ausführen aus.

Während der Test der codierten UI ausgeführt wird, wird "SimpleWPFApp" angezeigt. Die Schritte, die Sie in der vorherigen Prozedur ausgeführt haben, werden ausgeführt. Beim Versuch, das Kontrollkästchen für das CheckBox-Steuerelement zu aktivieren, wird jedoch im Fenster "Testergebnisse" angezeigt, dass der Test fehlgeschlagen ist. Dies liegt daran, dass beim Test versucht wird, das Kontrollkästchen zu aktivieren, obwohl das CheckBox-Steuerelement deaktiviert ist, bis die Statusanzeige 100 Prozent abgeschlossen ist. Sie können dieses und ähnliche Probleme mit den UITestControl.WaitForControlXXX()-Methoden korrigieren, die für Tests der codierten UI verfügbar sind. Bei der nächsten Prozedur wird veranschaulicht, wie Sie das Problem, das bei diesem Test zu einem Fehler geführt hat, mit der WaitForControlEnabled()-Methode korrigieren können. Weitere Informationen finden Sie unter Making Coded UI Tests Wait For Specific Events During Playback.

Bearbeiten und erneutes Ausführen des Tests der codierten UI

Klicken Sie im Fenster "Testergebnisse" mit der rechten Maustaste auf den fehlgeschlagenen Test, und wählen Sie Testergebnisdetails anzeigen aus.

"CodedUITestMethod1[Results]" wird angezeigt.
Klicken Sie im Abschnitt Fehlerstapelüberwachung auf den ersten Link neben TestProject1.UIMap.SimpleAppTest().

Die Datei "UIMap.Designer.cs" wird geöffnet. Die fehlerhafte Stelle wird im Code hervorgehoben:
```
// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;
```
Um dieses Problem zu korrigieren, können Sie mithilfe der WaitForControlEnabled()-Methode festlegen, dass beim Test der codierten UI gewartet werden soll, bis das CheckBox-Steuerelement aktiviert ist, bevor mit dieser Zeile fortgefahren wird.

Warnung

Ändern Sie die Datei "UIMap.Designer.cs" nicht. Alle Codeänderungen, die Sie an der Datei "UIMapDesigner.cs" vornehmen, werden jedes Mal überschrieben, wenn Sie Code mit dem UIMap – Test-Generator für codierte UI generieren. Wenn Sie eine aufgezeichnete Methode ändern müssen, müssen Sie sie in die UIMap.cs-Datei kopieren und umbenennen. Die Datei "UIMap.cs" kann verwendet werden, um Methoden und Eigenschaften in der Datei "UIMapDesigner.cs" zu überschreiben. Sie müssen den Verweis auf die ursprüngliche Methode in der Datei "Coded UITest.cs" entfernen und ihn durch den umbenannten Methodennamen ersetzen.
Wählen Sie in der Datei "UIMapDesinger.cs" den ganzen Code für die ganze SimpleAppTest-Methode aus, und kopieren Sie ihn.
Öffnen Sie im Projektmappen-Explorer die Datei "UIMap.cs".
Fügen Sie den Code für die SimpleAppTest-Methode in die partielle UIMap-Klasse ein.
Benennen Sie die Methode von SimpleAppTest() in ModifiedSimpleAppTest() um.

Fügen Sie der Datei die folgende using-Anweisung hinzu:

using Microsoft.VisualStudio.TestTools.UITesting.WpfControls;

Fügen Sie die folgende WaitForControlEnabled()-Methode vor der Codezeile ein, die zuvor als Fehlerquelle ermittelt wurde:

uICheckBoxCheckBox.WaitForControlEnabled();

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

Suchen Sie in der Datei "CodedUITest1.cs" die CodedUITestMethod-Methode, und kommentieren Sie den Verweis auf die ursprüngliche SimpleAppTest()-Methode aus, oder benennen Sie ihn um. Ersetzen Sie ihn dann durch die neue ModifiedSimpleAppTest()-Methode:

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

Klicken Sie im Menü Erstellen auf Projektmappe erstellen.
Klicken Sie mit der rechten Maustaste auf die CodedUITestMethod-Methode, und wählen Sie Tests ausführen aus.
Dieses Mal führt der Test der codierten UI alle Schritte des Tests erfolgreich durch, und im Fenster "Testergebnisse" wird Erfolgreich angezeigt.

Umgestalten eines Steuerelements in "SimpleWPFApp"

Wählen Sie in der Datei "MainWindow.xaml" im Designer das Schaltflächen-Steuerelement aus.
Wählen Sie am oberen Rand des Eigenschaftenfensters den Wert button1 neben Button aus, und ändern Sie den Wert in "buttonA".
Klicken Sie im Menü Erstellen auf Projektmappe erstellen.
Wählen Sie im Menü Test die Option Fenster aus, und klicken Sie dann auf Testansicht.
Wählen Sie in "Testansicht" unter der Spalte Testname den Eintrag CodedUITestMethod1 aus, und klicken Sie dann auf der Symbolleiste auf Auswahl ausführen.

Der Test schlägt fehl, da der Test der codierten UI das Schaltflächen-Steuerelement, das ursprünglich im UIMap als "button1" zugeordnet wurde, nicht finden kann. Auf diese Weise kann sich die Umgestaltung auf Tests der codierten UI auswirken.
Klicken Sie im Fenster "Testergebnisse" mit der rechten Maustaste auf den fehlgeschlagenen Test, und wählen Sie Testergebnisdetails anzeigen aus.

"CodedUITestMethod1[Results]" wird angezeigt.
Klicken Sie im Abschnitt Fehlerstapelüberwachung auf den ersten Link neben TestProject1.UIMap.SimpleAppTest().

Die Datei "UIMap.Designer.cs" wird geöffnet. Die fehlerhafte Stelle wird im Code hervorgehoben:
```
// Click 'Start' button
Mouse.Click(uIStartButton, new Point(27, 10));
```
Beachten Sie, dass in der Codezeile dieser Prozedur zuvor UiStartButton verwendet wurde. Dies war der UIMap-Name vor der Umgestaltung.

Zur Behebung des Problems können Sie dem UIMap das umgestaltete Steuerelement mit dem Test-Generator für codierte UI hinzufügen. Sie können den Code des Tests wie in der nächsten Prozedur veranschaulicht aktualisieren.

Zuordnen des umgestalteten Steuerelements und Bearbeiten und erneutes Ausführen des Tests der codierten UI

Klicken Sie in der Datei "CodedUITest1.cs" in der CodedUITestMethod1()-Methode mit der rechten Maustaste, wählen Sie Code für den Test der codierten UI generieren aus, und klicken Sie dann auf Test-Generator für codierte UI verwenden.

Der UIMap – Test-Generator für codierte UI wird angezeigt.
Führen Sie mithilfe der zuvor erstellten Desktopverknüpfung die Anwendung "SimpleWPFApp" aus, die Sie ebenfalls zuvor erstellt haben.
Ziehen Sie auf dem UIMap – Test-Generator für codierte UI das Fadenkreuztool auf die Schaltfläche Start in "SimpleWPFApp".

Die Schaltfläche Start ist mit einem blauen Rahmen versehen, und der Test-Generator für codierte UI braucht einige Sekunden, um die Daten für das ausgewählte Steuerelement zu verarbeiten. Dann werden die Steuerelementeigenschaften angezeigt. Beachten Sie, dass AutomationUId die Bezeichnung buttonA trägt.
Klicken Sie in den Eigenschaften für das Steuerelement auf den Pfeil in der linken oberen Ecke, um die UI-Steuerelementzuordnung zu erweitern. Beachten Sie, dass UIStartButton1 ausgewählt ist.
Klicken Sie auf der Symbolleiste auf Steuerelement zu UI-Steuerelementzuordnung hinzufügen.

Durch den Status am unteren Rand des Fensters wird die Aktion bestätigt, indem Das ausgewählte Steuerelement wurde der UI-Steuerelementzuordnung hinzugefügt angezeigt wird.
Klicken Sie auf dem UIMap – Test-Generator für codierte UI auf Code generieren.

Das Dialogfeld "Test-Generator für codierte UI – Code generieren" wird mit einem Hinweis angezeigt, dass keine neue Methode erforderlich ist und dass Code nur für die Änderungen an der UI-Steuerelementzuordnung generiert wird.
Klicken Sie auf Generieren.
Schließen Sie "SimpleWPFApp.exe".
Schließen Sie "UIMap – Test-Generator für codierte UI".

"UIMap – Test-Generator für codierte UI" benötigt einige Sekunden für die Verarbeitung der Änderungen an den UI-Steuerelementzuordnungen.
Öffnen Sie im Projektmappen-Explorer die Datei "UIMap.Designer.cs".
Erweitern Sie in der Datei "UIMap.Designer.cs" unter dem Konstruktor in der generierten Codeklasse UIMainWindow den Bereich Eigenschaften. Beachten Sie, dass die public WpfButton UIStartButton1-Eigenschaft hinzugefügt wurde.

Erweitern Sie in der UIStartButton1-Eigenschaft den Suchkriterienbereich. Beachten Sie, dass SearchProperties auf "buttonA" festgelegt ist:

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

Jetzt können Sie den Test der codierten UI ändern, um das neu zugeordnete Steuerelement zu verwenden. Wie in der vorherigen Prozedur angemerkt wurde, können Sie Methoden oder Eigenschaften im Test der codierten UI nur in der Datei "UIMap.cs" überschreiben.

Fügen Sie in der Datei "UIMap.cs" einen Konstruktor hinzu, und geben Sie die SearchProperties-Eigenschaft der UIStartButton-Eigenschaft an, um die AutomationID-Eigenschaft mit dem Wert "buttonA": zu verwenden.
```
public UIMap()
        {
            this.UIMainWindowWindow.UIStartButton.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
        }
```
Klicken Sie im Menü Erstellen auf Projektmappe erstellen.
Wählen Sie in "Testansicht" unter der Spalte Testname den Eintrag CodedUITestMethod1 aus. Klicken Sie dann auf der Symbolleiste auf Auswahl ausführen.

Dieses Mal führt der Test der codierten UI alle Schritte im Test erfolgreich aus. Im Fenster "Testergebnisse" wird der Status Erfolgreich angezeigt.

Siehe auch

Freigeben über