Web testing with Fitnesse

1. Web testing with Fitnesse Alessandro Marchetto Fondazione Bruno Kessler-IRST, Centro per la Ricerca Scientifica e Tecnologica

2. Web testing using Fitnesse http://fitnesse.org/UsefulFixtures Three kind of web-fixtures can be used: 1.HtmlFixture: based on HtmlUnit http://fitnesse.org/FitNesse.HtmlFixture http://htmlunit.sourceforge.net Improved HtmlFixture: based on the HtmlFixture http://htmlfixtureim.sourceforge.net/ http://htmlfixtureim.sourceforge.net/documentation.shtml 2. WebFixture: based on HtmlUnit https://opensvn.csie.org/traccgi/webfixture/trac.cgi/wiki http://htmlunit.sourceforge.net 3. JWebFixture: based on JWebUnit http://jwebunit.sourceforge.net/index.html

3. XUnit Web tools (1) • HtmlUnit, HTTPUnit, JWebUnit, etc. • They are inspired by JUnit • They let us to verify the functionalities of Web sites • They emulate the relevant portions of browser behavior • form submission, JavaScript, http authentication, • cookies, automatic page redirection, etc. • They allow Java test code to examine returned pages • in terms of text, DOM, or containers of forms, tables, and links • They make it easy to write Junit tests that verify HTTP requests • and responses

4. Set the google page Fill the google form Send the request get the google response verify the response XUnit Web tools (2) Example import junit.framework.TestCase; import com.meterware.httpunit.WebResponse; import com.meterware.httpunit.WebConversation; import com.meterware.httpunit.WebForm; import com.meterware.httpunit.WebRequest; public class SearchExample extends TestCase { public void testSearch() throws Exception { WebConversation wc = new WebConversation(); WebResponse resp = wc.getResponse("http://www.google.com"); WebForm form = resp.getForms()[0]; form.setParameter("q", "HttpUnit"); WebRequest req = form.getRequest("btnG"); resp = wc.getResponse(req); assertNotNull(resp.getLinkWith("HttpUnit")); resp = resp.getLinkWith("HttpUnit").click(); assertEquals(resp.getTitle(), "HttpUnit"); assertNotNull(resp.getLinkWith("User's Manual")); } }

5. HtmlFixture • http://fitnesse.org/FitNesse.HtmlFixture • It is used to exercise and test web pages. • - It allows us make assertions about the structure of a page and to • navigate between pages. • - We can also fire java script, submit forms, "click" links, etc. • - It is based on a fixture that lets us navigate to any element of the • page DOM. • To use this we need some knowledge about the DOM (Document Object Model).

6. HtmlFixture, the improved version • - It is an improved version of the original one. • It is compatible with the original version but the implementation is a • little bit changed. In fact, some advanced behaviors have been added • and some minor problems of the original version are now correct. • In that tutorial the original version is described and the differences with the improved version are only introduced.

7. Installation and Setup (without Eclipse) Download the following packages: Fitnesse: http://fitnesse.org/FitNesse.DownLoad  the zip file with the full distribution HtmlFixture: http://fitnesse.org/files/joeBergin/htmlfixture20050422.jar  the jar library Htmlunit can be found at http://htmlunit.sourceforge.net/  section download  select version 1.5 (old version)  the zip file contains about 19 jar files

