Web Test Tutorial - Teil 1

Aus expecco Wiki (Version 2.x)
Version vom 26. September 2018, 14:54 Uhr von Niclauss (Diskussion | Beiträge)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Zur Navigation springen Zur Suche springen

Vorbedingungen[Bearbeiten]

  • Ist der Selenium WebDriver installiert? Infos dazu: "Selenium WebDriver Plugin Dokumentation"
  • Ist der Firefox installiert? Alternativ funktionieren auch Chrome und Safari.
  • Internetverbindung vorhanden?
  • expecco starten
  • Auswahl "New Testsuite"


WTT 00 Start Marked.png


  • Rückgängig-Button um die automatisch angelegten Demo Bausteine zu entfernen


WTT 01 ResetExpecco Marked.png WTT 02 CleanExpecco.PNG

Aufbau einer Verbindung[Bearbeiten]

  • Öffnen des Gui-Browsers


WTT 10 GUIBrowser Marked.png


  • Verbinden mit der Test-Webseite, URL: expeccoalm-demo.exept.de


WTT 11 Selenium WebDriver.PNG

WTT 12 Selenium Connect.PNG

  • Danach hat sich im Hintergrund ein Firefox-Fenster geöffnet, und die Struktur der Webseite wird im GUI-Browser angezeigt:

WTT 13 GuiBrowser.PNG


WTT 14 Firefox.PNG

Erste Schritte mit dem Recorder[Bearbeiten]

  • Recorder starten

WTT 20 Recorder Starten Marked.png

Der Rekorder zeigt die aktuelle Webseite in einem separaten Fenster:

WTT 21 Recorder.PNG


Aufnehmen einer Login-Sequenz[Bearbeiten]

  • Modus umschalten. Der Modus bestimmt, was mit dem Element unter dem Cursor (im Rekorder) passieren soll. Voreingestellt ist "Auto" was i.d.R. als "Klick" aufgenommen wird. Hier soll Text eingegeben werden:


WTT 220 ModusSetText Marked.PNG


  • Einfügen von Text (Klick auf das Eingabefeld in der Webseite):


WTT 221 SetText1 Marked.png

WTT 222 SetText2.PNG

WTT 223 SetText3.PNG


  • Passwort einfügen:


WTT 225 SetPasswort1 Marked.png

WTT 226 SetPasswort2.PNG

WTT 227 SetPasswort3.PNG

  • Submit-Button betätigen (Modus vorher wieder auf "Auto" schalten, damit als "Klick" aufgenommen wird):


WTT 228 ModusAuto.PNG

WTT 229 Submit.PNG

Aufgenommene Sequenz in Baustein umwandeln[Bearbeiten]

Der Rekorder hat die Interaktion zunächst als Sequenz von Aktionsschritten aufgezeichnet (im sog. "Workspace"). Beachten Sie, daß diese im Workspace beliebig geändert werden kann: Sie können Schritte löschen, Parameter ändern, oder mit Copy-Paste, weitere Schritte in die Sequenz einfügen, ohne dazu den Browser zu bedienen). Wenn die Sequenz Ihren Vorstellungen entspricht, wird diese unter einem aussagekräftigen Namen in der Testsuite als Aktionsbaustein abgelegt. Drücken Sie dazu den "Sichern-als-Baustein" Knopf oben rechts:


WTT 23 Workspace1 Marked.png

und geben einen Namen ein (hier "Login"):

WTT 24 Workspace2.PNG

WTT 25 Workspace3.PNG

Jetzt steht die Login-Sequenz als "Login" Baustein zur Ausführung (und Wiederverwendung) im Projekt zur Verfügung. Sie können die Sequenz auch jetzt noch jederzeit anpassen, parametrisieren oder erweitern. Und natürlich auch als Baustein in anderen Sequenzen wiederverwenden.

GuiBrowser verlassen[Bearbeiten]

Verlassen Sie jetzt den GUI-Browser, und wechseln zur Baumansicht des Projekts. Dort finden Sie den gerade aufgezeichneten Baustein unter dem Namen "Login":

