Testen von Web 2.0
                  Neue Herausforderungen oder
               alter Wein in neuen Schläuchen?

Johannes ...
2

Agenda
•   Wer bin ich?
•   Aspekte des automatisierten Testens
•   Herausforderungen bei Web 2.0
•   Techniken und Wer...
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




Johanne...
4

Testaspekte
• Unit Tests aller selbst entwickelten
  Komponenten
• Systemtest der Gesamtapplikation
   • aus technische...
4

Testaspekte
• Unit Tests aller selbst entwickelten
  Komponenten
• Systemtest der Gesamtapplikation
   • aus technische...
4

Testaspekte
• Unit Tests aller selbst entwickelten
  Komponenten
• Systemtest der Gesamtapplikation
   • aus technische...
5
                 Web-Client
                HTML + CSS
                JavaScript
                 Prototype
           ...
5
                 Web-Client
                HTML + CSS
                JavaScript
                 Prototype
           ...
5
                 Web-Client
                HTML + CSS
                JavaScript
                 Prototype
           ...
5
                  Web-Client
                 HTML + CSS
                 JavaScript
                  Prototype
       ...
5
                  Web-Client
                 HTML + CSS
                 JavaScript
                  Prototype
       ...
5
                  Web-Client
                 HTML + CSS            Plug-Ins
                 JavaScript
               ...
5
                  Web-Client
                 HTML + CSS            Plug-Ins
                 JavaScript
               ...
5
                  Web-Client
                 HTML + CSS            Plug-Ins
                 JavaScript
               ...
5
                  Web-Client
                 HTML + CSS            Plug-Ins
                 JavaScript
               ...
6

Herausforderungen
• Ajax-Technologie-Mix (JavaScript, Java etc.)
• Verteilung
• Einbindung entfernter Komponenten
   • ...
7
                                                           Was können
              Web-Client
                         ...
7
                                                           Was können
              Web-Client
                         ...
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 a...
10

Unit Tests mit JavaScript
• Im Browser
   • Scriptaculous Testing Framework
   • JSUnit x 2, J3Unit, ...
• Browserunab...
11
Scriptaculous Testing
Framework
• http://wiki.script.aculo.us/
  scriptaculous/show/UnitTesting
• Testfälle werden auf ...
12
Scriptaculous Test Framework Beispiel:
<html>...
    <script src=quot;../../js/prototype.jsquot; type=quot;text/javascr...
12
Scriptaculous Test Framework Beispiel:
<html>...
    <script src=quot;../../js/prototype.jsquot; type=quot;text/javascr...
13

JsTester
• http://jstester.sourceforge.net/
• Vorteile:
   • JavaScript-Code kann auf Server-Seite ausgeführt
     und...
