Automated Web 2.0 Testing

Testen von Web 2.0 Neue Herausforderungen oder alter Wein in neuen Schläuchen? Johannes Link johanneslink.net

2 Agenda • Wer bin ich? • Aspekte des automatisierten Testens • Herausforderungen bei Web 2.0 • Techniken und Werkzeuge • Beispielanwendung Johannes Link Testen von Web 2.0

3 Wer ich bin... Johannes Link Testen von Web 2.0

3 Wer ich bin... • (Extremer) Softwareentwickler Johannes Link Testen von Web 2.0

3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach Johannes Link Testen von Web 2.0

3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach • Testgetrieben Johannes Link Testen von Web 2.0

3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach • Testgetrieben • Mein eigener Chef Johannes Link Testen von Web 2.0

4 Testaspekte • Unit Tests aller selbst entwickelten Komponenten • Systemtest der Gesamtapplikation • aus technischer Sicht (Oberflächen-orientiert) • aus Kundensicht (fachlich orientiert) • (Technische) Integrationstests • Last- und Performance-Tests • Test der beteiligten „Fremd-Dienste“ Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS JavaScript Prototype Scriptaculous Dojo DWR (client lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS JavaScript Prototype Scriptaculous Dojo DWR (client lib) Server Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS JavaScript Prototype Scriptaculous Dojo DWR (client lib) HTML XML JSON JavaScript Server Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS JavaScript Prototype Scriptaculous Dojo DWR (client lib) HTML XML Asynchron JSON JavaScript Server Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS JavaScript Prototype Scriptaculous Dojo DWR (client lib) HTML The XML Asynchron JSON Web JavaScript Server Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS Plug-Ins JavaScript GoogleMaps, Prototype Flickr, Qype ... Scriptaculous Dojo DWR (client lib) HTML The XML Asynchron JSON Web JavaScript Server Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS Plug-Ins JavaScript GoogleMaps, Prototype Flickr, Qype ... Scriptaculous Dojo DWR (client lib) HTML Http The XML Asynchron JSON Web JavaScript Server Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS Plug-Ins JavaScript GoogleMaps, Prototype Flickr, Qype ... Scriptaculous ??? Dojo DWR (client lib) HTML Http The XML Asynchron JSON Web JavaScript Server Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

5 Web-Client HTML + CSS Plug-Ins JavaScript GoogleMaps, Prototype Flickr, Qype ... Scriptaculous ??? Dojo DWR (client lib) HTML Http The XML Asynchron JSON Web JavaScript SOAP Server REST Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

6 Herausforderungen • Ajax-Technologie-Mix (JavaScript, Java etc.) • Verteilung • Einbindung entfernter Komponenten • Clientseitige „Mashups“ (z.B: Google Maps) • Serverseitige „Remote Services“ • Browserinkompatibilitäten • Instabilität der „3rd party services“ Johannes Link Testen von Web 2.0

7 Was können Web-Client wir testen? HTML + CSS Plug-Ins JavaScript GoogleMaps, Prototype Flickr, Qype ... Scriptaculous ??? Dojo DWR (client lib) HTML Http The XML Asynchron JSON Web JavaScript SOAP Server REST Tomcat, Apache Java Servlets JSF DWR (server lib) Johannes Link Testen von Web 2.0

8 PLO Beispiel: Party Location Optimizer Johannes Link Testen von Web 2.0

9 Unit Testing • Auf dem Server wie gehabt • Auf dem Client • Unit Tests für JavaScript • Attrappen für APIs nach außen • Vermeidung von selbstgeschriebenem JavaScript • Fertige Frameworks (Scriptaculous, Dojo...) • Cross-Compiling (z.B. GWT) Johannes Link Testen von Web 2.0

10 Unit Tests mit JavaScript • Im Browser • Scriptaculous Testing Framework • JSUnit x 2, J3Unit, ... • Browserunabhängig • Rhino als JavaScript-Engine • JsTester • Attrappen • für Ajax-Kommunikation • für Mashup-Komponenten Johannes Link Testen von Web 2.0

11 Scriptaculous Testing Framework • http://wiki.script.aculo.us/ scriptaculous/show/UnitTesting • Testfälle werden auf HTML-Seiten definiert und ausgeführt • Vorteile: • Browserinkompatibilitäten werden sichtbar • Alle Browser-Features sind verfügbar • Nachteil: • Automatisierung erfordert Browser bzw. Browsersimulation Johannes Link Testen von Web 2.0

12 Scriptaculous Test Framework Beispiel: <html>... <script src=\"../../js/prototype.js\" type=\"text/javascript\"></script> <script src=\"../../js/scriptaculous/unittest.js\" type=\"text/ javascript\"></script> <body>  <div id=\"testlog\"></div>  <script type=\"text/javascript\" language=\"javascript\"> function myAdder(op1, op2) { return op1 + op2; } </script>  <script type=\"text/javascript\" language=\"javascript\"> // <![CDATA[ new Test.Unit.Runner({ setup: function() { eins = 1; zwei = 2; }, testAddSmallNumbers: function() { with(this) { assertEqual(3, myAdder(eins, zwei)); }}, ... }); // ]]> </script> Johannes Link Testen von Web 2.0

13 JsTester • http://jstester.sourceforge.net/ • Vorteile: • JavaScript-Code kann auf Server-Seite ausgeführt und getestet werden • Integration mit JUnit und TestNG • Nachteile: • Browser-Funktionalität steht nicht zur Verfügung • Browser-Probleme und Inkompatibilitäten werden nicht entdeckt • Besonders zu empfehlen, wenn der Server selbst JavaScript-Code generiert Johannes Link Testen von Web 2.0

14 JsMock: http:// jsmock.sourceforge.net/ Object to mock: Unit Test: var Speaker = { testSpeaker: function() { with(this) { say: function(msg) { mockControl = new MockControl(); alert(msg); speakerMock = mockControl.createMock } (Speaker); }; speakerMock.expects().say('oopsoops'); Speaker = speakerMock; Object under test: var DoubleSpeaker = { DoubleSpeaker.say('oops'); say: function(msg) { mockControl.verify(); Speaker.say }} (msg+msg); } }; Johannes Link Testen von Web 2.0

15 Systemtests • Möglichst Test aller integrierten Komponenten • Webclient-Steuerung • Im richtigen Browser: Selenium, Watir, Squish ... • Browsersimulation: HtmlUnit, Webtest, ... • Mocking von „Remote Services“ • Zwei Ansätze • Oberflächen-orientiert • Fachlich orientiert Johannes Link Testen von Web 2.0

16 Oberflächenorientierte Kundentests • Abstraktion: Bedienung der Oberfläche • Selenium • Der „richtige“ Browser als Testplattform • http://openqa.org/selenium/ • Remote Control zur Automatisierung • Canoo WebTest • Verwendet HtmlUnit (Java-Browser-Simulation) • Ant-basierte XML-Skripte oder Groovy • http://webtest.canoo.com/ Johannes Link Testen von Web 2.0

17 Selenium Johannes Link Testen von Web 2.0

18 Canoo WebTest: Ant-Skript Johannes Link Testen von Web 2.0

19 Canoo WebTest: Groovy Johannes Link Testen von Web 2.0

20 Fachlich orientiertes Framework: FIT Framework for Integrated Tests • Abstraktion: Sprache des Kunden • Testdaten werden tabellarisch erstellt (in HTML, Excel, Word oder im Wiki) • Anbindung ans System in Java • Auch für andere Sprachen (C#, Python etc.) verfügbar • http://fit.c2.com Johannes Link Testen von Web 2.0

21 Warum FIT? Johannes Link Testen von Web 2.0

21 Warum FIT? • Testsprache frei definierbar Johannes Link Testen von Web 2.0

21 Warum FIT? • Testsprache frei definierbar • Tests können vor der Implementierung definiert werden Johannes Link Testen von Web 2.0

21 Warum FIT? • Testsprache frei definierbar • Tests können vor der Implementierung definiert werden • Entkopplung von Definition und Automatisierung • Zeitlich • Personell Johannes Link Testen von Web 2.0

21 Warum FIT? • Testsprache frei definierbar • Tests können vor der Implementierung definiert werden • Entkopplung von Definition und Automatisierung • Zeitlich • Personell • Open Source und kostenlos Johannes Link Testen von Web 2.0

22 FIT... 1. liest HTML-Dokumente ein, 2. führt die enthaltenen Testfälle aus 3. reichert HTML um Testergebnis an 4. gibt HTML-Dokumente wieder aus Johannes Link Testen von Web 2.0

23 Johannes Link Testen von Web 2.0

23 public class AddLocationFixture extends Fixture { @Override public void doRow(Parse row) { String location = row.parts.text; ... right(row.parts); } } Johannes Link Testen von Web 2.0

24 Angriffs- Web Client punkte fachlicher Tests Presentation Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0

24 Angriffs- Web Client punkte fachlicher WebTest Tests Presentation HTMLUnit Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0

24 Angriffs- Web Client punkte Selenium fachlicher WebTest Tests Presentation HTMLUnit Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0

25 Wie verbinde ich Fit mit Ajax? • Verwendung der Business Facade (Server) • Http-Protokoll • HtmlUnit • WebTest? • Steuerung des Client • Mozilla Web Client • Selenium Remote Control Johannes Link Testen von Web 2.0

26 PLO Unit Tests Web-Client HTML + CSS JavaScript Prototype GMaps API Scriptaculous ??? Asynchron XML maps.google.com Server REST Tomcat, Apache Java GeoCoder Servlets Johannes Link Testen von Web 2.0

27 Mocken der Google Maps API: if (!GMap2) { var GMap2 = null; var GLatLng = null; ... } function initGMapMocks() { GLatLng = function(latt, long) { return {latt: latt, long:long}; } GMap2.markers = []; GMap2 = function(id) { GMap2.mapId = id; return GMap2; } GMap2.setCenter = function(focus, zoom) { GMap2.point = focus; GMap2.zoomFactor = zoom; } ... } Johannes Link Testen von Web 2.0

27 Mocken der Google Maps API: if (!GMap2) { // Unit under Test Map.displayMap = function(zoom, var GMap2 = null; focus, var GLatLng = null; showOptimizedPartyLocation, ... markers) {...} } function initGMapMocks() { // Unit Test GLatLng = function(latt, long) { testDisplayMapNoInfo: function() { with(this) { return {latt: latt, long:long}; Map.displayMap(10, } GMap2.markers = []; {long:13.411895,latt:52.523781}, GMap2 = function(id) { false); GMap2.mapId = id; assertEqual(10, GMap2.zoomFactor); return GMap2; assertEqual($(\"map\"), GMap2.mapId); } assertEqual(52.523781, GMap2.point.latt); GMap2.setCenter = function(focus, zoom) { assertEqual(13.411895, GMap2.point.long); GMap2.point = focus; GMap2.zoomFactor = zoom; assertEqual(0, GMap2.markers.length); } }} ... } Johannes Link Testen von Web 2.0

28 Testen asynchroner Codestellen (1): showMap = function(mapInfo) { if (mapInfo.error) { showErrorText(mapInfo.errorText); return; } Map.displayMap(mapInfo.zoom, mapInfo.focus, mapInfo.showOptimal, mapInfo.places); } function addLocation() { var locationDescription = $('descriptionField').value; Server.addLocation(locationDescription, function(mapInfo) { showMap(mapInfo); if (!mapInfo.error) { addLocationEntry(locationDescription); } } ); } Johannes Link Testen von Web 2.0

28 Testen asynchroner Codestellen (1): setup: function() { showMap = function(mapInfo) { mockControl = new MockControl(); if (mapInfo.error) { Server = mockControl.createMock(PLOServer); showErrorText(mapInfo.errorText); Map = mockControl.createMock(Map); return; } } testAddLocationError: function() { with(this) { Map.displayMap(mapInfo.zoom, mapInfo.focus, var mapInfo = {error: false, zoom: 3, focus: \"f\", mapInfo.showOptimal, mapInfo.places); showOptimal: false, places: []}; } Server.expects().addLocation(\"Wiesbaden\", function addLocation() { TypeOf.isA(Function)).andStub(function() { var locationDescription = $('descriptionField').value; closure = arguments[1]; Server.addLocation(locationDescription, closure(mapInfo); function(mapInfo) { } showMap(mapInfo); ); if (!mapInfo.error) { Map.expects().displayMap(mapInfo.zoom,mapInfo.focus, addLocationEntry(locationDescription); mapInfo.showOptimal, mapInfo.places); } $(\"descriptionField\").value = \"Wiesbaden\"; } addLocation(); ); mockControl.verify(); } }} Johannes Link Testen von Web 2.0

29 Testen asynchroner Codestellen (2): showErrorText = function(text) { Element.update('errorText', text); setTimeout(function() { Effect.Fade('errorText', {afterFinish: function() { Element.update('errorText', '') Element.show('errorText'); }} ); }, 5000); } Johannes Link Testen von Web 2.0

29 Testen asynchroner Codestellen (2): testErrorTextAppears: function() { with(this) { showErrorText = function(text) { assertNull($(\"errorText\").firstChild); Element.update('errorText', text); showErrorText(\"error text\"); setTimeout(function() { assertEqual(\"error text\", Effect.Fade('errorText', $(\"errorText\").firstChild.nodeValue); {afterFinish: function() { }} Element.update('errorText', '') Element.show('errorText'); testErrorTextDisappears: function() { with(this) { }} showErrorText(\"error text\"); ); setTimeout(function() { }, 5000); assertNull($(\"errorText\").firstChild); } }, 6000); }} Johannes Link Testen von Web 2.0

30 Mocken der Prototype Ajax-Aufrufe: new Ajax.Request(\"http://server/ajax\", { method: 'post', postBody: '<plo-req>...</plo-req>', contentType: 'text/xml', onComplete: function(transport) { ... }.bind(this) }); setup: function() { mockControl = new MockControl(); mapInfo = null; callback = function() { mapInfo = arguments[0]; } Ajax = mockControl.createMock(Ajax); url = \"http://myserver/ajaxcall\"; server = new PLOServer(url); } Johannes Link Testen von Web 2.0

30 Mocken der Prototype Ajax-Aufrufe: testGetInitialMap: function() { with(this) { new Ajax.Request(\"http://server/ajax\", { method: 'post', Ajax.expect().Request(url,TypeOf.isA(Object)). postBody: '<plo-req>...</plo-req>', andStub(function() { contentType: 'text/xml', onComplete = arguments[1].onComplete; onComplete: function(transport) { onComplete({responseXML: ... createAnswerDom({long: \"1.1\", latt:\"2.2\"}, 5)} }.bind(this) }); ); setup: function() { }); mockControl = new MockControl(); server.getInitialMap(callback); mapInfo = null; assertEqual(5, mapInfo.zoom); callback = function() { assertEqual(1.1, mapInfo.focus.long); mapInfo = arguments[0]; assertEqual(2.2, mapInfo.focus.latt); } Ajax = mockControl.createMock(Ajax); assertEqual(false, mapInfo.showOptimal); url = \"http://myserver/ajaxcall\"; assertEqual(0, mapInfo.places.length); server = new PLOServer(url); mockControl.verify(); } }} Johannes Link Testen von Web 2.0

31 PLO FIT Tests Web-Client HTML + CSS JavaScript Prototype GMaps API Scriptaculous ??? Asynchron XML maps.google.com Server REST Tomcat, Apache Java GeoCoder Servlets Johannes Link Testen von Web 2.0

32 Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0

32 FIT Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0

32 Selenium FIT Server HTTP HTTP Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0

33 AddLocationFixture public class AddLocationFixture extends Fixture { @Override public void doRow(Parse row) { String location = row.parts.text; SystemUnderTest.getPartyLocationOptimizerFacade() .addLocation(location); right(row.parts); } } Johannes Link Testen von Web 2.0

34 Selenium Facade – addLocation public class PartyLocationOptimizerFacadeSelenium... private Selenium selenium = null; public void initialize(String browser, String url) { selenium = new DefaultSelenium(\"localhost\", 4444, browser, url); selenium.start(); selenium.open(url); } public void addLocation(String location) { selenium.type(\"descriptionField\", location); selenium.click(\"addLocationButton\"); selenium.waitForCondition( \"!selenium.isVisible(\\\"id=addIndicator\\\")\", \"5000\"); } Johannes Link Testen von Web 2.0

35 Selenium Facade – Prüfungen public List<Location> getLocations() { ArrayList<Location> locations = new ArrayList<Location>(); for (int i = 1; true; i++) { String location = selenium.getText(\"xpath=//ul[@id='locations']/li[\" + i + \"]\"); ... } return locations; } public String getErrorText() { return selenium.getText(\"id=errorText\"); } public GoogleMap getGoogleMap() { return new GoogleMap(selenium.getValue(\"name=zoom\"), […]); } Johannes Link Testen von Web 2.0

36 Selenium Facade – Drag&Drop public void removeLocation(String location) { // Variante 2: Drag&Drop auf den großen Mülleimer String objectToBeDragged = \"xpath=//ul[@id='locations']//li[span/text()='\" + location + \"']\"; String dragDestinationObject = \"id=trashcan\"; selenium.dragAndDropToObject(objectToBeDragged, dragDestinationObject); selenium.waitForCondition( \"!selenium.isVisible(\\\"id=addIndicator\\\")\", \"5000\"); } Johannes Link Testen von Web 2.0

37 Testen der Schnittstellen • Im Systemtest: Testen der „Fremd-Dienste“ • Ziel 1: Benutze ich die Schnittstelle richtig? • Ziel 2: Unabhängigkeit der Tests von fremden und unkalkulierbaren Einflüssen => Automatisierte Tests werden nie mit dem richtigen Fremdsystem arbeiten Johannes Link Testen von Web 2.0

38 Unabhängigkeit der Systemtests • Problem: Wie mocke ich das Internet? • Attrapen auf Quellcode-Ebene • Auf dem Server • Im Web-Client Johannes Link Testen von Web 2.0

39 Server-Attrappe: GeoCoder Johannes Link Testen von Web 2.0

39 Server-Attrappe: GeoCoder public interface IGeoCoder { Location findLocation( String locationName); } GeoCoderDummy implements IGeoCoder GoogleGeoCoder implements IGeoCoder Johannes Link Testen von Web 2.0

40 Atrappe im Browser: Google Maps API Johannes Link Testen von Web 2.0

41 Selenium FIT Server HTTP HTTP Web GMaps Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0

41 Selenium FIT Server HTTP HTTP Web HTTP GMaps Client HTTP Backdoor Servlet PLO Server Logik GeoCoderDummy GoogleGeoCoder Internet Johannes Link Testen von Web 2.0

41 Selenium FIT Server HTTP HTTP Web HTTP Client HTTP Backdoor Servlet PLO Server Logik GeoCoderDummy Johannes Link Testen von Web 2.0

42 Selenium FIT Server HTTP HTTP Proxy Server Web GMaps Client HTTP HTTP PLO Server Logik GoogleGeoCoder Johannes Link Testen von Web 2.0

42 Selenium FIT Server HTTP HTTP Proxy Server Web GMaps Client HTTP HTTP PLO Server Logik GoogleGeoCoder ??? Johannes Link Testen von Web 2.0

43 Vision: Proxy zur Simulation des Internets • Aufzeichnen und Abspielen von Http- Request und -Response-Paaren • Hürden: • Oft mehrere Requests zu einer Aktion • Zeitliche Zuordnung von Request/Response-Paaren • Stream-basierte Protokolle • Bislang kein Tool auf dem Markt Johannes Link Testen von Web 2.0

44 Last- und Performance-Tests • Setzen meist auf Http-Protokoll auf • „Konventionelles“ Toolset: • JMeter • Grinder • Mehr Performance-Probleme, da mehr Server-Anfragen • Simulation des Internets wird besonders schwierig Johannes Link Testen von Web 2.0

45 Testen in Zeiten des „Mashs“ • Wie stabil ist die fremde Schnittstelle? • Wie stabil bin ich gegenüber „falschem“ Code? • Verfügbarkeit: • Wie verfügbar ist der Dienst? • Was tue ich bei Nicht-Verfügbarkeit? • Denkbar: Automatisierte Kompatibilitäts- und Verfügbarkeitstests an die „Fremd-Dienste“ Johannes Link Testen von Web 2.0

46 Ungelöstes • Browserinkompatibilitäten • CSS & JavaScript • Applikation & Testtools • Komplikationen durch Ajax-Features • Asynchrones Browser-Verhalten • Drag N Drop • ... • Simulation des Internets schwierig • Instabilität und schwankende Verfügbarkeit benutzter Dienste Johannes Link Testen von Web 2.0

47 Fazit • Web 2.0 schafft neue Test-Herausforderungen und verschärft manche alten • Teste im Großen und im Kleinen! • Systemtests mit fachlicher Abstraktion (FIT) • Manuelles Testen wird nicht überflüssig • Teste auf allen zu unterstützenden Browsern • Rechne mit instabilen Schnittstellen Johannes Link Testen von Web 2.0

48 Kudos • Marco Klemm • Frank Westphal Johannes Link Testen von Web 2.0

49 (Einige) Quellen & Referenzen • http://mir.aculo.us/stuff/ AdventuresInJavaScriptTesting.pdf • http://ajaxian.com/by/topic/testing/ • http://ajaxpatterns.org/Browser-Side_Test • http://codebetter.com/blogs/jeremy.miller/ archive/2006/07/15/147400.aspx • http://jlink.blogger.de/stories/414112/ Johannes Link Testen von Web 2.0

Automated Web 2.0 Testing

0 comments

Notes on slide 1

3 Favorites