Exemplarische Vorgehensweise: Wiedergeben von Tests der codierten UI mit Firefox

Artikel
07/20/2011

Sie können automatisierte Tests der Benutzeroberfläche erstellen, die auch als Tests der codierten UI bezeichnet werden. Bei diesen Vorgängen finden funktionale Tests der Benutzeroberfläche und eine Validierung von UI-Steuerelementen statt. Mit Tests der codierten UI können Sie die Funktionen der Benutzeroberfläche mithilfe von Microsoft Visual Studio 2010 Feature Pack 2 testen. Sie können UI-Aktionen auf einer Website oder in einer webbasierten Anwendung aufzeichnen und Tests der codierten UI erstellen. Mit Windows Internet Explorer können Sie die Aktionen aufzeichnen und anschließend die Tests mit dem Browser Mozilla Firefox wiedergeben.

Weitere Informationen finden Sie unter zu Tests der codierten UI finden Sie unter Testen der Benutzeroberfläche mit automatisierten UI-Tests.

Warnung

Wenn Sie nach der Installation von Microsoft Visual Studio 2010 Feature Pack 2 das Testpaket für Mozilla Firefox verwenden möchten, müssen Sie die Testhilfserweiterung für Mozilla Firefox installieren und konfigurieren. Weitere Informationen finden Sie unter Gewusst wie: Installieren der Testhilfserweiterung für Mozilla Firefox.

Warnung

Sie können den Browser Firefox nur für die Wiedergabe der Tests der codierten UI verwenden. Die Aufzeichnung von Tests der codierten UI auf Websites und in Webanwendungen mit dem Browser Firefox wird nicht unterstützt.

Vorbereitungsmaßnahmen

Für diese exemplarische Vorgehensweise benötigen Sie:

Visual Studio 2010 Ultimate, Visual Studio 2010 Premium oder Test Professional 2010.
Version 3.5 oder 3.6 des Webbrowsers Mozilla Firefox.
Stellen Sie sicher, dass Sie Microsoft Visual Studio 2010 Feature Pack 2 und die Testhilfserweiterung für Mozilla Firefox installiert haben. Informationen zur Installation sind in der Einführung enthalten.

Erstellen einer Webanwendung

So erstellen Sie die Webanwendung

Klicken Sie in Visual Studio 2010 im Menü Datei auf Neu und dann auf Projekt.

Das Dialogfeld Neues Projekt wird angezeigt.
Erweitern Sie unter Installierte Vorlagen die gewünschte Programmiersprache, und klicken Sie dann auf Web.
Wählen Sie in der Liste mit den Webprojekttypen den Eintrag Leere ASP.NET-Anwendung aus.

Tipp

In dieser exemplarischen Vorgehensweise werden Sie sehr wenig Code schreiben.
Geben Sie im Feld Name den Namen ColorWebApp ein.
Geben Sie im Feld Speicherort den Ordner an, in dem Sie die Webanwendung erstellen möchten.
Aktivieren Sie Projektmappenverzeichnis erstellen.
Klicken Sie auf OK.
Vergewissern Sie sich in Projektmappen-Explorer, dass das neue Projekt "ColorWebApp" ausgewählt ist.
Klicken Sie im Menü Projekt auf Neues Element hinzufügen.

Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie in der Liste mit den Elementen die Option Web Form aus.
Geben Sie im Textfeld Name den Namen Default.aspx ein, und klicken Sie auf Hinzufügen.

Hinzufügen von Steuerelementen zur Webanwendung

So fügen Sie der Webanwendung Steuerelemente hinzu

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei Default.aspx, und wählen Sie Ansicht-Designer aus.

Eine leere Seite wird angezeigt.
Wenn die Toolbox nicht angezeigt wird, klicken Sie auf Ansicht und dann auf Toolbox.
Ziehen Sie aus der Gruppe Standard eine RadioButtonList auf die Seite.

Der Entwurfsoberfläche wird ein RadioButtonList-Steuerelement hinzugefügt.
Klicken Sie im Aktionstagbereich RadioButtonList-Aufgaben auf den Link Elemente bearbeiten.

Ein ListItem-Auflistungs-Editor wird angezeigt.

Tipp

