culerity - headless full stack testing for javascript

43
Culerity Headless Fullstack Testing for Web Applications see github.com/langalex/culerity

Upload: thilo-utke

Post on 13-May-2015

2.992 views

Category:

Technology


1 download

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

CulerityHeadless Fullstack Testing for Web

Applications

see github.com/langalex/culerity

Page 2: Culerity - Headless full stack testing for JavaScript

Look How ’s talking!

Page 3: Culerity - Headless full stack testing for JavaScript

Thilo with a H!

github.com/thilo

Page 4: Culerity - Headless full stack testing for JavaScript

1st Thursday every Month, rug-b.de

Page 5: Culerity - Headless full stack testing for JavaScript

coworking-space, co-up.de

Page 6: Culerity - Headless full stack testing for JavaScript

UPSTREAM

my company, upstre.am

Page 7: Culerity - Headless full stack testing for JavaScript

we done lot of web appsour own latest product: co-bot.me

Page 8: Culerity - Headless full stack testing for JavaScript

Done all apps test driven

Page 9: Culerity - Headless full stack testing for JavaScript

Problem

we have unit tests for all our code.And some integration tests.But....

Page 10: Culerity - Headless full stack testing for JavaScript

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

2 Flavors

Page 12: Culerity - Headless full stack testing for JavaScript

In Browserrun your test in an actual browser by scripting it

Page 13: Culerity - Headless full stack testing for JavaScript

Headlesssome software only "Browser"

Page 14: Culerity - Headless full stack testing for JavaScript

Properties of Headless Testing

Page 15: Culerity - Headless full stack testing for JavaScript

Consistent Behavior

Page 16: Culerity - Headless full stack testing for JavaScript

Direct API for Interaction

Page 17: Culerity - Headless full stack testing for JavaScript

Enter Culerity

First solution to test web apps full-stack including Javascript with ruby

Page 18: Culerity - Headless full stack testing for JavaScript

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
Page 20: Culerity - Headless full stack testing for JavaScript

written in ruby

Page 21: Culerity - Headless full stack testing for JavaScript

PlainText Acceptance Test

Uses a human readable DSL to specify test cases

Page 22: Culerity - Headless full stack testing for JavaScript

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

Culerity

Page 24: Culerity - Headless full stack testing for JavaScript

mostly rubysmall part runs in Jruby

Page 25: Culerity - Headless full stack testing for JavaScript

Proxy Library

Page 26: Culerity - Headless full stack testing for JavaScript

Interaction - Low Level

can be used without webrat.

Page 27: Culerity - Headless full stack testing for JavaScript

Can get complicated!finding a link either by text, id, title or partial matching text

Page 28: Culerity - Headless full stack testing for JavaScript

Cucumber Steps that uses the Proxy

provides easy cucumber steps that wraps interaction

Page 29: Culerity - Headless full stack testing for JavaScript

Celerity

Page 30: Culerity - Headless full stack testing for JavaScript

in Jruby

Page 31: Culerity - Headless full stack testing for JavaScript

Api Wrapper for HTML Unit

Page 32: Culerity - Headless full stack testing for JavaScript

HtmlUnit

Page 33: Culerity - Headless full stack testing for JavaScript

pure Jave

Page 34: Culerity - Headless full stack testing for JavaScript

GUI-Less browser

so no fancy gui to show here

Page 35: Culerity - Headless full stack testing for JavaScript

simulates browser behavior of Firefox2, Firefox3 or IE

Page 36: Culerity - Headless full stack testing for JavaScript

Rhino

JavaScript implementation in Java

part of html that does the javascript

Page 37: Culerity - Headless full stack testing for JavaScript

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

Action

see code at github.com/thilo/culerity_talk_src

Page 39: Culerity - Headless full stack testing for JavaScript

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

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

Thanks!

Page 42: Culerity - Headless full stack testing for JavaScript

Questions ?

Page 43: Culerity - Headless full stack testing for JavaScript

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