![Page 1: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/1.jpg)
Coded UI Testing
![Page 2: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/2.jpg)
Automatisiertes UI Testing
Mark Allibone, 18.04.2013, #2
![Page 3: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/3.jpg)
Eine klassische Applikations Architektur
Mark Allibone, 18.04.2013, #3
Business Logik
Grafische Oberfläche
Datenzugriff (Datenbank, Cloud, etc)
![Page 4: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/4.jpg)
Testarten
Mark Allibone, 18.04.2013, #4
Business Logik
Grafische Oberfläche
Datenzugriff (Datenbank, Cloud, etc)
![Page 5: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/5.jpg)
Automatisiertes Testen im Vergleich
• X / Y Koordinaten Aufnahme
«Recorded UI Testing» «Coded UI Testing»
Mark Allibone, 18.04.2013, #5
• Erkennung von UI Control Typen
• Namenserkennung von UI Elements
• X / Y Koordinaten Aufnahme inkl. Skalierung und Ebenen
![Page 6: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/6.jpg)
Coded UI Test – Einsatzmöglichkeiten
Funktionale Anforderungen
Darstellungsparameter
Performance
× UX/Design Testen
Mark Allibone, 18.04.2013, #6
![Page 7: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/7.jpg)
Fokusierung rein auf UI bei UI Tests
• Lange Initialisierung von Business Logik
• Lange Datenzugriffe via Netzwerk, Festplatte, etc.
• Komplexe Business Logik Alghorithmen
• Redundanz mit Integrationstests
Mark Allibone, 18.04.2013, #7
![Page 8: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/8.jpg)
Fokussierter Automated UI Test
Mark Allibone, 18.04.2013, #8
Business Logik
Grafische Oberfläche
Datenzugriff (Datenbank, Cloud, etc)
Automated UI Test
Fake Business Logik
![Page 9: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/9.jpg)
Vorteile von Coded UI Tests
• Regressionstests
• Reduzierung manueller Tests
• Erhöhung der Testabdeckung
• Automatische Testausführung
• Softwareverhalten auf unterschiedlichen Plattformen und Browser
• Wiederverwendbarkeit für Performancetests
• Langzeittests
• …
Mark Allibone, 18.04.2013, #9
![Page 10: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/10.jpg)
Microsoft Coded UI Test
Mark Allibone, 18.04.2013, #10
Continuous value
delivery
Was wird unterstützt
1 2 3 Knowhow / Skills
• Welche Frameworks und Plattformen werden unterstützt.
• Welche Anforderungen müssen in der Architektur berücksichtigt werden.
• Skills, Development und Technologie
• Software Anforderungen und Empfehlungen
Tools
![Page 11: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/11.jpg)
Was wird unterstützt – Plattform & Frameworks
• Plattformunterstützung
http://msdn.microsoft.com/en-us/library/dd380742.aspx
Windows 7, Windows 8, …
× Windows XP, …
WPF, Windows Forms 2.0, …
× Windows Store, …
Mark Allibone, 18.04.2013, #11
![Page 12: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/12.jpg)
Was wird unterstützt – Architekturaufbau
• Custom controls
• Animationen
Mark Allibone, 18.04.2013, #12
![Page 13: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/13.jpg)
Knowhow/ Skills
• Skills in C# .Net oder VB .Net inkl. dem MS Test Framework
• Programmierkenntnisse bei Testern von Vorteil
Mark Allibone, 18.04.2013, #13
![Page 14: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/14.jpg)
Tools
• Visual Studio 2010/2012
Premium
Ultimate
• TFS 2010/2012 (nicht zwingend, jedoch von Vorteil)
Mark Allibone, 18.04.2013, #14
![Page 15: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/15.jpg)
Coded UI Test – Zahlenrechner Demo
• Wie erstellt man ein Coded UI Test Projekt
• Was macht das Coded UI Framework
• Wiederverwendbarkeit von erstellten Coded UI Tests
Mark Allibone, 18.04.2013, #15
![Page 16: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/16.jpg)
Fazit Demo
• Ergänzung Unit Tests / Integration Tests
• Möglichkeit der Wiederverwendbarkeit
• Coded UI Tests müssen in Visual Studio implementiert werden
• Continous Integration inklusive UI Layer mit TFS möglich
Mark Allibone, 18.04.2013, #16
![Page 17: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/17.jpg)
Weitere Testszenarien
• Komplexe Algorithmen
• Edgecases
• Hohe Anzahl unterschiedlicher Parameter
Mark Allibone, 18.04.2013, #17
![Page 18: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/18.jpg)
Parametrisiertes Coded UI Testing
• Keine Anpassung des bestehenden generierten Testcodes
Zusätzliche Parameter durch externe Datenquelle
• Testparameter via Import
CSV, Excel, XML, Test Cases TFS, SQL Express
Mark Allibone, 18.04.2013, #18
![Page 19: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/19.jpg)
Parametrisiertes Coded UI Test - Demo
• Verwenden von externen Daten in Test
• Zugriff auf einzelne Parameter in Test
• Einfache Erweiterung der Parameter
• Durchführung des Tests für alle gegebenen Parameter
Mark Allibone, 18.04.2013, #19
![Page 20: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/20.jpg)
Fazit Demo
• Einfache Erweiterung bestehender Tests
• Fehlerreport bezieht sich auf die einzelnen Parameter und nicht auf die Testmethode
• Kein Visual Studio oder Programmiererfahrung für die Erweiterung nötig
Mark Allibone, 18.04.2013, #20
![Page 21: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/21.jpg)
Automatisierungen im Vergleich
• Modularisierung der Testabläufe
• Wiederverwendbarkeit von Modulen
• Änderungen können an einzelnen Modulen vorgenommen werden
• Vollständig automatisierbar
• Keine Modularität gegeben
• Keine Wiederverwendbarkeit der einzelnen Schritte möglich
• Änderungen bedeuten komplette Neuaufnahme
• Manuelle Resultatverifizierung
«Recorded UI Testing» (MTM Action Recordings)
«Coded UI Tests»
Mark Allibone, 18.04.2013, #21
![Page 22: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/22.jpg)
Action Recording Modularisieren - Demo
• Wiederverwenden von MTM Action Recordings auf TFS
• Konvertierung eines MTM Action Recordings in einen Coded UI Test
• Ergänzung des konvertierten Action Recordings mit Coded UI Test Validierung
• Auswertung des Tests
Mark Allibone, 18.04.2013, #22
![Page 23: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/23.jpg)
Fazit Demo
Mark Allibone, 18.04.2013, #23
• Einfacher Import von MTM Action Recordings
• Testschritte können modularisiert werden
• Einzelne Testschritte (Module) können in anderen Coded UI Tests wiederverwendet werden
• Einfache Integration in den Continous Integration Zyklus möglich
![Page 24: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/24.jpg)
Weitere Punkte…
Mark Allibone, 18.04.2013, #24
• Anpassen von Coded UI Tests wegen UI Änderungen
• Import von Coded UI Tests in den Microsoft Test Manager
• Integration Custom Controls
• Test von Web UIs (z.B. HTML5)
![Page 25: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/25.jpg)
Ausblick - Mobile Solutions
Mark Allibone, 18.04.2013, #25
![Page 26: Professional UI Testing - noser.com · Eine klassische Applikations Architektur Mark Allibone, 18.04.2013, #3 Business Logik Grafische Oberfläche Datenzugriff (Datenbank, Cloud,](https://reader030.vdocuments.us/reader030/viewer/2022040705/5e03feee2a616f0fed5480a3/html5/thumbnails/26.jpg)
noser engineering ag
rudolf-diesel-strasse 3, 8404 winterthur
+41 52 234 56 11 phone
www.noser.com