PhantomJS und CasperJS

Transkript

1 APEX-Anwendungen (fast) wie von Geisterhand testen mit PhantomJS und CasperJS Andreas Wismann WHEN OTHERS Entwicklung Coaching Projektplanung

2 Andreas Wismann Selbständiger Berater Dipl.-Informatiker (FH) Kaarst (bei Düsseldorf) Datenbanken seit 1983 Web seit 1995 Oracle seit 1997 APEX seit 2007

3 Wie viele Bestandteile hat Ihre APEX-Applikation? Wie viele Seiten? Wie viele Regionen? Wie viele Formulare? Wie viele Items? Wie viele Dynamic Actions? Wie viele Conditions? Wie viele Reports? So viele Fehlerquellen hat Ihre APEX-Applikation!

4 Haben Sie Zeit für manuelle Tests?

5 Verwenden Sie automatisierte Testverfahren?

6 "Seit wann geht das nicht?"

7 Die Suche nach dem Test-Tool freie Software Referenzen einfach zu handhaben (Installation, Mobilität) leicht zu lernen trotzdem mächtig an Standards ausgerichtet erweiterbar durch eigene Programmierung nicht schon wieder eine neue Programmiersprache...

8

9 PhantomJS Headless Browser

10 PhantomJS Headless Browser (ohne grafische Benutzeroberfläche)

11 PhantomJS Skripte werden in der Console ("REPL") ausgeführt:

12 Webkit-basiert Macht alles "wie Safari" beherrscht Canvas, SVG (kein Adobe Flash)

13 Webkit-basiert nächste Version: vermutlich Chrome

14 Aufgaben von PhantomJS (Beispiele) Webseiten testen Vorhandensein von Elementen Erwartete Ausgaben Fehlermeldungen Broken Layout Automatisieren Einloggen Ausfüllen von Formularen Klick-Aktionen Weiterleitungen Netzwerk monitoren Ladezeit für eine Seite Anzahl geladener Ressourcen Fehler beim Laden Bildschirmfotos erstellen für diverse Monitore (groß, klein, mobil) Ausschnitte

15 Installation: phantomjs.org

16

17 Hallo Welt console.log( 'Hallo Welt' ); console.log( 'Die verwendete Codepage ist ', phantom.outputencoding ); console.log( 'äöü ÄÖÜ ß' ); phantom.exit(); # Aufruf an der Konsole (Windows PowerShell, Terminal etc.) phantomjs --output-encoding=cp850 hallo-welt.js

18 Demo: PhantomJS

19 Wer benutzt PhantomJS? zum Beispiel Bootstrap jquery mobile modernizr

20 Asynchron programmieren mit Callbacks

21 Variablen übergeben

22 Website Scraping

23 Kann ich jquery in PhantomJS benutzen? Ja. Entweder das jquery der APEX-Seite Oder ein beliebiges anderes jquery, welches man der Webseite "unterschiebt" (siehe injectjs)

24 Website Scraping var webpage = require('webpage').create(), system = require('system'), url = ' webpage.onconsolemessage = function(msg){console.log(msg)}; console.log('opening', url); webpage.open(url, function () { console.log('opened ', url); webpage.injectjs('jquery.min.js'); // im selben Ordner wie das Skript }); webpage.evaluate(function(selector) { var selector = 'h3.r a'; console.log('selector =', selector); $nodes = $(selector); console.log($nodes.length, 'Treffer'); $nodes.each(function(index){ console.log( index + ': ' + $(this).text() ); }); return false; }); console.log(' '); phantom.exit(); var selector = 'h3.r a'; console.log('selector =', selector); $nodes = $(selector); console.log($nodes.length, 'Treffer'); $nodes.each(function(index){ console.log( index + ': ' + $(this).text() ); });

25 Let's test...

26 APEX-Region Wird die Region angezeigt? Welche Dimensionen (Höhe) hat sie? Beinhaltet sie andere Regionen?

27 Items Werden alle erforderlichen Items angezeigt? Welche Werte haben die Items? Welche Werte haben die Hidden Items?

28 Layout Sieht die Anwendung aus wie erwartet?

29 Classic Report Erscheinen die erwarteten Ergebnisse? Wie viele Zeilen werden gelistet? Kommt "no data found"?

30 Interactive Report Wird die richtige Default-Reportdefintion angezeigt? Lassen sich die Ergebnisse als Export-Datei herunterladen? => sehr umständlich nachzuprogrammieren mit POST-Befehlen

31 Formular Gelangt man vom Report zum Edit-Formular? Gelangt man mit Cancel wieder zurück? Werden Daten bei korrekter Eingabe angenommen? Werden falsche Dateneingaben abgelehnt?

32 Fehlermeldungen Zeigt die Seite eine Fehlermeldung? Zeigt irgendeine Seite der Anwendung eine Fehlermeldung?

33 Ladezeiten / Langläufer Wie lange dauert das Laden einer bestimmten Seite? Was wird geladen? Welche Seiten laden am längsten? Welche Ladezeiten haben sich verändert?

34 "Asynchronous Hell" mit PhantomJS Asynchrone Funktionsaufrufe führen Callback-Funktionen aus "nachfolgende" Programmteile dürfen sich nicht auf die Reihenfolge der Ausführung verlassen Navigation wird unübersichtlich Sie bekommen schnell ~~~ "Spaghetti-Code" ~~~

35 CasperJS Test-Framework basiert auf PhantomJS Fügt (insbesondere) Navigation und Testfall-Management hinzu Vereinfacht die asynchrone Programmierung stark

36 CasperJS umfangreiche API umfassende und gute Dokumention

37 Farbe im DOS-Fenster: ansicon, comemu

38 Demo: CasperJS

39 loadimages = false verringert gegebenenfalls die Ladezeiten und den Traffic

40 Herausforderung: APEX Session-ID Session-ID wird nach dem Login erteilt Sie muss in einer Suite für alle folgenden Tests verwendet werden Deshalb: nach casper.start(...) muss man die Session-ID zunächst in.then(...) ermitteln Erst anschließend, und nur in der Callback-Funktion von then(...) können alle folgenden Tests mit thenopen(...) durchgeführt werden

41 APEX play nicely with test frameworks Eindeutige IDs verwenden Marker-Klassen benutzen Report-Ausgaben wie no data found ändern zu <span class="no-data-found">no data found</span> denn dann können Sie später folgendes leicht finden: <span class="no-data-found">keine Daten gefunden</span>

42 Nachteile von PhantomJS / CasperJS? Das Passwort ist sichtbar (Konsole oder Datei) Beschränkung auf Safari-Engine Ein Headless Browser zeigt keinen Benutzer-Dialog "Datei auswählen" - ein File Upload muss also separat programmiert werden

43 Farbe im DOS-Fenster?

44 Buchempfehlung Rob Friesel: PhantomJS Cookbook 2014 packtpub.com 306 Seiten Amazon-Preis: 33,15

45 4 5 Buchempehlung David Sawyer McFarland 3. Auflage Seiten Amazon-Preis: 41,00

46 Try this at home!