8. Installation Steps • 1.Unzip fitnesse.zip • It creates the fitnesse directory with the following files and folders: FitNesseRoot, • README.txt, dotnet, license.txt, fitnesse.jar, run.bat, run.sh • 2.Create a sub-directory /lib in the fitnesse directory • 3.Put all *.jar in the /lib •  htmlfixture*.jar • htmlunit/*.jar • 4.Go to the root/fitnesse folder and double-click run.bat • It starts the Fitnesse server • 5.Start up a browser and go to http://localhost/ • It opens the Fitnesse wiki

9. 6.Write a ProofOfTest page as follows: • !path fitnesse.jar • !path *.jar • !path lib/*.jar • !path classes • !path lib • | !- com.jbergin.HtmlFixture -! | • | http://www.google.com | homePage | • | Elements | >=2 | • 7.Check “Test” in the properties page • 8.Click the Test button

10. 9.Check the results ... It will be:

11. Installation and Setup (with the Eclipse plugin) • 1. In Eclipse • Use http://www.bandxi.com/fitnesse/download.html to install the Fitnesse plugin • 2. Download the HtmlFixture and put it in the desktop • from http://selab.fbk.eu/marchetto/software/fitnesseImproved.zip • (it is a local complete version of the Fitnesse framework enriched by the improved • HtmlFixture) • from the original web site (it needs to be completed with a version of the original • Fitnesse e with the required jars • 3. Unzip it, in the desktop • 4. In Eclipse • - start a new (Tomcat) project • - start Fitnesse for that project (into a project-dir) • - write test cases in the Fitnesse-wiki • !! set the path to the HtmlFixture dir in the desktop

12. Set of needed libraries HTMLFixture URL or the name of an "element" defined earlier list of ordered commands (key sensitive) HtmlFixture table... general structure • !path fitnesse.jar • !path *.jar • !path lib/*.jar • !path classes • !path lib • | !- com.jbergin.HtmlFixture -! | • | http://www.google.com | homePage | • | Elements | >=2 |

13. Commands Element Focus: test or retrieve a given element and make this element the focus of following instructions Element: test or retrieve a given element Elements: test or retrieve the number of child elements Types: assert or retrieve the number of descendants with the specified element name Type: like Element but depth first instead of breadth first TypeFocus: like Element Focus but depth first instead of breadth first Attribute: test or retrieve a given attribute Focus: set the context for the following commands FocusRelative: set the context for the following commands relative to the current focus Text: assert the exact equality of the text of the current element HasText: assert the substring equality of the text of the current element MatchesText: assert the regular expression equality of the text of the current element Execute: assert a script SetValue: "type" text into a form element Submit: follow a link or submit a form Click: synonym for Submit Save: assign the current focus to a named variable for later reference Preserve: do not clear variables when submitting Clear: unbind all variables Nodes: assert or retrieve the number of child nodes (as opposed to elements) of the focused element Node: assert or retrieve the type of the specified node Fail: boolean not; i.e. reverse the sense of a test see http://fitnesse.org/FitNesse.HtmlFixture for the complete list

14. Elements: • | !- com.jbergin.HtmlFixture -! | • | http://www.google.com | homePage | • | Elements | >=2 | • Parameters: • java-like comparison operators (<, <=, >, >=, ==, !=). If no operator is • given, equals (==) is assumed • Assert that the number of child elements (of the current element) • is as specified or query the number of elements if blank. • See http://www.w3.org/TR/html4/index/elements.html for the list of HTML elements

15. Element: • |!-com.jbergin.HtmlFixture -!| • | http://www.cafeconleche.org/petition.phtml | • | Element | t1 | title| • Parameters: • the relative number of the element or its id or name as specified by tag • (2) the tag type (opt) • (3) a name for the cell to be used in the second row of other tables or commands • Assert that the specified child element has a given tag and give • it a name, or query the tag and give it a name.

16. Focus: • | !- com.jbergin.HtmlFixture -! | • | homePage | • | Element | 2 | body | page Body | • | Focus | pageBody | • parameter: • (1) name/url of an element that is to become the focus of assertions • Focus row will refer to the body of the page.

17. Focus Relative • | !- com.jbergin.HtmlFixture -! • | http://www.csis.pace.edu/~bergin | • | Save | berginHome | • | Focus Relative | xp | xpPage | • | Has Text | Sorry. | • will retrieve http://www.csis.pace.edu/~bergin/xp/ • Parameters: • A part of a URL that will extend the page of the current focus. It will be retrieved and it will become the new focus. • (2) An name for the cell (opt)

18. Element Focus • | !- com.jbergin.HtmlFixture -! | • | http://www.csis.pace.edu/~bergin| • | Element Focus | body | page Body | • Its parameters are exactly those of Element and it behaves the same • way except that it also sets this element to be the focus of subsequent • rows. • The current element is saved in the hash map with the given name

19. Save • | !- com.jbergin.HtmlFixture -! • | http://www.csis.pace.edu/~bergin | • | Save | berginHome | • Parameters: • the name to give the current element • The current element is saved in the hash map with the given name

20. Text • | !- com.jbergin.HtmlFixture -! | • | http://www.cafeconleche.org/petition.phtml | • | Element Focus | title | title | • | Text | Petition | • Parameters: • (1) The text in the element (example: title element) (opt) • Assert that the text in the element has the given text, or query for • the text. Requires an exact match

21. Has Text • | !- com.jbergin.HtmlFixture -! | • | http://www.cafeconleche.org/demo/petition.phtml | • |Element Focus | body | body| • | Has Text | Mickey Mouse | • Parameters: • Any substring of the expected text of the element. (opt) • Assert that the parameter is a substring of the actual text. • Note that: • |Has Text |Mickey Mouse| • will find • <p>Mickey <em>Mouse</em></p>

22. Matches Text • | !- com.jbergin.HtmlFixture -! | • | http://www.cafeconleche.org/demo/petition.phtml | • | Element Focus | body | body| • | Has Text | Mickey Mouse | • | Text | Mickey Mouse | • | Matches Text | M.* Mouse | • Parameters: • A regular expression intended to be matched by the text in the element. • Assert that the regular expression is matched by the actual text.

23. Attribute • | !- com.jbergin.HtmlFixture -! | • | http://csis.pace.edu/~bergin/patterns | • | Type Focus | frame | 2 | • | Attribute | src | select.html | select | • | Focus Relative | symbol | select  | • Parameters: • (1) name of the attribute • (2) value of the attribute (opt) • (3) an optional symbolic name for the value of the attribute • Assert that the element has an attribute with the given name and • value or assert that there is an attribute with the name and query • for its value.

24. Execute • |!-com.jbergin.HtmlFixture-!| • | http://www.cafeconleche.org/demo/petition.phtml | • | Element Focus | loadhandler | script | • | Execute | onLoad | • Parameters: • a condition on which to run this java script element. e.g. • onClick. Fire the condition if it is defined for this script element. • Note that the underlying htmlUnit still has only partial support for • javascript.

25. Set Value • |!-com.jbergin.HtmlFixture!-| • | http://www.cafeconleche.org/demo/petition.phtml | • | Element Focus | name | input | • | Set Value|John Doe | • Parameters: • (1) Text to be entered into this (input, textarea, or select) element. • For a submit the text is used to set the selected attribute of the • element. For the others the text is entered. • You can "check" a checkbox using Set Value to checked. If you set • it to an empty string it will be unchecked.

26. Submit • |!-com.jbergin.HtmlFixture!-| • | http://www.cafeconleche.org/demo/petition.phtml | • | Element Focus | name | input | • | Set Value|John Doe | • | Element Focus | email | input | • | Set Value | jdoe@example.com | • | Element Focus | s1 | • | Submit | namePage | • Parameters: • The name of the page returned. • Click this link or submit this form and capture the resulting page. • Click • It is a synonym for Submit. Indeed, it works exactly the same

27. Types • |!-com.jbergin.HtmlFixture-!| • | http://www.google.com | • | Types | h2 | | • …it will return 0 • | Types | input | | • …it will return 7 • Parameters: • A valid type (tag) name (e.g. table or a) • An integer: the asserted number of descendants of the given type (opt) • Assert that the current element has a certain number of descendant • elements of the given type. If the third column is blank it will • query for the number of descendants of that type.

28. Type • | !- com.jbergin.HtmlFixture -! | • | http://www.cafeconleche.org/demo/petition.phtml | • | Type | p | 3 | third | • | Type | table |3 | filler | • | Focus | third | • | Matches Text | laborers.$ | • Parameters: • A valid type (tag) name (e.g. table or a) • An integer index • A name for the resulting element (opt) • Assert that there are at least "index" descendant elements with the • given type. Give the name to the one at "index". If the third • parameter is blank, no name will be given to the resulting element. • Type Focus: Exactly like Type but it also sets the current focus.

29. Nodes • parameters: • the number of child nodes of this item (opt) • Assert that the item has the specified number of children or query • for the number if blank. Note that this one counts all nodes, • not just Element nodes. • Node • parameters • the node index relative to the beginning (one based) • the node (type) name (e.g head,.#text ,...) (opt) • Assert that the specified node has the given type. Or query for the • type if blank. • Note: HTML elements are nodes, attributes are nodes, text is a node

30. Blank Token • | !- com.jbergin.HtmlFixture -! | • | http://csis.pace.edu/~bergin/hello.html| • | Type Focus | title | 1 | titleText | • | Text | $blank$ | • Asserts that the titleText is blank (empty) • Using the Blank Token command, we can specify that an element • should consist of blank text. The default token is “$blank$”.

31. Symbol • | !- com.jbergin.HtmlFixture -! | • | http://www.cafeconleche.org/demo/petition.phtml | • | Symbol | big | > 10 | • | Elements | symbol big | • Parameters: • name for a new symbol • string value of the symbol • You can use this command to give symbolic names to strings you • want to appear in other cells of your tests. This gives a name and a • value to your symbol which may then be used later.

32. List • | !- com.jbergin.HtmlFixture -! | • | http://www.cafeconleche.org/demo/petition.phtml | • | List |values | Charlemagne | Gandhi | Sun Tsu | • | Type Focus | title | 1 | • | Has Text | symbol values[2] | • Parameters: • A name for the list • (2...n) values to be stored in the list. Any string values. • A List is a symbol with a given name but many values. • The values in the symbol can be obtained by indexing from one.

33. Fail • |!-com.jbergin.HtmlFixture-!| • | http://www.cafeconleche.org/demo/petition.phtml | • | Element Focus | body | body| • | Fail | Has Text| Tom Delay | • ... Assert that "Tom Delay" has not signed the petition • |!-com.jbergin.HtmlFixture-!| • | Fail | Elements | 3 | • … Assert that the number of elements is NOT 3. • The fail command is a modifier for many other commands. • You use it by putting Fail in a cell alone, before any other • command (some ignore it). The intent is to reverse the sense • of the test.

34. Note (1): | !- com.jbergin.HtmlFixture -! | is equivalent to !|com.jbergin.HtmlFixture| and to | HtmlFixture | Note (2): It is possible to set some referecens among table, such as: We use this definition use

35. HtmlFixture, the improved version See http://htmlfixtureim.sourceforge.net/documentation.shtml for the complete list of commands provided by the improved version. Some of those commands are: Print Dom: Prints types and attributes of the DOM starting at the current element in an html table Print Cookies: Prints a list of cookies in the web client in table format Cookie: Asserts that the web client has a cookie of by the specified name Timeout: Sets the timeout for the simulated web browser Sleep: Causes the webClient's thread to sleep for specified interval. This allows for use with asyncronous Ajax to allow for the child thread to complete ClickConfirm: Does the same as Click and then clicks OK on any javascript confirm dialog that appears

36. Print Dom • | !- com.jbergin.HtmlFixture -! | • | http://www.cafeconleche.org/demo/petition.phtml | • | Print Dom | | • Parameters: • (1) empty cell for the results • Prints types and attributes of the DOM starting at the current element in an html table. This command is useful for displaying information while writing tests on an existing system or prototype.

37. Print Cookies • parameters(1) empty cell for the resultsPrints a list of cookies in the web client in table format. • ..see the example…

38. * set up web client | HtmlFixture| http://localhost | • | Javascript | on | • | Preserve | on | • * load the cookie test page • * click the button (sets a cookie --- name=favorite_cookie; value=snickerdoodle -- and displays it in an alert box) • * display javascript message to verify the javascript ran ok • print the cookie • | HtmlFixture | • | http://localhost/HtmlFixtureDemo.SetCookieTestPage | • | Element Focus | set_cookies | input | • | Click | cookiePage | • | Javascript Message | • | Print Cookies |

39. Cookie • paramters • (1) cookie name (required) • (1) cookie value (optional) • Asserts that the web client has a cookie of by the specified name. If a value is supplied, asserts that the value of the cookie is as specified. If value is blank, the value of the cookie will be displayed in the blank cell on test. • ..see the example…

40. * go to the cookie page from before • * assert there is a cookie with name=favorite_cookie (pass) • * assert there is a cookie with name=favorite_cookie and display the value (pass) • * assert the cookie value is snickerdoodle (pass) • * assert the cookie value is chocolate chip (fail) • | HtmlFixture | • | cookiePage | • | Cookie | favorite_cookie | • | Cookie | favorite_cookie | snickerdoodle | • | Cookie | favorite_cookie | chocolate chip | • | Fail | Cookie | favorite_cookie | • | Fail | Cookie | favorite_cookie | snickerdoodle | • | Fail | Cookie | favorite_cookie| chocolate chip |

41. Timeout • paramters • (1) time in milliseconds • ets the timeout for the simulated web browser. When loading a page, the browser will wait this amount of time twice - once to set up the connection and once more to get the page. Setting timeout to 0 causes the browser to wait indefinitely. • NOTE: This command also reinitializes the browser. In particular, cookies are reset. • ...see the example…

42. * Sets the timeout to 1 millisecond and requests home page - this will produce Timeout exception exception. Sets infinite timeout and gets the page, sets timeout of 10 seconds and gets the page. • | HtmlFixture | • | joeBody | • | Timeout | 1 | • | Focus | http://www.musiciansfriend.com | • | Timeout | 0 | • | Focus http://www.musiciansfriend.com | • | Timeout | 10000 | • | Focus | http://www.musiciansfriend.com |

43. Sleep • Parameters • (1) time in milliseconds • Causes the client’s thread to sleep for specified interval. • This allows for use with asyncronous Ajax to allow for the child • thread to complete. • NOTE: Ajax is available in development version >06-2006 of • htmlunit.

44. Sample 1 • The sample page • http://www.cafeconleche.org/demo/petition.phtml

45. ...In browser...

46. ...HTML code... <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta id="charset" http-equiv="content-type" content="text/html; charset=utf-8" /> <title id="t1">Petition</title> </head> <body id="body"> <h1 id="h1">Petition</h1> <p>We the undersigned request that Congress declare February 30th to be National Political Integrity day, to provide due recognition of the valuable service done for this country by all its honest politicians. </p> Mickey Mouse<br /> Donald Duck<br /> Goofy<br /> <h2>Add Your Signature:</h2> <form action="sign.phtml" id="sigform"> Name: <input name="name" size="64" id="name"/><br /> Email: <input name="email" size="64" id="email"/><br /> <input type="submit" id="s1"/> </form> </body> </html>

47. Sample - Test signing the petition - |!-com.jbergin.HtmlFixture!-| | http://www.cafeconleche.org/demo/petition.phtml | | Element Focus | name | input | | Set Value | John Doe | | Element Focus | email | input | | Set Value | jdoe@example.com | | Element Focus | s1 | | Submit | | Element Focus | body | body | | Has Text | John Doe |

48. Sample 2 • The google seach • Get the page at http://www.google.com • Put the string “IRST” in the input field • Click the submit button • Verify it the returned page contains the string “www.itc.it/irst/ ”

49. Where we search this element? It is possible to find this? Get/Post ? Wrong table !path fitnesse.jar !path *.jar !path lib/*.jar !path classes !path lib |!-com.jbergin.HtmlFixture-!| | http://www.google.com | | Element Focus | q | input | | Set Value | IRST | | Element Focus | btnI | button| | Submit | | Has Text | www.itc.it/irst |

50. Right table !path fitnesse.jar !path *.jar !path lib/*.jar !path classes !path lib |!-com.jbergin.HtmlFixture-!| | http://www.google.com | requestPage| | Focus | requestPage | | Element Focus | q | input | textField | | Set Value | IRST | | Focus | requestPage | | Element Focus | f | form | | Submit | search | | Has Text | www.itc.it/irst |