WTT 260 BausteinLogin Marked.png

Auf der rechten Seite befinden sich mehrere Reiter, die wiederum verschiedene Aspekte des angewählten Aktionsbausteins zeigen: die "Außensicht" der Aktion wird als sog. "Schema" gezeigt, der "Netzwerk"- bzw. "Network" -Reiter zeigt die "Innenansicht" (also die von der Aktion ausgeführte Sequenz von Einzelschritten). Die anderen Reiter werden später eine Rolle spielen.

WTT 260 BausteinLogin Marked2.png

Aufgezeichnete Sequenz nachbearbeiten[Bearbeiten]

  • Den Reiter "Netzwerk" (bzw. "Network") anwählen.
    Die Schritte der aufgezeichneten "Login" Aktion können in diesem Editor jetzt (nach-) bearbeitet werden.

WTT 261 BausteinLogin Marked.png


Typischerweise werden hier weitere Schritte hinzugefügt (z.B. zum Verifizieren von Werten) oder die zuvor aufgezeichneten Werte von Eingabefeldern werden parametrisiert.

Hier soll zunächst ein weiterer Schritt an den Anfang der Sequenz eingefügt werden, der dann (zur Ausführung) den Browser starten, und das Browserfenster öffnen wird.

"Start Connection"-Schritt einfügen[Bearbeiten]

Zum Einfügen eines Schrittes gibt es mehrere Möglichkeiten:

  • Drag&Drop aus dem Navigationsbaum,
  • Copy-Paste einer Aktion aus dem Navigationsbaum oder eines Schrittes aus einem Netzwerk,
  • über eine Auswahlliste, welche mit dem Menueintrag "Neuer Schritt" (bzw. "New Step") des Menus der rechten Maustaste erscheint.

Hier wird die Menufunktion angewählt:

WTT 262 BausteinEinfügen1.PNG

und im Dialog der "Reuse or Start Connection" Baustein ausgewählt.

Dazu etwas Hintergrundinformation:
die Selenium-Bibliothek bietet mehrere Bausteine zum Aufbau von Verbindungen zu Browsern an:

  • "Start Connection" öffnet immer einen neuen Browser,
  • "Reuse or Start Connection" wird eine bereits bestehende Browserverbindung nutzen, aber bei Bedarf einen neuen Browser öffnen.

Letzterer ist zu empfehlen, wenn Ihr Test nicht unbedingt davon abhängt, auf einem gerade neu gestarteten Browser zu laufen, was i.A. der Fall ist. Lediglich Tests, welche von Cookies, Browser-Historie (bzw. deren nicht-Vorhandensein) abhängen, werden den "Start Connection" Baustein nutzen um sicher einen "jungfräulichen" Browser zu erhalten. Selbstverständlich werden die Testsequenzen später schneller ablaufen, wenn nicht für jeden Einzeltest ein neuer Browser geöffnet wird.

WTT 263 BausteinEinfügen2.PNG

dazu dienen der Textfilter im oberen Teil des Dialogs, sowie die zusätzlichen Filter, mit denen die Suche weiter eingeschränkt werden kann. Nach der Eingabe eines Teils des Names (hier "reuse") erscheint:

WTT 264 BausteinEinfügen3.PNG

Zu Anfang werden Sie u.U. noch suchen müssen, da die Namen und Funktionen der Bausteine noch unbekannt sind. Die Bausteine haben aber i.d.R. selbsterklärende Namen und sind mit zusätzlichen Etiketten (Tags) markiert, die in der Suche ebenfalls betrachtet werden. Sie würden den Baustein also auch unter "connect", "start", "session" oder "selenium" finden. Außerdem sind sie im Navigationsbaum in Ordnern nach Funktionen organisiert (die obigen Bausteine findet man im "Sessions" Ordner).

Es ist aber empfehlenswert, sich etwas Zeit zu nehmen, um die Bausteine der Bibliotheken bzw. deren Einteilung in Gruppen zu erforschen.

Nachdem der Dialog mit "OK" Bestätigt wird, erscheint die Aktion als neuer Schritt unter dem Mauszeiger:

