APEX-Anwendungen (fast) wie von Geisterhand testen mit PhantomJS und CasperJS Andreas Wismann WHEN OTHERS Entwicklung Coaching Projektplanung wismann@when-others.com
Andreas Wismann Selbständiger Berater Dipl.-Informatiker (FH) Kaarst (bei Düsseldorf) wismann@when-others.com Datenbanken seit 1983 Web seit 1995 Oracle seit 1997 APEX seit 2007
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!
Haben Sie Zeit für manuelle Tests?
Verwenden Sie automatisierte Testverfahren?
"Seit wann geht das nicht?"
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...
PhantomJS Headless Browser
PhantomJS Headless Browser (ohne grafische Benutzeroberfläche)
PhantomJS Skripte werden in der Console ("REPL") ausgeführt:
Webkit-basiert Macht alles "wie Safari" beherrscht Canvas, SVG (kein Adobe Flash)
Webkit-basiert nächste Version: vermutlich Chrome
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
Installation: phantomjs.org
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
Demo: PhantomJS
Wer benutzt PhantomJS? zum Beispiel Bootstrap jquery mobile modernizr
Asynchron programmieren mit Callbacks
Variablen übergeben
Website Scraping
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)
Website Scraping var webpage = require('webpage').create(), system = require('system'), url = 'https://www.google.de/search?site=&source=hp&q=doag%202016'; 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() ); });
Let's test...
APEX-Region Wird die Region angezeigt? Welche Dimensionen (Höhe) hat sie? Beinhaltet sie andere Regionen?
Items Werden alle erforderlichen Items angezeigt? Welche Werte haben die Items? Welche Werte haben die Hidden Items?
Layout Sieht die Anwendung aus wie erwartet?
Classic Report Erscheinen die erwarteten Ergebnisse? Wie viele Zeilen werden gelistet? Kommt "no data found"?
Interactive Report Wird die richtige Default-Reportdefintion angezeigt? Lassen sich die Ergebnisse als Export-Datei herunterladen? => sehr umständlich nachzuprogrammieren mit POST-Befehlen
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?
Fehlermeldungen Zeigt die Seite eine Fehlermeldung? Zeigt irgendeine Seite der Anwendung eine Fehlermeldung?
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?
"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" ~~~
CasperJS Test-Framework basiert auf PhantomJS Fügt (insbesondere) Navigation und Testfall-Management hinzu Vereinfacht die asynchrone Programmierung stark
CasperJS umfangreiche API umfassende und gute Dokumention
Farbe im DOS-Fenster: ansicon, comemu
Demo: CasperJS
loadimages = false verringert gegebenenfalls die Ladezeiten und den Traffic
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
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>
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
Farbe im DOS-Fenster? https://github.com/adoxa/ansicon https://conemu.github.io/
Buchempfehlung Rob Friesel: PhantomJS Cookbook 2014 packtpub.com 306 Seiten Amazon-Preis: 33,15
4 5 Buchempehlung David Sawyer McFarland 3. Auflage 2014 683 Seiten Amazon-Preis: 41,00
Try this at home!