Eine wesentliche Aufgabe im Testing ist es, sicherzustellen, dass die Software in verschiedenen Anwendungsszenarien, wie z.B. mit verschiedenen Endanwendergeräten, Betriebssystemen oder Browsern, fehlerfrei und in gleicher Weise funktioniert. Werden ausschließlich manuelle Tests ausgeführt, so stößt man bei dieser Aufgabe aufgrund der Komplexität und dem damit verbundenen hohen zeitlichen Aufwand schnell an seine Grenzen. Automatisierte Oberflächentests hingegen bieten hierfür eine skalierbare Lösung, welche zudem die Fehleranfälligkeit der Tests reduziert.
Automatisierte Oberflächentests steuern die Oberflächenelemente einer Anwendung an und führen vordefinierte Aktionen auf ihnen aus, wie z.B. das Befüllen einer Textbox oder das Drücken eines Buttons. Dabei werden die Oberflächenelemente anhand einer oder mehrerer Eigenschaften, wie z.B. dem Namen oder der ID, identifiziert. Eine zentrale Aufgabe beim Erstellen solcher automatisierter Oberflächentests ist das Bestimmen eben dieser Eigenschaften, mit welchen die Oberflächenelemente identifiziert werden. Aus der Bandbreite an Tools, die hierfür verwendet werden können, werden in diesem Blogbeitrag die beiden Tools Inspect und die Developer Tools des Internet Explorers vorgestellt.
Inspect
Inspect ist ein Tool, welches es erlaubt, sowohl Microsoft Active Accessibility (MSAA)– als auch Microsoft User Interface Automation (UIA)-Eigenschaften von Oberflächenelementen zu untersuchen. Das Tool eignet sich damit sowohl zur Untersuchung von WinForms- als auch von WPF-Anwendungen. Standardmäßig wird es unter Windows 8 mit dem Windows Software Development Kit (Windows SDK) installiert und ist in dem Ordner \bin\<platform> des Windows SDK-Installationspfades (z.B. C:\Program Files (x86)\Windows Kits\8.1\bin\x86\inspect.exe) zu finden.
Die für die Oberflächenuntersuchung zu verwendende API (MSAA bzw. UIA) wird in der Toolbar ausgewählt (vgl. Abb. 1 (1)). In der Hauptansicht, welche aus zwei Bereichen besteht, wird die Oberfläche untersucht: Die Baumansicht (vgl. Abb. 1 (2)) stellt die hierarchische Ansicht der Oberflächenelemente dar und wird zum Navigieren zwischen den Oberflächenelementen benutzt. Dabei kann zwischen den drei Sichten Raw View, Control View und Content View gewählt werden, welche jeweils unterschiedliche Filterkriterien zum Anzeigen des Baumes definieren. Die Detailansicht (vgl. Abb. 1 (3)) listet die Eigenschaften des aktuell ausgewählten Oberflächenelementes auf.
Abb. 1: Inspect-Fenster
Mit Hilfe der Toolbar (oder alternativ über das Menü oder Shortcuts) bietet Inspect verschiedene Möglichkeiten an, zwischen den Elementen zu navigieren sowie Aktionen auf ihnen auszuführen. Ausgehend von dem ausgewählten Element kann beispielsweise…
- … zum Elternelement navigiert werden (vgl. Abb. 2 (1)),
- … zum ersten Kindelement navigiert werden (vgl. Abb. 2 (2)),
- … zum vorhergehenden Geschwisterelement navigiert werden (vgl. Abb. 2 (3)),
- … zum nachfolgenden Geschwisterelement navigiert werden (vgl. Abb. 2 (4)),
- … zum letzten Kindelement navigiert werden (vgl. Abb. 2 (5)),
- … die hinterlegte Default-Aktion ausgeführt werden (z.B. Drücken eines Buttons, vgl. Abb. 2 (6)),
- … der Fokus gesetzt werden (vgl. Abb. 2 (7)) oder
- … das Element durch einen gelben Kasten hervorgehoben werden (vgl. Abb. 2 (8)).
Abb. 2: Toolbar des Inspect-Fensters
Developer Tools
Für die Untersuchung der Oberfläche von Webanwendungen sind im Internet Explorer die Developer Tools integriert, welche über F12 geöffnet werden können. Diese enthalten nicht nur Features zur Untersuchung der Oberflächenelemente sondern bieten darüber hinaus Unterstützung beim Erstellen und Debuggen von Webseiten.
Die für die Untersuchung der Oberfläche relevanten Features befinden sich im Tab DOM Explorer (vgl. Abb. 3 (1)). Der DOM Explorer stellt die Interpretation des Document Object Model (DOM) dar und erlaubt es, die HTML-Struktur der Webseite sowie die verwendeten CSS-Formatvorlagen zu untersuchen.
Der DOM Explorer unterteilt sich in zwei Hauptbereiche: Auf der linken Seite befindet sich der Elementbereich (vgl. Abb. 3 (2)), welcher das aktuelle DOM anzeigt und erlaubt, zwischen den Elementen der Webseite zu navigieren und diese zu untersuchen. Auf der rechten Seite des DOM Explorers befindet sich der Formatvorlagenbereich (vgl. Abb. 3 (3)). Dieser unterteilt sich wiederum in die 5 Tabs Styles, Computed, Layout, Events und Changes. Die verschiedenen Tabs bieten z.B. die Möglichkeit, zu überprüfen, welche Formatvorlagen auf das aktuell ausgewählte Element angewendet sind. Hierbei wird zwischen Vorlagen, die von anderen Elementen geerbt sind und solchen, die direkt auf das Element angewendet sind, unterschieden.
Wie Inspect bietet auch der DOM Explorer noch zwei nützliche Features für die Untersuchung von Webseiten:
- Durch Klicken des Select Element-Buttons (vgl. Abb. 3 (4)) und Auswählen eines Elementes der Webseite mittels Mausklick wird direkt zur entsprechenden Stelle im DOM navigiert. Alternativ kann man dieselbe Aktion über das Kontextmenü eines Oberflächenelementes einer Webseite und dem anschließenden Auswählen des Eintrags Element untersuchen im Kontextmenü ausführen.
- Durch Klicken des DOM Element Highlighting-Buttons (vgl. Abb. 3 (5)) und Auswählen eines Elementes der Webseite im DOM Explorer wird das Element farblich auf der Webseite hervorgehoben.
Abb.3: Developer Tools im Internet Explorer
Fazit
Möchte man Oberflächen automatisiert testen, so besteht eine grundlegende Aufgabe darin, die Oberflächenelemente zu identifizieren und deren Eigenschaften zu untersuchen. Wie so oft beeinflusst die Wahl des Tools wesentlich die Effizienz, mit welcher diese Aufgabe gemeistert werden kann. Daher ist es essentiell, die zu untersuchende Technologie bei der Auswahl des unterstützenden Tools, wie z.B. Inspect oder den Developer Tools, mit einzubeziehen. Mit dem richtigen Werkzeug an der Hand und ein wenig Übung kann der Tester so schnell und strukturiert Informationen über die zu automatisierende Oberfläche einholen, um seine automatisierten Oberflächentests zu erstellen.