SlideShare ist ein Scribd-Unternehmen logo
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
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
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
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=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
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
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
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
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




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
Tests                  Presentation



                      Business Facade



                          Domain
                         Location

                               Map




                       Persistence /
 Johannes Link
                         Internet
 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
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
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
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($(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
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: 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
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($(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
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
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
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
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
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
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
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(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
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
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
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
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
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
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

Weitere ähnliche Inhalte

Andere mochten auch

Ein interaktives Schulbuch für den Geschichtsunterricht
Ein interaktives Schulbuch für den GeschichtsunterrichtEin interaktives Schulbuch für den Geschichtsunterricht
Ein interaktives Schulbuch für den Geschichtsunterricht
akoenig
 
Social Media und Jobs. Warum wir keine Social-Media-Rockstars einstellen
Social Media und Jobs. Warum wir keine Social-Media-Rockstars einstellenSocial Media und Jobs. Warum wir keine Social-Media-Rockstars einstellen
Social Media und Jobs. Warum wir keine Social-Media-Rockstars einstellen
Wolfgang Luenenbuerger-Reidenbach
 
Podpimp Tweetacademy 291009 Handout2
Podpimp  Tweetacademy 291009  Handout2Podpimp  Tweetacademy 291009  Handout2
Podpimp Tweetacademy 291009 Handout2
Alexander Wunschel
 
De Mees 2
De Mees 2De Mees 2
De Mees 2
elke
 
Open Learning - Power to the people
Open Learning - Power to the peopleOpen Learning - Power to the people
Open Learning - Power to the people
Anja C. Wagner
 
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach GeschichteWikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
akoenig
 
Maennerweinen 1
Maennerweinen 1Maennerweinen 1
Maennerweinen 1
dokeos
 
Wer Soll Hier Fahren
Wer Soll Hier FahrenWer Soll Hier Fahren
Wer Soll Hier Fahren
dokeos
 
The Long Tail
The Long TailThe Long Tail
The Long Tail
Anja C. Wagner
 
Papagei
PapageiPapagei
Papagei
dokeos
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTdd
jlink
 
Willkommen in der Hölle George Bush.
 Willkommen in der Hölle George Bush. Willkommen in der Hölle George Bush.
Willkommen in der Hölle George Bush.
dokeos
 
Adam und Eva
Adam und EvaAdam und Eva
Adam und Eva
braten
 
Moodlemoot2008
Moodlemoot2008Moodlemoot2008
Moodlemoot2008
akoenig
 
Gruppenarbeit zum Lernerfolg
Gruppenarbeit zum LernerfolgGruppenarbeit zum Lernerfolg
Gruppenarbeit zum Lernerfolg
Berufsausbildung und Berufsvorbereitung
 
Keynote zu einem Panel bei den Medientagen 2006
Keynote zu einem Panel bei den Medientagen 2006Keynote zu einem Panel bei den Medientagen 2006
Keynote zu einem Panel bei den Medientagen 2006
Wolfgang Luenenbuerger-Reidenbach
 

Andere mochten auch (20)

Ein interaktives Schulbuch für den Geschichtsunterricht
Ein interaktives Schulbuch für den GeschichtsunterrichtEin interaktives Schulbuch für den Geschichtsunterricht
Ein interaktives Schulbuch für den Geschichtsunterricht
 
Social Media und Jobs. Warum wir keine Social-Media-Rockstars einstellen
Social Media und Jobs. Warum wir keine Social-Media-Rockstars einstellenSocial Media und Jobs. Warum wir keine Social-Media-Rockstars einstellen
Social Media und Jobs. Warum wir keine Social-Media-Rockstars einstellen
 
Podpimp Tweetacademy 291009 Handout2
Podpimp  Tweetacademy 291009  Handout2Podpimp  Tweetacademy 291009  Handout2
Podpimp Tweetacademy 291009 Handout2
 
De Mees 2
De Mees 2De Mees 2
De Mees 2
 
Konflikte
KonflikteKonflikte
Konflikte
 
Gruppenarbeit demographie
Gruppenarbeit demographieGruppenarbeit demographie
Gruppenarbeit demographie
 
Open Learning - Power to the people
Open Learning - Power to the peopleOpen Learning - Power to the people
Open Learning - Power to the people
 
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach GeschichteWikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
 
Maennerweinen 1
Maennerweinen 1Maennerweinen 1
Maennerweinen 1
 
Wer Soll Hier Fahren
Wer Soll Hier FahrenWer Soll Hier Fahren
Wer Soll Hier Fahren
 
The Long Tail
The Long TailThe Long Tail
The Long Tail
 
Papagei
PapageiPapagei
Papagei
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTdd
 
Willkommen in der Hölle George Bush.
 Willkommen in der Hölle George Bush. Willkommen in der Hölle George Bush.
Willkommen in der Hölle George Bush.
 
Adam und Eva
Adam und EvaAdam und Eva
Adam und Eva
 
Moodlemoot2008
Moodlemoot2008Moodlemoot2008
Moodlemoot2008
 
5
55
5
 
Gruppenarbeit zum Lernerfolg
Gruppenarbeit zum LernerfolgGruppenarbeit zum Lernerfolg
Gruppenarbeit zum Lernerfolg
 
Keynote zu einem Panel bei den Medientagen 2006
Keynote zu einem Panel bei den Medientagen 2006Keynote zu einem Panel bei den Medientagen 2006
Keynote zu einem Panel bei den Medientagen 2006
 
Gruppenarbeit lernerfolg
Gruppenarbeit lernerfolgGruppenarbeit lernerfolg
Gruppenarbeit lernerfolg
 

Ähnlich wie Automated Web 2.0 Testing

Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
GFU Cyrus AG
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
A. LE
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
Virttoo org
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
adesso AG
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere REST
Martin Abraham
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!
Sandro Sonntag
 
Django - The Web framework for perfectionists with deadlines
Django - The Web framework for perfectionists with deadlinesDjango - The Web framework for perfectionists with deadlines
Django - The Web framework for perfectionists with deadlines
Markus Zapke-Gründemann
 
HTTP und Java Servlets Programmierung
HTTP und Java Servlets ProgrammierungHTTP und Java Servlets Programmierung
HTTP und Java Servlets Programmierung
Christian Baranowski
 
Ajax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on RailsAjax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on Rails
Jonathan Weiss
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Björn Wilmsmann
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
Sinan Akalın
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
NETUserGroupBern
 
Ajax, Comet & Co.
Ajax, Comet & Co.Ajax, Comet & Co.
Ajax, Comet & Co.
Roman Roelofsen
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
Tobias Kraft
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 

Ähnlich wie Automated Web 2.0 Testing (20)

Ruby on Rails SS09 11
Ruby on Rails SS09 11Ruby on Rails SS09 11
Ruby on Rails SS09 11
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Java Servlets und AJAX
Java Servlets und AJAX Java Servlets und AJAX
Java Servlets und AJAX
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere REST
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!
 
Django - The Web framework for perfectionists with deadlines
Django - The Web framework for perfectionists with deadlinesDjango - The Web framework for perfectionists with deadlines
Django - The Web framework for perfectionists with deadlines
 
GWT
GWTGWT
GWT
 
HTTP und Java Servlets Programmierung
HTTP und Java Servlets ProgrammierungHTTP und Java Servlets Programmierung
HTTP und Java Servlets Programmierung
 
Ajax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on RailsAjax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on Rails
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
 
Ajax, Comet & Co.
Ajax, Comet & Co.Ajax, Comet & Co.
Ajax, Comet & Co.
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 

Mehr von jlink

Mein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-EntwicklerMein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-Entwickler
jlink
 
Java Script Ist Anders
Java Script Ist AndersJava Script Ist Anders
Java Script Ist Anders
jlink
 
Agile08: Test Driven Ajax
Agile08: Test Driven AjaxAgile08: Test Driven Ajax
Agile08: Test Driven Ajax
jlink
 
Behaviour-Driven Development
Behaviour-Driven DevelopmentBehaviour-Driven Development
Behaviour-Driven Development
jlink
 
Mehr Dynamik Durch Skriptsprachen
Mehr Dynamik Durch SkriptsprachenMehr Dynamik Durch Skriptsprachen
Mehr Dynamik Durch Skriptsprachen
jlink
 
Mehr Dynamik Mit Groovy
Mehr Dynamik Mit GroovyMehr Dynamik Mit Groovy
Mehr Dynamik Mit Groovy
jlink
 
Von Java Zu Groovy
Von Java Zu GroovyVon Java Zu Groovy
Von Java Zu Groovy
jlink
 
XP Day Germany 2006 - Keynote
XP Day Germany 2006 - KeynoteXP Day Germany 2006 - Keynote
XP Day Germany 2006 - Keynote
jlink
 
Testgetriebene Softwareentwicklung
Testgetriebene SoftwareentwicklungTestgetriebene Softwareentwicklung
Testgetriebene Softwareentwicklung
jlink
 

Mehr von jlink (9)

Mein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-EntwicklerMein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-Entwickler
 
Java Script Ist Anders
Java Script Ist AndersJava Script Ist Anders
Java Script Ist Anders
 
Agile08: Test Driven Ajax
Agile08: Test Driven AjaxAgile08: Test Driven Ajax
Agile08: Test Driven Ajax
 
Behaviour-Driven Development
Behaviour-Driven DevelopmentBehaviour-Driven Development
Behaviour-Driven Development
 
Mehr Dynamik Durch Skriptsprachen
Mehr Dynamik Durch SkriptsprachenMehr Dynamik Durch Skriptsprachen
Mehr Dynamik Durch Skriptsprachen
 
Mehr Dynamik Mit Groovy
Mehr Dynamik Mit GroovyMehr Dynamik Mit Groovy
Mehr Dynamik Mit Groovy
 
Von Java Zu Groovy
Von Java Zu GroovyVon Java Zu Groovy
Von Java Zu Groovy
 
XP Day Germany 2006 - Keynote
XP Day Germany 2006 - KeynoteXP Day Germany 2006 - Keynote
XP Day Germany 2006 - Keynote
 
Testgetriebene Softwareentwicklung
Testgetriebene SoftwareentwicklungTestgetriebene Softwareentwicklung
Testgetriebene Softwareentwicklung
 

Automated Web 2.0 Testing

  • 1. Testen von Web 2.0 Neue Herausforderungen oder alter Wein in neuen Schläuchen? Johannes Link johanneslink.net
  • 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 Wer ich bin... Johannes Link Testen von Web 2.0
  • 4. 3 Wer ich bin... • (Extremer) Softwareentwickler Johannes Link Testen von Web 2.0
  • 5. 3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach Johannes Link Testen von Web 2.0
  • 6. 3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach • Testgetrieben Johannes Link Testen von Web 2.0
  • 7. 3 Wer ich bin... • (Extremer) Softwareentwickler • (Agiler) Coach • Testgetrieben • Mein eigener Chef Johannes Link Testen von Web 2.0
  • 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. 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. 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. 5 Web-Client HTML + CSS JavaScript Prototype Scriptaculous Dojo DWR (client lib) Johannes Link Testen von Web 2.0
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 8 PLO Beispiel: Party Location Optimizer Johannes Link Testen von Web 2.0
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 35. 18 Canoo WebTest: Ant-Skript Johannes Link Testen von Web 2.0
  • 36. 19 Canoo WebTest: Groovy Johannes Link Testen von Web 2.0
  • 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. 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
  • 40. 21 Warum FIT? • Testsprache frei definierbar Johannes Link Testen von Web 2.0
  • 41. 21 Warum FIT? • Testsprache frei definierbar • Tests können vor der Implementierung definiert werden Johannes Link Testen von Web 2.0
  • 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. 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. 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
  • 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. 24 Angriffs- Web Client punkte fachlicher Tests Presentation Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0
  • 49. 24 Angriffs- Web Client punkte fachlicher Tests Presentation Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0
  • 50. 24 Angriffs- Web Client punkte fachlicher Tests Presentation Business Facade Domain Location Map Persistence / Johannes Link Internet Testen von Web 2.0
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32 Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  • 71. 32 FIT Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  • 72. 32 Selenium FIT Server HTTP HTTP Web Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  • 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. 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. 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. 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. 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. 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. 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
  • 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. 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. 40 Atrappe im Browser: Google Maps API Johannes Link Testen von Web 2.0
  • 84. 40 Atrappe im Browser: Google Maps API Johannes Link Testen von Web 2.0
  • 85. 41 Selenium FIT Server HTTP HTTP Web GMaps Client HTTP PLO Server Logik GoogleGeoCoder Internet Johannes Link Testen von Web 2.0
  • 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. 41 Selenium FIT Server HTTP HTTP Web HTTP Client HTTP Backdoor Servlet PLO Server Logik GeoCoderDummy Johannes Link Testen von Web 2.0
  • 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. 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. 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. 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. 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. 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. 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. 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. 48 Kudos • Marco Klemm • Frank Westphal Johannes Link Testen von Web 2.0
  • 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