Geister, Gurken und Halbmetalle. Tools für Web-UI-Acceptance-Tests. Malte Clasen

Transkript

1 Geister, Gurken und Halbmetalle Tools für Web-UI-Acceptance-Tests Malte Clasen

2 Folien und Code Herbstcampus 2013 Geister, Gurken und Halbmetalle 2

3 Problem: Spezifikation typischer Fall: Mündliche Überlieferung Herbstcampus 2013 Geister, Gurken und Halbmetalle 3

4 Beispiel: Rezept-Ansicht Herbstcampus 2013 Geister, Gurken und Halbmetalle 4

5 Beispiel: Rezept-Editor Herbstcampus 2013 Geister, Gurken und Halbmetalle 5

6 Demo: Rezept-Editor Herbstcampus 2013 Geister, Gurken und Halbmetalle 6

7 Problem: Was passiert wenn......mehr als drei Kategorien hinzugefügt werden sollen? (Layout-Begrenzung)...eine Menge ohne Zutat eingegeben wird? (ungültige Daten)...der Titel einer Komponente geändert wird? (interaktive Aktualisierung)... Herbstcampus 2013 Geister, Gurken und Halbmetalle 7

8 Flow Foto: Charles J Sharp; licensed under the Creative Commons Attribution 2.5 Generic license; Herbstcampus 2013 Geister, Gurken und Halbmetalle 8

9 Flow-Voraussetzungen deutliche Ziele (unmittelbare Rückmeldung) weder Unter- noch Überforderung Konzentration Herbstcampus 2013 Geister, Gurken und Halbmetalle 9

10 Idee: Wenn-Dann-Liste Wenn ich mehr als drei Kategorien eingeben will, müssen da eben mehr Felder hin. Problem: Woran erkennt man den Willen? deutliche Ziele (unmittelbare Rückmeldung) Herbstcampus 2013 Geister, Gurken und Halbmetalle 10

11 konkretisierte Wenn-Dann-Liste nur tatsächliche Handlungen erfassen nur tatsächliche Ergebnisse prüfen Herbstcampus 2013 Geister, Gurken und Halbmetalle 11

12 Beispiel: Kategorien Wenn ich alle Kategorie-Felder ausgefüllt habe, soll ein zusätzliches leeres erscheinen. Wenn ich ein Feld leere, dann soll es verschwinden.... Herbstcampus 2013 Geister, Gurken und Halbmetalle 12

13 Problem: Automatisiert Testen automatischer Abgleich von natürlichsprachiger Spezifikation und Produkt nicht trivial deutliche Ziele (unmittelbare Rückmeldung) Herbstcampus 2013 Geister, Gurken und Halbmetalle 13

14 formalisierte Wenn-Dann-Liste: Gherkin Scenario: Dynamically Add Category Fields Given I am on the "Streuselkuchen" recipe page And I am in edit mode When I click on the empty category field And I type "Blechkuchen" Then there should be 4 category fields And there should be an empty category field in vielen Sprachen verfügbar für alle lesbar, aber praktisch nur für Programmierer schreibbar Herbstcampus 2013 Geister, Gurken und Halbmetalle 14

