View on GitHub


Test Coverage
<!doctype html>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link href="" rel="stylesheet" type="text/css"/>
    <link href="example.css" rel="stylesheet" type="text/css"/>

    <link href="images/favicon.png" rel="icon" type="image/png">

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>

    <!-- Hack to get ansi-html to run in the browser -->
    <script type="text/javascript">
      var module = {};
    <script type="text/javascript">
      var ansiHTML = module.exports;
      module = null;

    <script type="text/javascript" src="cucumber.js"></script>
    <script type="text/javascript" src="browser-example.js"></script>
    <div class="header">
      <a href="">
        <img class="cucumber-logo" src="images/cucumber.svg">
      <a href="">
        <img class="github-logo" src="images/github.png">

    <div class="main">
      <ul class="nav nav-pills" role="tablist">
        <li class="active"><a href="#feature-tab" data-toggle="tab">Feature</a></li>
        <li><a href="#step-definitions-tab" data-toggle="tab">Step Definitions</a></li>
        <li><a href="#output-tab" data-toggle="tab">Output</a></li>

      <div class="tab-content">
        <div class="tab-pane active" id="feature-tab">
          <div id="feature">Feature: Simple maths
  In order to do maths
  As a developer
  I want to increment variables

  Scenario: easy maths
    Given a variable set to 1
    When I increment the variable by 1
    Then the variable should contain 2

  Scenario Outline: much more complex stuff
    Given a variable set to &lt;var&gt;
    When I increment the variable by &lt;increment&gt;
    Then the variable should contain &lt;result&gt;

      | var | increment | result |
      | 100 |         5 |    105 |
      |  99 |      1234 |   1333 |
      |  12 |         5 |     18 |</div>
        <div class="tab-pane" id="step-definitions-tab">
          <div id="step-definitions"> // Cucumber and chai have been loaded in the browser
var setWorldConstructor = Cucumber.setWorldConstructor;
var Given = Cucumber.Given;
var When = Cucumber.When;
var Then = Cucumber.Then;
var expect = chai.expect;

///// World /////
// Call 'setWorldConstructor' with to your custom world (optional)

var CustomWorld = function() {
  this.variable = 0;

CustomWorld.prototype.setTo = function(number) {
  this.variable = parseInt(number);

CustomWorld.prototype.incrementBy = function(number) {
  this.variable += parseInt(number);


///// Step definitions /////
// use 'Given', 'When' and 'Then' to declare step definitions

Given('a variable set to {int}', function(number) {

When('I increment the variable by {int}', function(number) {

Then('the variable should contain {int}', function(number) {
        <div class="tab-pane" id="output-tab">
          <pre id="output"></pre>

    <div class="footer">
      <button class="btn" id="run-feature">Run Feature</button>