WTT 265 BausteinEinfügen4.PNG


Schritte verschieben und neu anordnen[Bearbeiten]

Die Ausführungsreihenfolge innerhalb einer Sequenz wird durch Verbindungen von Pins gesteuert. Die Platzierung auf der Seite spielt also eigentlich keine Rolle. Dennoch sollten Sie unbedingt darauf achten, daß die Diagramme übersichtlich bleiben und die Reihenfolge von oben nach unten bzw. von links nach rechts der Ausführungslogik entspricht. Dann werden die Diagramme auch später von Ihnen und anderen leicht verstanden.

Daher werden wir den neuen Schritt oben an die Sequenz anfügen.

Die zuvor aufgezeichneten Schritte werden zuerst angewählt und dann nach unten verschoben. Die Auswahl erfolgt entweder mit Klick+Control-Click (einzeln auswählen), mit Klick+Shift-Klick (ersten und letzten auswählen), oder durch Einfangen mit einem "Lasso" durch Klick+Halten auf Hintergrund, dann Rechteck aufziehen (alle im Rechteck auswählen). Es gibt auch entsprechende Tastenkombinationen, wie Ctrl-e oder Ctrl-a.

Die angewählten Schritte werden entweder durch Ziehen mit der Maus, oder mit den Cursortasten verschoben.

WTT 266 BausteinEinfügen5.PNG


Trigger Eingangs- und Ausgangspins hinzufügen[Bearbeiten]

Wie bereits erwähnt wird die Ausführungsreihenfolge der Schritte durch Verbindungen gesteuert. Dazu gibt es einerseits Datenverbindungen als auch Kontrollverbindungen. Über erstere werden Resultate, Messwerte, Eingangswerte usw. von einem Ausgang zu einem anderen Eingang übermittelt. Letztere steuern den Kontrollfluß und werden von Trigger-Ausgang zu Trigger-Eingang gezogen.

Datenein- und ausgänge werden im Schema des Bausteins definiert und finden sich an den platzierten Schritten links bzw. rechts.
Triggerein- und ausgänge müssen explizit angelegt werden und finden sich oben bzw. unten am Schritt.

  • Fügen Sie TriggerInput zu erstem "Send Keys" Schritt hinzu

Dazu den Schritt anwählen, und im Toolbar-Menu "Triggereingang hinzufügen" anklicken:

WTT 267 BausteinEinfügen6 Marked.png

(oops: im obigen Screenshot hat der Schritt diesen Pin bereits!)

der Triggereingang wird jetzt oben am Schritt erscheinen:

WTT 267 BausteinEinfügen6.PNG

analog dazu geben sie nun dem "Reuse or Start Connection"-Schritt einen Triggerausgang und verbinden sie diese beiden (Klick auf Pin, dann ziehen zum Partnerpin).

Der benötigte Partnerpin wird aber auch automatisch angelegt, wenn sie einfach von einem Triggerpin eine Verbindung zur unteren bzw. oberen Hälfte des Partnerschritts ziehen. Es ist also nicht notwendig, den Triggerausgang zuerst anzulegen.

Als dritte Variante können sie auch zwei Schritte anwählen, und die Toolbar-Funktion "Sequentielle Ausführung" anklicken. Dann werden die benötigten Pins sowie Verbindung(en) automatisch angelegt (sie können so gleich eine ganze Kette von neuen Schritten verbinden).

Nach dem Anlegen und Verbinden der Triggeraus- und eingänge, sollte das Diagramm in etwa so aussehen:

WTT 268 BausteinEinfügen7.PNG

Eingangspins mit Parametern versorgen[Bearbeiten]

Im Diagramm sieht man ein rotes Ausrufezeichen rechts neben dem ersten Schritt. Dieser zeigt an, daß der Schritt noch Eingangswerte benötigt, und im aktuellenZustand so nicht lauffähig wäre. In der Tat benötigt der "Reuse or Start Connection" noch drei Parameterwerte:

  • "name"
    der Name der Browserverbindung. Diese ist in diesem Beispiel nicht relevant. Mit diesem wird der anzusprechende Browser bestimmt, wenn mehrere Browserverbindungen parallel bestehen.
  • "startURL"
    die Webseite, welche der Browser initial anzeigen soll.
  • "browserType"
    Auswahl des zu öffnenden Browsers ("Firefox", "Internet Explorer", "Opera", etc,)