15 Implementierung type ""(.*)""")] public void WhenIType(string text) { CurrentElement.SendKeys(text); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 15

16 Gherkin-Compiler Ruby: Cucumber Java: Cucumber-JVM SpecFlow Herbstcampus 2013 Geister, Gurken und Halbmetalle 16

17 Demo: SpecFlow Herbstcampus 2013 Geister, Gurken und Halbmetalle 17

18 Problem: Prozess Spezifikation sollte vor Implementierung existieren. Test könnte prinzipiell vor Implementierung existieren. Ist das sinnvoll? Herbstcampus 2013 Geister, Gurken und Halbmetalle 18

19 Ansatz: Behavior-Driven Development Write failing acceptance test Write failing unit test Make unit test pass Refactor Herbstcampus 2013 Geister, Gurken und Halbmetalle 19

20 Problem: Detailgrad bei Tests click on the first preparation text")] public void WhenIClickOnTheFirstPreparationComponentText() { CurrentElement = FindDisplayed(By.XPath( "//form[@id='recipeeditor']// h2[.='zubereitung']/following-sibling::h3[1]/ following-sibling::div [@contenteditable='true'][1]")); CurrentElement.Click(); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 20

21 Ansatz: Abstraktion mögliche Lösung: Abstraktion über HTML- Ausgabe Problem: Wird nur für Acceptance-Tests benötigt, dafür oft zu schwergewichtig Herbstcampus 2013 Geister, Gurken und Halbmetalle 21

22 Ansatz: Platzhalter-Tests Fake-Test-Driven: click on the first preparation text")] public void WhenIClickOnTheFirstPreparationComponentText() { Assert.Fail(); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 22

23 Motivation Write failing acceptance test Write failing unit test Make unit test pass Refactor Entwicklung erfolgt auf Unit-Test-Ebene formalisierte Spezifikation als Ziel ausreichend HTML-Interface profitiert nur bedingt von TDD, Ziel sind Designer und Suchmaschinen Herbstcampus 2013 Geister, Gurken und Halbmetalle 23

24 Tools: Test-Framework Java JUnit, TestNG, MSTest nunit, xunit.net, Herbstcampus 2013 Geister, Gurken und Halbmetalle 24

25 Tools: Kontinuierliche Tests Java: Infinitest NCrunch deutliche Ziele (unmittelbare Rückmeldung) Herbstcampus 2013 Geister, Gurken und Halbmetalle 25

26 Demo: NCrunch Herbstcampus 2013 Geister, Gurken und Halbmetalle 26

27 Problem: Test-Implementierung Wie lässt sich prüfen, ob eine Web-Anwendung der Spezifikation entspricht? Herbstcampus 2013 Geister, Gurken und Halbmetalle 27

28 Ansatz: Browser-Fernsteuerung Spezifikation aus Anwender-Sicht geschrieben Anwender interagieren mit Browser Test sollte Spezifikation mit Browser prüfen Herbstcampus 2013 Geister, Gurken und Halbmetalle 28

29 Tools: Browser-Fernsteuerung Selenium unterstützt gängige Desktop-Browser Firefox Chrome Internet Explorer Herbstcampus 2013 Geister, Gurken und Halbmetalle 29

30 Navigation am on the homepage")] public void GivenIAmOnTheHomepage() { Web.Navigate().GoToUrl(WebUiContext.RootUrl); WebUiContext.CatchLog(); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 30

31 JavaScript injizieren public void CatchLog() { _driver.executescript(@"console.defaultlog=console.log; console.log=function(msg){console.defaultlog(msg); console.logfile+=msg+'\n';};"); } public string Log { get { return console.logfile;"); } } Herbstcampus 2013 Geister, Gurken und Halbmetalle 31

32 Mausklicks follow the ""(.*)"" link")] public void WhenIFollowTheLink(string linktext) { Web.FindElementByLinkText(linkText).Click(); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 32

33 Tastatureingaben type ""(.*)""")] public void WhenIType(string text) { CurrentElement.SendKeys(text); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 33

34 Abfragen des DOM über XPath should be the component ""(.*)""")] public void ThenThereShouldBeTheComponent(string title) { EnsureIsInViewOrPreview(); Web.FindElements(By.XPath(ViewXPathPrefix + "//h3")).should().contain(e => e.text == title); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 34

35 Code-Sharing für View und Editor private string ViewXPathPrefix { get { EnsureIsInViewOrPreview(); return IsInView? "//div[@id='recipe']" : "//form[@id='recipeeditor']"; } } Herbstcampus 2013 Geister, Gurken und Halbmetalle 35

36 Beispiel: Rezept-Abfrage And the component "Teig" should contain 400 g Mehl <h2>zutaten</h2> <h3>teig</h3> <table class="table table-condensed"> <tbody> <tr class="ingredient"> <td class="amount">400</td> <td class="unit">g</td> <td class="name"> <a href="/mehl">mehl</a></td> </tr> </tbody> </table> Herbstcampus 2013 Geister, Gurken und Halbmetalle 36

37 Beispiel: Rezept-Abfrage, Code component ""(.*)"" should contain (.*) (.*) (.*)")] public void ThenTheComponentShouldContain(string component, float amount, string unit, string ingredientname) { var classfilter = IsInView? "" : string.format("[contains(@class, '{0}')]", EditClass); Web.FindElements(By.XPath( string.format(viewxpathprefix + "//h2[.='zutaten']/following-sibling::h3[.='{0}']/" + "following-sibling::table{4}//tr[td[1][.='{1}']" + " and td[2][.='{2}'] and td[3][.='{3}']]", component, amount, unit, ingredientname, classfilter))).should().notbeempty(); } Herbstcampus 2013 Geister, Gurken und Halbmetalle 37

38 XPath-Ausdrücke konkrete Elemente: FireBug: Inspect Element, Copy XPath parametrisierte Ausdrücke: Debugger Herbstcampus 2013 Geister, Gurken und Halbmetalle 38

39 Praxis: Chrome-Ausführung Herbstcampus 2013 Geister, Gurken und Halbmetalle 39

40 Demo: Chrome via Selenium Herbstcampus 2013 Geister, Gurken und Halbmetalle 40

41 Problem: Browser-Fenster Browser-Fenster erfordert einen Desktop: Problem auf Continuous-Integration-Servern Browser-Fenster poppt auf: Stört ungemein bei kontinuierlichem Testen Herbstcampus 2013 Geister, Gurken und Halbmetalle 41

42 Ansatz: Headless Browser Wenn der Browser sowieso ferngesteuert wird, braucht er eigentlich kein Fenster Herbstcampus 2013 Geister, Gurken und Halbmetalle 42

43 Tool: PhantomJS Selenium-kompatibel nah an Chrome und Safari schnell (kein Rendering) Herbstcampus 2013 Geister, Gurken und Halbmetalle 43

44 Praxis: PhantomJS Herbstcampus 2013 Geister, Gurken und Halbmetalle 44

45 Demo: PhantomJS via Selenium Herbstcampus 2013 Geister, Gurken und Halbmetalle 45

46 Set Up, Tear Down: Komponenten Server Web Driver Herbstcampus 2013 Geister, Gurken und Halbmetalle 46

47 Set Up, Tear Down: Lebenszyklus pro Feature pro Scenario Herbstcampus 2013 Geister, Gurken und Halbmetalle 47

48 Erfahrung: Spezifikationsproblem Auftraggeber möchte sich nicht festlegen Entwickler denken sich etwas aus Sauber getestete Software, die hervorragend das tut, was niemand braucht Overhead für die Acceptance-Tests reduzieren die Bereitschaft für Änderungen Herbstcampus 2013 Geister, Gurken und Halbmetalle 48

49 Erfahrung: Spezifikationsproblem BDD funktioniert nur, wenn sich jemand von der Auftragsseite darauf einlässt Herbstcampus 2013 Geister, Gurken und Halbmetalle 49

50 Zusammenfassung Behavior Driven Development mit Gherkin Tools: Cucumber, Cucumber-JVM, Specflow Selenium PhantomJS Interaktion: Selenium-API XPath JavaScript Folien, Code: Beratung, Training: Herbstcampus 2013 Geister, Gurken und Halbmetalle 50

51 Vielen Dank! Malte Clasen