culerity - headless full stack testing for javascript
DESCRIPTION
This is a presentation i gave at the Java Script User group (twitter.com/berlinjs). It is about testing your entire web application including javascript without opening a browser for that.TRANSCRIPT
![Page 1: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/1.jpg)
CulerityHeadless Fullstack Testing for Web
Applications
see github.com/langalex/culerity
![Page 2: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/2.jpg)
Look How ’s talking!
![Page 3: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/3.jpg)
Thilo with a H!
github.com/thilo
![Page 4: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/4.jpg)
1st Thursday every Month, rug-b.de
![Page 5: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/5.jpg)
coworking-space, co-up.de
![Page 6: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/6.jpg)
UPSTREAM
my company, upstre.am
![Page 7: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/7.jpg)
we done lot of web appsour own latest product: co-bot.me
![Page 8: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/8.jpg)
Done all apps test driven
![Page 9: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/9.jpg)
Problem
we have unit tests for all our code.And some integration tests.But....
![Page 10: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/10.jpg)
Does it work as a whole?
All the bits and pieces fit together?I could test manuallyIt is CumbersomeBetter Automate it too, we are developers
![Page 11: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/11.jpg)
2 Flavors
![Page 12: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/12.jpg)
In Browserrun your test in an actual browser by scripting it
![Page 13: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/13.jpg)
Headlesssome software only "Browser"
![Page 14: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/14.jpg)
Properties of Headless Testing
![Page 15: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/15.jpg)
Consistent Behavior
![Page 16: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/16.jpg)
Direct API for Interaction
![Page 17: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/17.jpg)
Enter Culerity
First solution to test web apps full-stack including Javascript with ruby
![Page 18: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/18.jpg)
The Components
(Cucumber)
Culerity
Celerity
HtmlUnit
Rhino
culerity is just a part, but an important one
![Page 19: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/19.jpg)
![Page 20: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/20.jpg)
written in ruby
![Page 21: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/21.jpg)
PlainText Acceptance Test
Uses a human readable DSL to specify test cases
![Page 22: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/22.jpg)
Matched agains Test Steps
each line is matched against a step which implements logicsteps include, setup (Given), interaction (When), assertions (Then)
![Page 23: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/23.jpg)
Culerity
![Page 24: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/24.jpg)
mostly rubysmall part runs in Jruby
![Page 25: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/25.jpg)
Proxy Library
![Page 26: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/26.jpg)
Interaction - Low Level
can be used without webrat.
![Page 27: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/27.jpg)
Can get complicated!finding a link either by text, id, title or partial matching text
![Page 28: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/28.jpg)
Cucumber Steps that uses the Proxy
provides easy cucumber steps that wraps interaction
![Page 29: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/29.jpg)
Celerity
![Page 30: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/30.jpg)
in Jruby
![Page 31: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/31.jpg)
Api Wrapper for HTML Unit
![Page 32: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/32.jpg)
HtmlUnit
![Page 33: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/33.jpg)
pure Jave
![Page 34: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/34.jpg)
GUI-Less browser
so no fancy gui to show here
![Page 35: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/35.jpg)
simulates browser behavior of Firefox2, Firefox3 or IE
![Page 36: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/36.jpg)
Rhino
JavaScript implementation in Java
part of html that does the javascript
![Page 37: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/37.jpg)
How it fits togetherCulerity
CelerityServer
HTMLUnit
BrowserProxyObjectProxy
CelerityBrowser
Above line ruby, below Jruby1. Culerity starts Celerity Server as a Subprocess in Jruby - Serialize back end forth Calls through STDIN and STDOUT2. Browser Proxy object controls a Celerity Browser instance3. ObjectProxies are created for non literal Results when interacting with the celerity browser
![Page 38: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/38.jpg)
Action
see code at github.com/thilo/culerity_talk_src
![Page 39: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/39.jpg)
Shortcomings
• Dynamic Changes only on element level (wrapping div)
• Blocks have no access to context
• HTMLUnit Bugs
• Extra Process
![Page 40: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/40.jpg)
The Future is Now!Some other solutions with improvements- Only one Test Process with Ruby Java Bridge - Steam- Mutli Backends - With Capybara- Javascript Only Dom Enviroment on Rhino - Env-Js (since 2007)
![Page 41: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/41.jpg)
Thanks!
![Page 42: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/42.jpg)
Questions ?
![Page 43: Culerity - Headless full stack testing for JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/55532ab8b4c905a7778b54af/html5/thumbnails/43.jpg)
Credits• http://www.flickr.com/photos/montyhood/4414773547/
• jruby.org
• ruby.org
• http://www.mozilla.org/rhino/
• http://hubblesite.org/gallery/album/entire/pr2001025a/
• FF, IE, Java Logo from wikipedia
• Rug-B Logo Copyright by Nico Hagenburger
• Cucumber Logo from cukes.info by Gideon Bullock