14
JsMock: http://
jsmock.sourceforge.net/
  Object to mock:            Unit Test:
 var Speaker = {             testSpeake...
15

Systemtests
• Möglichst Test aller integrierten Komponenten
• Webclient-Steuerung
   • Im richtigen Browser: Selenium,...
16
Oberflächenorientierte
Kundentests
• Abstraktion: Bedienung der Oberfläche
• Selenium
   • Der „richtige“ Browser als T...
16
Oberflächenorientierte
Kundentests
• Abstraktion: Bedienung der Oberfläche
• Selenium
   • Der „richtige“ Browser als T...
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
• ...
20
Fachlich orientiertes Framework:
               FIT
Framework for Integrated Tests
• Abstraktion: Sprache des Kunden
• ...
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
...
21

Warum FIT?
• Testsprache frei definierbar
• Tests können vor der Implementierung
  definiert werden
• Entkopplung von ...
21

Warum FIT?
• Testsprache frei definierbar
• Tests können vor der Implementierung
  definiert werden
• Entkopplung von ...
22

FIT...
1. liest HTML-Dokumente ein,
2. führt die enthaltenen Testfälle aus
3. reichert HTML um Testergebnis an
4. gibt...
23




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 lo...
24
Angriffs-                  Web
                           Client
punkte
fachlicher
Tests                  Presentation
...
24
Angriffs-                  Web
                           Client
punkte
fachlicher
Tests                  Presentation
...
24
Angriffs-                  Web
                           Client
punkte
fachlicher
Tests                  Presentation
...
24
Angriffs-                  Web
                           Client
punkte
fachlicher                              WebTest...
24
Angriffs-                  Web
                           Client
punkte
                                        Seleniu...
24
Angriffs-                  Web
                           Client
punkte
                                        Seleniu...
24
Angriffs-                  Web
                           Client
punkte
                                        Seleniu...
25

Wie verbinde ich Fit mit Ajax?
• Verwendung der Business Facade (Server)
• Http-Protokoll
   • HtmlUnit
   • WebTest?
...
26
                                      PLO Unit Tests
               Web-Client
              HTML + CSS
              J...
26
                                      PLO Unit Tests
               Web-Client
              HTML + CSS
              J...
27
   Mocken der Google Maps API:
if (!GMap2) {
      var GMap2 = null;
      var GLatLng = null;
      ...
}
function ini...
27
   Mocken der Google Maps API:
if (!GMap2) {                                     // Unit under Test
                   ...
28

  Testen asynchroner Codestellen (1):
showMap = function(mapInfo) {
     if (mapInfo.error) {
         showErrorText(m...
28

  Testen asynchroner Codestellen (1):
                                                              setup: function() ...
29

 Testen asynchroner Codestellen (2):
showErrorText = function(text) {
     Element.update('errorText', text);
     set...
29

 Testen asynchroner Codestellen (2):
                                          testErrorTextAppears: function() { with...
29

 Testen asynchroner Codestellen (2):
                                          testErrorTextAppears: function() { with...
29

 Testen asynchroner Codestellen (2):
                                          testErrorTextAppears: function() { with...
30
   Mocken der Prototype Ajax-Aufrufe:
new Ajax.Request(quot;http://server/ajaxquot;, {
    method: 'post',
    postBody...
30
   Mocken der Prototype Ajax-Aufrufe:
                                           testGetInitialMap: function() { with(t...
31
                                      PLO FIT Tests
               Web-Client
              HTML + CSS
              Ja...
31
                                      PLO FIT Tests
               Web-Client
              HTML + CSS
              Ja...
32




                        Web
                        Client

                             HTTP

                    ...
32
                     FIT



                              Web
                              Client

                   ...
32
                                   Selenium
                     FIT
                                    Server
       ...
33

AddLocationFixture
public class AddLocationFixture extends Fixture {
    @Override
    public void doRow(Parse row) {
...
33

AddLocationFixture
public class AddLocationFixture extends Fixture {
    @Override
    public void doRow(Parse row) {
...
34

Selenium Facade – addLocation
 public class PartyLocationOptimizerFacadeSelenium...
    private Selenium selenium = nu...
35

Selenium Facade – Prüfungen
public List<Location> getLocations() {

   ArrayList<Location> locations = new ArrayList<L...
36

Selenium Facade – Drag&Drop
public void removeLocation(String location) {
    // Variante 2: Drag&Drop auf den großen ...
37

Testen der Schnittstellen
• Im Systemtest: Testen der
  „Fremd-Dienste“
• Ziel 1: Benutze ich die Schnittstelle
  rich...
38

Unabhängigkeit der Systemtests
• Problem: Wie mocke ich das Internet?
• Attrapen auf Quellcode-Ebene
   • Auf dem Serv...
39

Server-Attrappe: GeoCoder




Johannes Link
Testen von Web 2.0
39

Server-Attrappe: GeoCoder

                                     public interface IGeoCoder {
                         ...
39

Server-Attrappe: GeoCoder

                                     public interface IGeoCoder {
                         ...
40
Atrappe im Browser:
Google Maps API




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
       ...
41
                                             Selenium
                         FIT
                                    ...
41
                                            Selenium
                         FIT
                                     ...
42
                                            Selenium
                         FIT
                                     ...
42
                                            Selenium
                         FIT
                                     ...
42
                                            Selenium
                         FIT
                                     ...
43
Vision: Proxy zur Simulation des
Internets
• Aufzeichnen und Abspielen von Http-
  Request und -Response-Paaren
• Hürde...
44

Last- und Performance-Tests
• Setzen meist auf Http-Protokoll auf
• „Konventionelles“ Toolset:
   • JMeter
   • Grinde...
45

Testen in Zeiten des „Mashs“
• Wie stabil ist die fremde Schnittstelle?
• Wie stabil bin ich gegenüber
  „falschem“ Co...
46

Ungelöstes
• Browserinkompatibilitäten
   • CSS & JavaScript
   • Applikation & Testtools
• Komplikationen durch Ajax-...
47

Fazit
• Web 2.0 schafft neue Test-Herausforderungen
  und verschärft manche alten
• Teste im Großen und im Kleinen!
• ...
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...
Upcoming SlideShare
Loading in …5
×

Automated Web 2.0 Testing

6,814
-1

Published on

My presentation on the Webinale 2007. It has some overlap with the recent JAX talk on testdriven Ajax.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,814
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Automated Web 2.0 Testing

  1. 1. Testen von Web 2.0 Neue Herausforderungen oder alter Wein in neuen Schläuchen? Johannes Link johanneslink.net
  2. 2. 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. 3. 3 Wer ich bin... Johannes Link Testen von Web 2.0
  4. 4. 3 Wer ich bin... • (Extremer) Softwareentwickler Johannes Link Testen von Web 2.0
  5. 5. 3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach Johannes Link Testen von Web 2.0
  6. 6. 3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach • Testgetrieben Johannes Link Testen von Web 2.0
  7. 7. 3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach • Testgetrieben • Mein eigener Chef Johannes Link Testen von Web 2.0
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 5 Web-Client HTML + CSS JavaScript Prototype Scriptaculous Dojo DWR (client lib) Johannes Link Testen von Web 2.0
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 8 PLO Beispiel: Party Location Optimizer Johannes Link Testen von Web 2.0
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 12 Scriptaculous Test Framework Beispiel: <html>... <script src=quot;../../js/prototype.jsquot; type=quot;text/javascriptquot;></script> <script src=quot;../../js/scriptaculous/unittest.jsquot; type=quot;text/ javascriptquot;></script> <body> <!-- Log output --> <div id=quot;testlogquot;></div> <!-- here go any elements you do the testing on --> <script type=quot;text/javascriptquot; language=quot;javascriptquot;> function myAdder(op1, op2) { return op1 + op2; } </script> <!-- Tests --> <script type=quot;text/javascriptquot; language=quot;javascriptquot;> // <![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
  28. 28. 12 Scriptaculous Test Framework Beispiel: <html>... <script src=quot;../../js/prototype.jsquot; type=quot;text/javascriptquot;></script> <script src=quot;../../js/scriptaculous/unittest.jsquot; type=quot;text/ javascriptquot;></script> <body> <!-- Log output --> <div id=quot;testlogquot;></div> <!-- here go any elements you do the testing on --> <script type=quot;text/javascriptquot; language=quot;javascriptquot;> function myAdder(op1, op2) { return op1 + op2; } </script> <!-- Tests --> <script type=quot;text/javascriptquot; language=quot;javascriptquot;> // <![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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 17 Selenium Johannes Link Testen von Web 2.0
  35. 35. 18 Canoo WebTest: Ant-Skript Johannes Link Testen von Web 2.0
  36. 36. 19 Canoo WebTest: Groovy Johannes Link Testen von Web 2.0
  37. 37. 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
  38. 38. 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
  39. 39. 21 Warum FIT? Johannes Link Testen von Web 2.0
  40. 40. 21 Warum FIT? • Testsprache frei definierbar Johannes Link Testen von Web 2.0
  41. 41. 21 Warum FIT? • Testsprache frei definierbar • Tests können vor der Implementierung definiert werden Johannes Link Testen von Web 2.0
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 23 Johannes Link Testen von Web 2.0
  46. 46. 23 Johannes Link Testen von Web 2.0
  47. 47. 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
  48. 48. 24 Angriffs- Web Client punkte fachlicher Tests Presentation Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0
  49. 49. 24 Angriffs- Web Client punkte fachlicher Tests Presentation Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0
  50. 50. 24 Angriffs- Web Client punkte fachlicher Tests Presentation Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0
  51. 51. 24 Angriffs- Web Client punkte fachlicher WebTest Tests Presentation HTMLUnit Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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($(quot;mapquot;), 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
  60. 60. 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
  61. 61. 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: quot;fquot;, mapInfo.showOptimal, mapInfo.places); showOptimal: false, places: []}; } Server.expects().addLocation(quot;Wiesbadenquot;, 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); } $(quot;descriptionFieldquot;).value = quot;Wiesbadenquot;; } addLocation(); ); mockControl.verify(); } }} Johannes Link Testen von Web 2.0
  62. 62. 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
  63. 63. 29 Testen asynchroner Codestellen (2): testErrorTextAppears: function() { with(this) { showErrorText = function(text) { assertNull($(quot;errorTextquot;).firstChild); Element.update('errorText', text); showErrorText(quot;error textquot;); setTimeout(function() { assertEqual(quot;error textquot;, Effect.Fade('errorText', $(quot;errorTextquot;).firstChild.nodeValue); {afterFinish: function() { }} Element.update('errorText', '') Element.show('errorText'); testErrorTextDisappears: function() { with(this) { }} showErrorText(quot;error textquot;); ); setTimeout(function() { }, 5000); assertNull($(quot;errorTextquot;).firstChild); } }, 6000); }} Johannes Link Testen von Web 2.0
  64. 64. 29 Testen asynchroner Codestellen (2): testErrorTextAppears: function() { with(this) { showErrorText = function(text) { assertNull($(quot;errorTextquot;).firstChild); Element.update('errorText', text); showErrorText(quot;error textquot;); setTimeout(function() { assertEqual(quot;error textquot;, Effect.Fade('errorText', $(quot;errorTextquot;).firstChild.nodeValue); {afterFinish: function() { }} Element.update('errorText', '') Element.show('errorText'); testErrorTextDisappears: function() { with(this) { }} showErrorText(quot;error textquot;); ); setTimeout(function() { }, 5000); assertNull($(quot;errorTextquot;).firstChild); } }, 6000); }} Johannes Link Testen von Web 2.0
  65. 65. 29 Testen asynchroner Codestellen (2): testErrorTextAppears: function() { with(this) { showErrorText = function(text) { assertNull($(quot;errorTextquot;).firstChild); Element.update('errorText', text); showErrorText(quot;error textquot;); setTimeout(function() { assertEqual(quot;error textquot;, Effect.Fade('errorText', $(quot;errorTextquot;).firstChild.nodeValue); {afterFinish: function() { }} Element.update('errorText', '') Element.show('errorText'); testErrorTextDisappears: function() { with(this) { }} showErrorText(quot;error textquot;); ); setTimeout(function() { }, 5000); assertNull($(quot;errorTextquot;).firstChild); } }, 6000); }} Johannes Link Testen von Web 2.0
  66. 66. 30 Mocken der Prototype Ajax-Aufrufe: new Ajax.Request(quot;http://server/ajaxquot;, { 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 = quot;http://myserver/ajaxcallquot;; server = new PLOServer(url); } Johannes Link Testen von Web 2.0
  67. 67. 30 Mocken der Prototype Ajax-Aufrufe: testGetInitialMap: function() { with(this) { new Ajax.Request(quot;http://server/ajaxquot;, { 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: quot;1.1quot;, latt:quot;2.2quot;}, 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 = quot;http://myserver/ajaxcallquot;; assertEqual(0, mapInfo.places.length); server = new PLOServer(url); mockControl.verify(); } }} Johannes Link Testen von Web 2.0
  68. 68. 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
  69. 69. 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
  70. 70. 32 Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  71. 71. 32 FIT Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  72. 72. 32 Selenium FIT Server HTTP HTTP Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  73. 73. 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
  74. 74. 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
  75. 75. 34 Selenium Facade – addLocation public class PartyLocationOptimizerFacadeSelenium... private Selenium selenium = null; public void initialize(String browser, String url) { selenium = new DefaultSelenium(quot;localhostquot;, 4444, browser, url); selenium.start(); selenium.open(url); } public void addLocation(String location) { selenium.type(quot;descriptionFieldquot;, location); selenium.click(quot;addLocationButtonquot;); selenium.waitForCondition( quot;!selenium.isVisible(quot;id=addIndicatorquot;)quot;, quot;5000quot;); } Johannes Link Testen von Web 2.0
  76. 76. 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(quot;xpath=//ul[@id='locations']/li[quot; + i + quot;]quot;); ... } return locations; } public String getErrorText() { return selenium.getText(quot;id=errorTextquot;); } public GoogleMap getGoogleMap() { return new GoogleMap(selenium.getValue(quot;name=zoomquot;), […]); } Johannes Link Testen von Web 2.0
  77. 77. 36 Selenium Facade – Drag&Drop public void removeLocation(String location) { // Variante 2: Drag&Drop auf den großen Mülleimer String objectToBeDragged = quot;xpath=//ul[@id='locations']//li[span/text()='quot; + location + quot;']quot;; String dragDestinationObject = quot;id=trashcanquot;; selenium.dragAndDropToObject(objectToBeDragged, dragDestinationObject); selenium.waitForCondition( quot;!selenium.isVisible(quot;id=addIndicatorquot;)quot;, quot;5000quot;); } Johannes Link Testen von Web 2.0
  78. 78. 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
  79. 79. 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
  80. 80. 39 Server-Attrappe: GeoCoder Johannes Link Testen von Web 2.0
  81. 81. 39 Server-Attrappe: GeoCoder public interface IGeoCoder { Location findLocation( String locationName); } GeoCoderDummy implements IGeoCoder GoogleGeoCoder implements IGeoCoder Johannes Link Testen von Web 2.0
  82. 82. 39 Server-Attrappe: GeoCoder public interface IGeoCoder { Location findLocation( String locationName); } GeoCoderDummy implements IGeoCoder GoogleGeoCoder implements IGeoCoder Johannes Link Testen von Web 2.0
  83. 83. 40 Atrappe im Browser: Google Maps API Johannes Link Testen von Web 2.0
  84. 84. 40 Atrappe im Browser: Google Maps API Johannes Link Testen von Web 2.0
  85. 85. 41 Selenium FIT Server HTTP HTTP Web GMaps Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  86. 86. 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
  87. 87. 41 Selenium FIT Server HTTP HTTP Web HTTP Client HTTP Backdoor Servlet PLO Server Logik GeoCoderDummy Johannes Link Testen von Web 2.0
  88. 88. 42 Selenium FIT Server HTTP HTTP Proxy Server Web GMaps Client HTTP HTTP PLO Server Logik GoogleGeoCoder Johannes Link Testen von Web 2.0
  89. 89. 42 Selenium FIT Server HTTP HTTP Proxy Server Web GMaps Client HTTP HTTP PLO Server Logik GoogleGeoCoder Johannes Link Testen von Web 2.0
  90. 90. 42 Selenium FIT Server HTTP HTTP Proxy Server Web GMaps Client HTTP HTTP PLO Server Logik GoogleGeoCoder ??? Johannes Link Testen von Web 2.0
  91. 91. 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
  92. 92. 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
  93. 93. 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
  94. 94. 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
  95. 95. 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
  96. 96. 48 Kudos • Marco Klemm • Frank Westphal Johannes Link Testen von Web 2.0
  97. 97. 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

×