Sie können den ListItem-Auflistungs-Editor auch anzeigen, indem Sie die Auflistung Elemente im Eigenschaftenfenster bearbeiten.
Klicken Sie auf Hinzufügen, um ein neues Element hinzuzufügen.
Unter ListItem-Eigenschaften:
1. Ändern Sie die Text-Eigenschaft in Red.
2. Legen Sie die Selected-Eigenschaft auf True fest.
Klicken Sie auf Hinzufügen, um ein weiteres Element hinzuzufügen.
Ändern Sie unter ListItem-Eigenschaften die Text-Eigenschaft in Blue.
Klicken Sie auf OK, um den ListItem-Auflistungs-Editor zu schließen.
Ziehen Sie ein Button auf die Seite. Ändern Sie im Eigenschaftenfenster die Text Eigenschaft in Submit.
Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen von Seiten zur Webanwendung

So fügen Sie der Webanwendung Seiten hinzu

Klicken Sie im Menü Projekt auf Neues Element hinzufügen.
Wählen Sie im Dialogfeld Neues Element hinzufügen in der Vorlagenliste Web Form aus. Geben Sie im Feld Name den Namen Red.aspx ein, und klicken Sie dann auf Hinzufügen.
Klicken Sie im unteren Bereich des Dokumentfensters auf die Registerkarte Entwurf, um zur Entwurfsansicht zu wechseln.
Ziehen Sie ein Label auf die Seite. Legen Sie im Eigenschaftenfenster die Text-Eigenschaft auf Red fest. Legen Sie für die ForeColor-Eigenschaft den Wert Red fest.
Klicken Sie im Menü Projekt auf Neues Element hinzufügen.
Klicken Sie im Dialogfeld Neues Element hinzufügen auf die Web Form-Vorlage, und nennen Sie diese Blue.aspx. Klicken Sie auf Hinzufügen.
Klicken Sie im unteren Bereich des Dokumentfensters auf die Registerkarte Entwurf, um zur Entwurfsansicht zu wechseln.
Ziehen Sie ein Label auf die Seite. Legen Sie im Eigenschaftenfenster die Text-Eigenschaft auf Blue fest. Legen Sie die ForeColor-Eigenschaft auf Blue fest.
Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen von Funktionalität zur Webanwendung

So fügen Sie der Webanwendung Funktionalität hinzu

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei Default.aspx, und klicken dann Sie auf Ansicht-Designer.
Doppelklicken Sie auf die Schaltfläche Senden (Button). Visual Studio wechselt zum Seitencode und erstellt das Skelett eines Ereignishandlers für das Click-Ereignis des Button-Steuerelements.

Fügen Sie dem Ereignishandler folgenden Code hinzu:

if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

Klicken Sie im Menü Datei auf Alle speichern.

Überprüfen der ordnungsgemäßen Ausführung der Webanwendung

Warnung

Dieses Verfahren setzt voraus, dass Microsoft Internet Explorer als standardmäßiger Webbrowser festgelegt wurde.

So führen Sie die Webanwendung aus

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Default.aspx, und klicken Sie dann auf Als Startseite festlegen.
Drücken Sie STRG+F5, um die Webanwendung im Browser auszuführen. Die erste Seite wird angezeigt.
Klicken Sie auf Red und dann auf Submit. Wenn die Anwendung ordnungsgemäß funktioniert, gelangen Sie auf die Seite mit Label, wo Red zu lesen ist.
Navigieren Sie zurück zur ersten Seite.
Klicken Sie auf Blue und dann auf Submit. Wenn die Anwendung ordnungsgemäß funktioniert, gelangen Sie auf die Seite mit Label, wo Blue zu lesen ist.
Kopieren Sie die Adresse der Webanwendung in die Zwischenablage oder in eine Textdatei. Die Adresse könnte zum Beispiel wie folgt aussehen: https://localhost:<Portnummer>/Default.aspx
Schließen Sie den Browser.

Erstellen und Ausführen eines Tests der codierten UI für die Webanwendung

So erstellen Sie einen Test der codierten UI und führen diesen aus

Klicken Sie in 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 entweder Visual C# oder Visual Basic, und wählen Sie anschließend Test aus.
Wählen Sie im mittleren Bereich die Vorlage Testprojekt aus.
Klicken Sie auf OK.

In Projektmappen-Explorer wird der Lösung das neue Testprojekt TestProject1 hinzugefügt, und im Code-Editor wird entweder die Datei "UnitTest1.cs" oder "UniTest1.vb" angezeigt. Sie können die Datei "UnitTest1" schließen, da sie in dieser exemplarischen Vorgehensweise nicht verwendet wird.
Klicken Sie in 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.
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.
Starten Sie Internet Explorer.
Geben Sie in der Adressleiste von Internet Explorer die Adresse der Webanwendung ein, die Sie in einem vorherigen Schritt kopiert haben. Beispiel:

