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

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 Ultimate oder Visual Studio 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 Installiert den Eintrag Visual C#, und wählen Sie Windows Desktop aus.
Stellen Sie sicher, dass die Dropdownliste für das Zielframework über dem mittleren Bereich auf .NET Framework 4.5 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.Wählen Sie das Menü ANSICHT und dann Werkzeugkasten aus.
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 Name von <Ohne Namen> in "Button1".Ändern Sie 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 Name von <Ohne Namen> in "progressBar1".Ändern Sie dann den Wert für die Eigenschaft Maximum von 100 auf 10000.
Wählen Sie das Checkbox-Steuerelement aus.Ändern Sie im Eigenschaftenfenster den Wert für die Eigenschaft Name von <Ohne Namen> in "Kontrollkästchen1" und löschen Sie die Eigenschaft IsEnabled.
Doppelklicken Sie auf das Schaltflächen-Steuerelement, um einen Click-Ereignishandler hinzuzufügen.

"MainWindow.xmal.cs" wird im Code-Editor angezeigt, und der Cursor ist in der neuen button1_Click-Methode 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:

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

    public MainWindow()
    {

        InitializeComponent();
    }

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

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

Speichern Sie die Datei.

Ü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.
Beachten Sie, dass das Steuerelement Kontrollkästchen deaktiviert ist.Wählen Sie Start aus.

Die Statusanzeige sollte innerhalb einiger Sekunden vollständig abgeschlossen sein.
Sie können jetzt das Steuerelement Kontrollkästchen auswählen.
Schließen Sie "SimpleWPFApp".

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

Suchen Sie die zuvor erstellte Anwendung "SimpleWPFApp".Standardmäßig befindet sich die Anwendung unter folgendem Pfad: C:\<Benutzer>\<Benutzername>\Dokumente\Visual Studio 2013\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.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe, und wählen Sie Hinzufügen und anschließend Neues Projekt aus.

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

In Projektmappen-Explorer wird das neue Coded UI-Testprojekt mit der Bezeichnung CodedUITestProject1 der Lösung hinzugefügt.

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, und das Visual Studio-Fenster wird minimiert.

Weitere Informationen zu den Optionen im Dialogfeld finden Sie unter Erstellen von Coded UI-Tests.

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.

Klicken Sie auf dem "UIMap – Test-Generator für codierte UI" auf Aufzeichnung starten.

Starten der Aufzeichnung

Sie können die Aufzeichnung bei Bedarf anhalten, etwa wenn Sie eine eingehende E-Mail lesen möchten.

Aufzeichnung anhalten

Vorsicht
Alle auf dem Desktop ausgeführten Aktionen werden aufgezeichnet.Halten Sie die Aufzeichnung an, wenn Sie Aktionen ausführen, bei denen sensible Daten in die Aufzeichnung gelangen könnten.

Starten Sie SimpleWPFApp mithilfe der Desktopverknüpfung.

Beachten Sie wie bereits zuvor, dass das Steuerelement Kontrollkästchen deaktiviert ist.
Klicken Sie in SimpleWPFApp auf Start.

Die Statusanzeige sollte innerhalb einiger Sekunden vollständig abgeschlossen sein.
Aktivieren Sie das Kontrollkästchen-Steuerelement, das jetzt aktiviert ist.
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.
Speichern Sie das Projekt.

Ausführen des Tests der codierten UI

Wählen Sie im Menü TEST den Punkt Windows und wählen Sie dann Test-Explorer.
Wählen Sie im Menü ERSTELLEN die Option Projektmappe erstellen aus.
Finden Sie in der Datei CodedUITest1.cs die Methode CodedUITestMethod und klicken Sie mit der rechten Maustaste und wählen Sie Test ausführen oder führen Sie den Test mit Test-Explorer 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 Kontrollkästchen-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 Kontrollkästchen-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

Wählen Sie im Test-Explorer den fehlgeschlagenen Test aus und im Abschnitt StackTrace den ersten Link zu 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.

Vorsicht
Ä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.

Ä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.

Klicken Sie in Projektmappen-Explorer im Coded UI-Testprojekt auf UIMap.uitest.
Öffnen Sie das Kontextmenü UIMap.uitest, und wählen Sie Öffnen aus.

Der Test der codierten UI wird im Editor für den Test der codierten UI angezeigt.Sie können nun den Test der codierten UI anzeigen und bearbeiten.
Wählen Sie im Bereich UI-Aktion die Testmethode(SimpleAppTest) aus, die Sie in die Datei "UIMap.cs" oder "UIMap.vb" verschieben möchten. Dadurch vereinfachen Sie die Funktion für benutzerdefinierten Code, die beim erneuten Kompilieren des Tests nicht überschrieben wird.
Klicken Sie auf der Symbolleiste des Editors für Coded UI-Tests auf die Schaltfläche Code verschieben.
Ein Microsoft Visual Studio-Dialogfeld wird angezeigt.Sie werden darauf hingewiesen, dass die Methode aus der UIMap.uitest-Datei in die Datei "UIMap.cs" verschoben wird, und dass die Methode mit dem Editor für Coded UI-Tests nicht mehr bearbeitet werden kann.Klicken Sie auf Ja.

Die Testmethode wird aus der UIMap.uitest-Datei entfernt und nicht mehr im Bereich der UI-Aktionen angezeigt.Öffnen Sie zum Bearbeiten der verschobenen Testdatei die Datei "UIMap.cs" mit Projektmappen-Explorer.

Klicken Sie auf der Visual Studio-Symbolleiste auf Speichern.

Die Aktualisierungen der Testmethode werden in der UIMap.Designer-Datei gespeichert.

Vorsicht
Nach dem Verschieben der Methode kann sie mit dem Editor für Tests der codierten UI nicht mehr bearbeitet werden.Sie müssen den benutzerdefinierten Code hinzufügen und ihn mit dem Code-Editor verwalten.

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

Wählen Sie im Menü ERSTELLEN die Option 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 "Test-Explorer" wird Erfolgreich angezeigt.

Umgestalten eines Steuerelements in "SimpleWPFApp"

Wählen Sie in der Datei "MainWindow.xaml" im Designer das Schaltflächen-Steuerelement aus.
Ändern Sie oben im Fenster "Eigenschaften" den Wert der Eigenschaft Name von "Button1" auf "ButtonA".
Wählen Sie im Menü ERSTELLEN die Option Projektmappe erstellen.
Führen Sie CodedUITestMethod1 in Test-Explorer aus.

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.
Wählen Sie im Fenster "Test-Explorer" im Abschnitt StackTrace den ersten Link zu UIMap.SimpleAppTest() aus.

Die Datei "UIMap.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 Coded UI-Test generieren aus, und klicken Sie dann auf Coded UI-Test-Generator 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.
Wählen Sie Generieren aus.
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".

Suchen Sie in der Datei "UIMap.Designer.cs" die Eigenschaft "UIStartButton1".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";
        }
```
Wählen Sie im Menü ERSTELLEN die Option Projektmappe erstellen.
Führen Sie CodedUITestMethod1 in Test-Explorer aus.

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