Geben Sie den Pins des "Reuse or Start Session" Bausteins durch Doppelklick auf die Pins folgende Werte:

  • name: z.B. "expeccoalm-demo" oder "http://expeccoalm-demo.exept.de" (beliebiger Name kann hier eingegeben werden)
  • startURL: "http://expeccoalm-demo.exept.de" (URL unserer Demo-Seite)
  • browserType: "firefox" (im Dropdown auswählen)

Die Werte werden als "Vorbelegung" (engl. "Freeze Values") neben den Pins angezeigt:

WTT 269 BausteinEinfügen8.PNG


Aktionsbaustein ausführen[Bearbeiten]

  • Drücken Sie "Ausführen" (der Grüne Pfeil)

WTT 269 BausteinEinfügen8 Marked.png

die Sequenz der "Login"-Aktion wird jetzt ausgeführt. Rechts wird (automatisch) der Reiter "Lauf" (engl. "Run") angezeigt. Hier kann die Ausführung verfolgt werden: aktuell ausgeführte Aktionen erscheinen in Hellgrün, beendete Schritte in Grün, Rot oder Grau, abhängig von Erfolg/Nichterfolg der Ausführung (Schritte welche abgebrochen oder nicht ausgeführt wurden, werden Grau dargestellt).

Sie können schon während der Ausführung die angezeigte Aktion im sog. "Aktivitätslog" (engl. "Activitylog") neu auswählen und/oder einzelne Pinwerte inspizieren. Über dem Auswahlbaums finden sich mehrere nützliche Toolbarknöpfe, um z.B. zu Fehlern zu navigieren, oder die automatische Verfolgung ("Animation") einzuschalten.

WTT 270 TestLäuft.PNG


Während der Ausführung sind die Aktionen auch im Browser sichtbar:


WTT 271 FirefoxGeöffnet.PNG


Nach einer erfolgreichen Ausführung sollte jetzt folgendes (grünes) Bild erscheinen:


WTT 272 BausteinAusgeführt.PNG


Die Informationen dieses Laufs bleiben in expecco erhalten, bis die Aktion erneut ausgeführt wird. Sie können also zu anderen Editoren oder dem GUI-Browser navigieren, neue Schritte aufzeichnen oder andere Änderungen vornehmen, und später zum Lauf zurückkehren. Es ist auch möglich, die Daten des Laufs in eine Datei zu sichern, und diese später erneut laden um weiter zu analsysieren.

Überprüfen von Datenfeldern[Bearbeiten]

Die oben angelegte "Login"-Aktion hat lediglich eine Webseite geöffnet und Nutzereingaben simuliert. Im Folgenden sollen angezeigte Werte des Browsers ausgelesen und verifiziert werden.

  • Überprüfung: ist es die richtige Seite?
    • Öffnen Sie den Tab "Gui Browser"


WTT 300 GuiBrowser Marked.png


  • Pfad (Xpath) mit auslesen:
    • Im Recorder das Element mit der Maus hovern (überfliegen)


WTT 300 GuiBrowser Marked2.png

WTT 301 Recorder Geöffnet Marked.png


  • Elternelement vom Text auswählen


WTT 302 Element auswählen1 Marked.png


  • AktionsbausteinGet Text vorbereiten
    • Im Tab Aktionen Elements aufklappen


WTT 303 Elements aufklappen.PNG


  • Aktionsbaustein "Get Text" auswählen und im Tab "Test" kopieren


WTT 304 GetTextSelektieren.PNG

WTT 305 BausteinSelektierenUndKopieren.PNG


  • Wechseln zum Aktionsbaustein "Login", dort den kopierten Aktionsbaustein einfügen


WTT 306 GetTextInLoginEinfügen1 Marked.png

WTT 307 GetTextInLoginEinfügen2.PNG