https://localhost:<Portnummer>/Default.aspx

(Optional) Navigieren Sie durch die Webanwendung, indem Sie auf Red und Blue und im Browser auf die Schaltfläche "Zurück" klicken.
Schließen Sie Internet Explorer.
Klicken Sie auf dem UIMap – Test-Generator für codierte UI auf Code generieren.
Geben Sie im Feld "Methodenname" den Namen "SimpleWebAppTest" 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.

Überprüfen der ordnungsgemäßen Wiedergabe des Tests der codierten UI in Internet Explorer

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

Während der Ausführung des Tests der codierten UI ist ColorWebApp sichtbar. Die Schritte, die Sie in der vorherigen Prozedur ausgeführt haben, werden ausgeführt.

Hinzufügen einer Eigenschaft zur Angabe der Wiedergabe mit Firefox und erneutes Ausführen des Tests der codierten UI

Wählen Sie in der Datei "CodedUITest1.cs" die MyTestInitialize()-Methode aus, bei der das TestInitializeAttribute zum Auskommentieren des Codes verwendet wird, und fügen Sie die CurrentBrowser-Eigenschaft hinzu. Der Wert muss dabei als "FireFox" zugewiesen werden (siehe folgender Code):

Tipp

Anstatt die BrowserWindow-Eigenschaft hinzuzufügen, können Sie optional auch eine Umgebungsvariable mit der Bezeichnung "CodedUITestCurrentBrowser" erstellen, die den Wert "Firefox" besitzt, und anschließend Visual Studio neu starten.

////Use TestInitialize to run code before running each test 
        [TestInitialize()]
        public void MyTestInitialize()
        {        
        //    // 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
            BrowserWindow.CurrentBrowser = "Firefox";
        }

' Use TestInitialize to run code before running each test
    <TestInitialize()> Public Sub MyTestInitialize()
        '
        ' 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
        '
        BrowserWindow.CurrentBrowser = "Firefox"


    End Sub

Weitere Informationen finden Sie unter zur Verwendung des TestInitialze()-Attributs finden Sie unter Gewusst wie: Generieren eines Tests der codierten UI durch Aufzeichnen der getesteten Anwendung.

Wählen Sie im Menü Test die Option Fenster aus, und klicken Sie anschließend auf Testansicht. Wählen Sie dort unter der Spalte Testname die Option CodedUITestMethod1 aus, und klicken Sie anschließend auf der Symbolleiste auf Auswahl ausführen.

Der Test der codierten UI kann nun mit Mozilla Firefox ausgeführt werden.

Siehe auch

Konzepte

Testen der Benutzeroberfläche mit automatisierten UI-Tests

Weitere Ressourcen

Aufzeichnen von Tests mithilfe von Windows Internet Explorer und Wiedergabe mit Mozilla Firefox

Exemplarische Vorgehensweise: Wiedergeben von manuellen Tests mit Firefox

Gewusst wie: Wiedergeben eines webbasierten Tests der codierten UI mithilfe von Firefox

Freigeben über

Exemplarische Vorgehensweise: Wiedergeben von Tests der codierten UI mit Firefox

Vorbereitungsmaßnahmen

Erstellen einer Webanwendung

So erstellen Sie die Webanwendung

Hinzufügen von Steuerelementen zur Webanwendung

So fügen Sie der Webanwendung Steuerelemente hinzu

Hinzufügen von Seiten zur Webanwendung

So fügen Sie der Webanwendung Seiten hinzu

Hinzufügen von Funktionalität zur Webanwendung

So fügen Sie der Webanwendung Funktionalität hinzu

Überprüfen der ordnungsgemäßen Ausführung der Webanwendung

So führen Sie die Webanwendung aus

Erstellen und Ausführen eines Tests der codierten UI für die Webanwendung

So erstellen Sie einen Test der codierten UI und führen diesen aus

Überprüfen der ordnungsgemäßen Wiedergabe des Tests der codierten UI in Internet Explorer

Hinzufügen einer Eigenschaft zur Angabe der Wiedergabe mit Firefox und erneutes Ausführen des Tests der codierten UI

Siehe auch

Konzepte

Weitere Ressourcen

Zusätzliche Ressourcen