Chapter 7. Debugging

This chapter shows how you can use the browser object to inspect some internal states of your application.

Topics covered in this chapter include:

By default, Zombie does not output the internal events to the console, but you can run Zombie with the DEBUG environment variable set to true. If you have a UNIX shell command line, you can prefix the launching of your test suite with DEBUG=true, shown as follows:

$ DEBUG=true node_modules/.bin/mocha test/todos

If you are running Windows, you can set and unset the DEBUG environment variable shown as follows:

$ SET DEBUG=true
$ SET DEBUG=

By enabling this environment variable, Zombie will output every HTTP request that it makes, along with the received HTTP status code:

…
Zombie: GET http://localhost:3000/js/todos.js => 200
Zombie: 303 => http://localhost:3000/todos
Zombie: GET http://localhost:3000/todos => 200
Zombie: GET http://localhost:3000/js/jquery-1.8.2.js => 200
Zombie: GET http://localhost:3000/js/jquery-ui.js => 200
Zombie: GET http://localhost:3000/js/todos.js => 200
Zombie: GET http://localhost:3000/js/bootstrap.min.js => 200
…

Note

As you can see, Zombie also reports all the 3xx-class HTTP redirects and what the new URL is.

This output may be helpful for debugging some URL loading problems, but it can be hard to track down which test a specific HTTP request is referring to.

Fortunately, there is a way to bring some clarification to the test output by changing the Mocha reporter. Mocha comes with a feature called reporters. So far we've used the default reporter, which reports a colored point for every test. But if you specify the spec reporter, Mocha outputs the test name right before the test starts and right after the test ends.

To enable the spec reporter, just add -R spec to the Mocha arguments shown as follows:

$ DEBUG=true node_modules/.bin/mocha -R spec test/todos

This way you will get an output that is similar to the following:

...
      . should start with an empty list: Zombie: GET http://localhost:3000/session/new => 200
Zombie: GET http://localhost:3000/js/jquery-1.8.2.js => 200
Zombie: GET http://localhost:3000/js/jquery-ui.js => 200
Zombie: GET http://localhost:3000/js/bootstrap.min.js => 200
Zombie: GET http://localhost:3000/js/todos.js => 200
Zombie: 302 => http://localhost:3000/todos
Zombie: GET http://localhost:3000/todos => 200
Zombie: GET http://localhost:3000/js/jquery-1.8.2.js => 200
Zombie: GET http://localhost:3000/js/jquery-ui.js => 200
Zombie: GET http://localhost:3000/js/todos.js => 200
Zombie: GET http://localhost:3000/js/bootstrap.min.js => 200
      ✓ should start with an empty list (378ms)
      . should not load when the user is not logged in: Zombie: 303 => http://localhost:3000/session/new
Zombie: GET http://localhost:3000/session/new => 200
Zombie: GET http://localhost:3000/js/jquery-1.8.2.js => 200
Zombie: GET http://localhost:3000/js/jquery-ui.js => 200
Zombie: GET http://localhost:3000/js/bootstrap.min.js => 200
Zombie: GET http://localhost:3000/js/todos.js => 200
      ✓ should not load when the user is not logged in (179ms)
...

This not only tells you which resource loads corresponding to a given test, it also informs you of how much time was spent running that test.

Running a specific test

If you are having trouble with a specific test, you don't need to run the whole test suite or even the whole test file. Mocha accepts a -g <expression> command-line option, and will only run the tests that match that expression.

For instance, you can run only the tests that have the word remove in the description, shown as follows:

$ DEBUG=true node_modules/.bin/mocha -R spec -g 'remove' test/todos

  Todos
    Todo removal form
      When one todo item exists
        ◦ should allow you to remove: Zombie: GET http://localhost:3000/session/new => 200
...
        ✓ should allow you to remove (959ms)
      When more than one todo item exists
        ◦ should allow you to remove one todo item: Zombie: GET http://localhost:3000/session/new => 200
...
        ✓ should allow you to remove one todo item (683ms)


  ✔ 2 tests complete (1780ms)

This way you will be running only these specific tests.

Setting the DEBUG environment variable to true enables debugging output for all tests, but you can instead specify which tests you want to debug, by setting browser.debug to true. For instance, change the test/todos.js file and around line 204 add this:

...
      it("should allow you to remove", login(function(browser, done) {
        browser.debug = true;

      browser.visit('http://localhost:3000/todos', function(err, browser) {
...

This way you don't need to specify the DEBUG environment variable when running the following test:

$ node_modules/.bin/mocha -R spec -g 'remove' test/todos

  Todos
    Todo removal form
      When one todo item exists
        . should allow you to remove: Zombie: GET http://localhost:3000/todos => 200
Zombie: GET http://localhost:3000/js/jquery.min.js => 200
Zombie: GET http://localhost:3000/js/jquery-ui-1.8.23.custom.min.js => 200
Zombie: GET http://localhost:3000/js/bootstrap.min.js => 200
Zombie: GET http://localhost:3000/js/todos.js => 200
Zombie: 303 => http://localhost:3000/todos
Zombie: GET http://localhost:3000/todos => 200
Zombie: GET http://localhost:3000/js/jquery.min.js => 200
Zombie: GET http://localhost:3000/js/jquery-ui-1.8.23.custom.min.js => 200
Zombie: GET http://localhost:3000/js/bootstrap.min.js => 200
Zombie: GET http://localhost:3000/js/todos.js => 200
        ✓ should allow you to remove (1191ms)
      When more than one todo item exists
        ✓ should allow you to remove one todo item (926ms)


  ✔ 2 tests complete (2308ms)

Here you can see that, as intended, Zombie only outputs debugging information for the test named should allow you to remove.