diff --git a/tests/frontend/index.html b/tests/frontend/index.html
index 6c3a587f..70158052 100644
--- a/tests/frontend/index.html
+++ b/tests/frontend/index.html
@@ -5,10 +5,12 @@
 
     <link rel="stylesheet" href="runner.css" />
 
+    <div id="console"></div>
     <div id="mocha"></div>
     <div id="iframe-container"></div>
 
     <script src="/static/js/jquery.js"></script>
+    <script src="http://underscorejs.org/underscore.js"></script>
 
     <script src="lib/mocha.js"></script>
     <script> mocha.setup('bdd') </script>
diff --git a/tests/frontend/runner.css b/tests/frontend/runner.css
index ff43d806..91c7431f 100644
--- a/tests/frontend/runner.css
+++ b/tests/frontend/runner.css
@@ -8,6 +8,10 @@ body {
   height: 100%;
 }
 
+#console {
+  display: none;
+}
+
 #iframe-container {
   width: 50%;
   height: 100%;
diff --git a/tests/frontend/runner.js b/tests/frontend/runner.js
index 1abc90c1..a1fcdde2 100644
--- a/tests/frontend/runner.js
+++ b/tests/frontend/runner.js
@@ -1,4 +1,76 @@
 $(function(){
+  var WebdriverAndHtmlReporter = function(html_reporter){
+    return function(runner){
+      //initalize the html reporter first
+      html_reporter(runner);
+
+      var $console = $("#console");
+      var level = 0;
+      var append = function(){
+        var text = Array.prototype.join.apply(arguments, [" "]);
+        var oldText = $console.text();
+
+        var space = "";
+        for(var i=0;i<level*2;i++){
+          space+=" ";
+        }
+
+        //indent all lines with the given amount of space
+        var newText = _(text.split("\n")).map(function(line){
+          return space + line;
+        }).join("\n");
+
+        $console.text(oldText + newText + "\n");
+      }
+
+      runner.on('suite', function(suite){
+        if (suite.root) return;
+
+        append(suite.title);
+        level++;
+      });
+
+      runner.on('suite end', function(suite){
+        if (suite.root) return;
+        level--;
+
+        if(level == 0) {
+          append("");
+        }
+      });
+
+      runner.on('test end', function(test){
+        if ('passed' == test.state) {
+          append("->","PASSED :", test.title);
+        } else if (test.pending) {
+          append("->","PENDING:", test.title);
+        } else {
+          var err = test.err.stack || test.err.toString();
+
+          // FF / Opera do not add the message
+          if (!~err.indexOf(test.err.message)) {
+            err = test.err.message + '\n' + err;
+          }
+
+          // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
+          // check for the result of the stringifying.
+          if ('[object Error]' == err) err = test.err.message;
+
+          // Safari doesn't give you a stack. Let's at least provide a source line.
+          if (!test.err.stack && test.err.sourceURL && test.err.line !== undefined) {
+            err += "\n(" + test.err.sourceURL + ":" + test.err.line + ")";
+          }
+
+          append("->","FAILED :", test.title, err);
+        }
+      });
+
+      runner.on('end', function(){
+        append("FINISHED");
+      });
+    }
+  }
+
   //allow cross iframe access
   if ((!$.browser.msie) && (!($.browser.mozilla && $.browser.version.indexOf("1.8.") == 0))) {
     document.domain = document.domain; // for comet
@@ -14,7 +86,6 @@ $(function(){
   //get the list of specs and filter it if requested
   var specs = specs_list.slice();
   
-
   //inject spec scripts into the dom
   var $body = $('body');
   $.each(specs, function(i, spec){
@@ -24,12 +95,15 @@ $(function(){
   //initalize the test helper
   helper.init(function(){
 	  //configure and start the test framework
-	  //mocha.suite.timeout(5000);
     var grep = getURLParameter("grep");
     if(grep != "null"){
       mocha.grep(grep);
     }
+
 	  mocha.ignoreLeaks();
-		mocha.run();
+		
+    mocha.reporter(WebdriverAndHtmlReporter(mocha._reporter));
+
+    mocha.run();
   });
 });
\ No newline at end of file