WTT 307 GetTextInLoginEinfügen2 Marked.png

WTT 308 AnfügenAnAusführung.PNG


  • Aktionsbaustein um Überprüfen auf Gleichheit einfügen [ Assert Equals ]


WTT 310 AssertEinfügen1.PNG

WTT 311 AssertEinfügen2.PNG

WTT 312 AssertEinfügen3.PNG

WTT 313 AssertEinfügen4.PNG

WTT 314 AssertEinfügen5.PNG

Test ausführen[Bearbeiten]

  • Klicken Sie auf das grüne "Play"-Symbol


WTT 320 TestAuführen1 Marked.png

WTT 321 TestAuführen2.PNG

WTT 322 TestAuführen3.PNG


  • Testlauf detailiert ansehen


WTT 323 TestAuswerten1 Marked.png

WTT 324 TestAuswerten2.PNG


  • Testsuite abspeichern


WTT 325 TestsuiteSpeichern1.PNG

WTT 326 TestsuiteSpeichern2.PNG


Abfrage von Eigenschaften von Elementen[Bearbeiten]

  • Properties
    • GUI-Browser öffnen


WTT 500 GUI-BrowserÖffnen1 Marked.png

WTT 500 GUI-BrowserÖffnen1 Marked2.png

WTT 501 RecorderÖffnen.PNG


  • Objekt Projektfilter-input für Anzeige des Elements im Seiten-Baum im GUI-Browser hovern


WTT 502 DropdownHovern Marked.png

WTT 503 RecorderSchließen.PNG


  • Beliebiges Element und Eigenschaft die überprüft werden sollen auswählen


WTT 504 ElementAuswahl Marked.png

WTT 505 AttributAuswahl Marked.png


  • Aktionsbaustein "Check Attribute" auswählen


WTT 506 BausteinAuswählen Marked.png

WTT 507 ExpectedValueEingeben.PNG

WTT 508 BausteinKopieren.PNG


  • Aktionsbaustein einfügen und verbinden


WTT 509 BausteinEinfügen.PNG

WTT 510 BausteineVerbinden.PNG

WTT 511 BausteinEinfügen1.PNG

WTT 512 BausteinEinfügen2.PNG

WTT 513 BausteinEinfügen3.PNG

WTT 514 BausteinEinfügen4.PNG

WTT 515 BausteinEinfügen5.PNG

WTT 516 BausteinEinfügen6.PNG

WTT 517 BausteineVerbinden1.PNG


  • Test ausführen (siehe oben)
    • Wichtig ist hierbei, dass die Test-Umgebung (der Browser) vor jeder Testausführung wieder auf die Startseite zurückgesetzt wird(siehe auch nächster Schritt). Alternativ kann man den Browser auch einfach schließen.
  • Ferngesteuerten Browser schließen


WTT 518 BrowserSchließen Marked.png


  • Test ausführen


WTT 517 BausteineVerbinden1 Marked.png

WTT 519 TestAusführen1.PNG

WTT 520 TestAusführen2.PNG

Beenden der Session nach jedem Test[Bearbeiten]

  • Neuen Aktionsbaustein einfügen


WTT 600 SessionBeenden1.PNG

WTT 601 SessionBeenden2.PNG

WTT 602 SessionBeenden3.PNG

WTT 603 SessionBeenden4.PNG

WTT 604 SessionBeenden5.PNG

WTT 605 SessionBeenden6.PNG

WTT 606 SessionBeenden7.PNG


  • Änderungen am Aktionsbaustein SessionBeenden übernehmen


WTT 607 SessionBeenden8Marked.png


  • Aktionsbaustein Login Bearbeiten im Tab "Schema" mittels Drag and Drop in das Feld "Nach Ausführung" ziehen


WTT 608 LoginDisconnect1 Marked.png

WTT 609 LoginDisconnect2.PNG


  • Jetzt kann der Test beliebig oft hintereinander ausgeführt werden, ohne dass der Browser jedes mal geschlossen werden muss, da dies nun expecco übernimmt



Copyright © 2014-2024 eXept Software AG