Testen und Debuggen von Webanwendungen

Transkript

1 Testen und Debuggen von Webanwendungen Leif Singer Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web

2 Übersicht Grundlagen Usability-Tests Last-Tests Testen & Debuggen von JavaScript Automatisierte funktionale Tests 2

3 GRUNDLAGEN 3

4 Grundlagen die meisten Webanwendungen trennen nach MVC Django, Rails, Grails, Symfony, Play,... Model klassische Unit-Tests, ggf. Mock für Datenbank View in funktionalen Tests enthalten View / User Experience per Usability Tests Controller Mocks für HTTP-Umgebung, Datenbank 4

5 Klassisch: das Model testen (hier: Play) public class SearchTest extends UnitTest public void setup() { // ggf. Testdaten laden Fixtures.load("test-data.yml"); } public void teardown() { // Testdaten löschen Fixtures.deleteAll(); } /*... */ 5

6 Klassisch: das Model testen (hier: public void testsearchtags() { User user = new User("max@example.org", "geheim", "Max", "Muster").save(); List<User> found = Search.searchForUsers("Max", "Muster"); asserttrue(found.contains(user)); assertequals(1, found.size()); found = Search.searchForUsers("uste"); asserttrue(found.contains(user)); assertequals(1, found.size()); } found = Search.searchForUsers("zzz..."); assertfalse(found.contains(user)); 6

7 Controller mit HTTP-Mocks (hier: Grails) package com.acme.sampleapp class FooController { def somerender = {!render "bar" } def someredirect = {!redirect(action:"bar") } } Controller Mocks für HTTP-Umgebung, Datenbank 7

8 Controller mit HTTP-Mocks (hier: Grails) package com.acme.sampleapp class FooControllerTests extends grails.test.controllerunittestcase { void testsomerender() { controller.somerender()! assertequals "bar", controller.response.contentasstring } void testsomeredirect() { controller.someredirect() assertequals "bar", controller.redirectargs.action } } Controller Mocks für HTTP-Umgebung, Datenbank 8

9 USABILITY-TESTS 9

10 Usability-Tests klassisch: repräsentative Anwender werden eingeladen unter Beobachtung Aufgaben erledigen Ausstattung Kamera(s) Eye Tracker Personal Usability Experte Anwender (sweet spot nach Nielsen: 5) teuer 10

11 Usability-Tests Crowd Sourcing Umfang geringer aber bezahlbar bspw. per Amazon Mechanical Turk feedbackarmy.com 11

12 Usability-Tests Crowd Sourcing Umfang geringer aber bezahlbar bspw. per Amazon Mechanical Turk feedbackarmy.com 12

13 Usability-Tests fivesecondtest.com Freemium -Modell minimaler Aufwand 13

14 Usability-Tests usertesting.com Video, laut denken Anbieter wählt Tester aus Tester werden bewertet 14

15 LAST-TESTS 15

16 Last-Tests Szenarien skripten und parallel Benutzer simulieren bspw. mit Apache JMeter zeigt Verhalten der Anwendung unter Last findet problematische Aktionen ausgezeichneter Nachweis für Optimierungen Skripte mit Browser per Proxy aufzeichnen manuelle Anpassungen nötig 16

17 Last-Tests 17

18 Last-Tests 18

19 Last-Tests Schritt 1 Schritt 2 Schritt 3 Schritt 4 Schritt 5 Schritt 6 Schritt 7 Schritt 8 Schritt 9 Schritt 10 Schritt 11 Schritt 12 Schritt 13 Schritt 14 Schritt 15 Schritt 16 Schritt 17 Schritt 18 Schritt 19 Schritt 20 Schritt 21 Schritt 22 Schritt 23 TOTAL Label # Samples Average Median 90% Line Min Max Error % Throughput KB/sec ,84935E+15 2,09881E ,82643E+16 6,59306E ,81476E+16 5,87421E ,81262E+14 7,80299E ,80288E+16 8,81332E ,08696E+16 1,814E+16 8,66676E ,08696E+16 1,79445E+16 8,99431E ,08696E+16 1,78753E+16 7,43616E ,08696E+16 1,77225E+16 8,4487E ,01429E+16 9,73832E ,9926E+16 9,85228E ,98797E+15 8,36607E ,97323E+16 9,40555E ,94239E+15 8,75131E ,91329E+16 9,1343E ,90367E+16 8,72039E ,86813E+15 7,07876E ,80515E+15 8,25478E ,78352E+16 7,83009E ,77133E+16 7,45459E ,77109E+16 7,9995E ,76712E+15 6,45643E ,76984E+16 2,0194E ,90295E+16 3,18794E+15 1,71999E+16 19

20 Last-Tests 9000 Antwortzeit vorher [ms] Antwortzeit nachher [ms] Antwortzeiten für Protokoll anlegen und löschen Schritt 1 Schritt 2 Schritt 3 Schritt 4 Schritt 5 Schritt 6 Schritt 7 Schritt 8 Schritt 9 Schritt 10 Schritt 11 Schritt 12 Schritt 13 Schritt 14 Schritt 15 Schritt 16 Schritt 17 Schritt 18 Schritt 19 Schritt 20 Schritt 21 Schritt 22 Schritt 23 20

21 TESTEN & DEBUGGEN VON JAVASCRIPT 21

22 Testen & Debuggen von JavaScript WebKit Inspector / Firebug 22

23 Testen & Debuggen von JavaScript WebKit Inspector / Firebug 23

24 Testen & Debuggen von JavaScript WebKit Inspector / Firebug 24

25 Testen & Debuggen von JavaScript WebKit Inspector / Firebug 25

26 Testen & Debuggen von JavaScript WebKit Inspector / Firebug viele Hilfsmittel, um besser zu verstehen, was genau passiert 26

27 Testen & Debuggen von JavaScript BDD: Behaviour-Driven Development TDD mit Tests, die auch die Geschäftsseite verstehen kann, oder... eine Art Anforderungen zu schreiben, die sich direkt in Tests übersetzen lassen Ziel: Mißverständnisse vermeiden durch explizite Annahmen Sprachkonventionen 27

28 Testen & Debuggen von JavaScript Zurückgegebene Waren gehen zurück ins Lager Szenario 1: Zurückgegebene Waren gehen zurück ins Lager Vorausgesetzt, ein Kunde kauft einen schwarzen Hut und es sind noch drei schwarze Hüte im Lager; wenn der Kunde den Hut zurückgibt, dann sollten vier schwarze Hüte im Lager sein. 28

29 Testen & Debuggen von JavaScript Zurückgegebene Waren gehen zurück ins Lager Szenario 2: Zurückgegebene Waren gehen zurück ins Lager Vorausgesetzt, ein Kunde hat einen blauen Hut gekauft und es sind zwei blaue Hüte im Lager und es sind drei schwarze Hüte im Lager; wenn der Kunde den Hut für einen Ersatz in schwarz zurückgibt, dann sollten drei blaue Hüte im Lager sein und es sollten zwei schwarze Hüte im Lager sein. 29

30 Testen & Debuggen von JavaScript Zurückgegebene Waren gehen zurück ins Lager Szenario 2: Zurückgegebene Waren gehen zurück ins Lager Vorausgesetzt, ein Kunde hat einen blauen Hut gekauft und es sind zwei blaue Hüte im Lager und es sind drei schwarze Hüte im Lager; wenn der Kunde den Hut für einen Ersatz in schwarz zurückgibt, dann sollten drei blaue Hüte im Lager sein und es sollten zwei schwarze Hüte im Lager sein. das kann ein Mitarbeiter des Ladens verstehen und bemerken: was geschieht mit Waren, die zurückgegeben werden und beschädigt sind? Nicht ins Lager! Kommunikation zwischen IT & Geschäft wird gefördert 30

31 Testen & Debuggen von JavaScript JSSpec: BDD für JavaScript describe('plus operator', { 'should concatenate two strings': function() { expect("hello " + "World").should_be("Hello World"); }, 'should add two numbers': function() { expect(1 + 2).should_be(3); } }) 31

32 Testen & Debuggen von JavaScript JSSpec: BDD für JavaScript 32

33 AUTOMATISIERTE FUNKTIONALE TESTS 33

34 Automatisierte funktionale Tests Funktioniert alles im Zusammenspiel? Wird der Benutzer beim Registrieren so angelegt, dass er sich danach gleich anmelden kann? Kann man kritische Funktionen wirklich nicht ausführen, wenn man kein Administrator ist? Frameworks, um das zu skripten: WebTest, Selenium teilweise auch mit Aufnahmefunktion Perfekt für Abnahmetests: einmal skripten, immer wieder ausführen ermöglicht auch TDD für Webanwendungen! 34

35 DEMO: WEBTEST 35

36 Automatisierte funktionale Tests Abnahmetests einfach skripten auch TDD möglich Grails bspw. hat WebTest integriert JavaScript, AJAX, etc. leider schwierig HTMLUnit 36

37 Zusammenfassung Grundlagen Testen teilweise etwas anders viel zu mocken, verschiedene Sprachen Usability-Tests Crowdsourcing für kleine Budgets Last-Tests Referenz für Optimierungen Testen & Debuggen von JavaScript WebKit Inspector / Firebug, BDD Automatisierte funktionale Tests Abnahmetests auf Knopfdruck überprüfen 37