Book Image

Using Node.js for UI Testing

By : Pedro Teixeira
Book Image

Using Node.js for UI Testing

By: Pedro Teixeira

Overview of this book

<p>Automating tests for your user interfaces has always been the holy grail of programming. Now, using Zombie.js and Mocha you can create and quickly run your tests, allowing you to test even small changes. Increase your confidence in the code and minimize the number of times you have to use a real browser while you develop.</p> <p>"Using Node.js for UI Testing" is a quick and thorough guide on how to automatically test your web app, keeping it rock solid and bug-free. You will learn how to simulate complex user behaviour and verify that your application behaves correctly.</p> <p>You will create a web app in Node.js that uses complex user interactions and AJAX; by the end you will be able to fully test it from the command-line. Then you will start creating the user interface tests for this application using Mocha as a framework and Zombie.js as a headless browser.</p> <p>You will also create a complete test suite, module by module, testing simple and complex user interactions.</p>
Table of Contents (15 chapters)

Understanding the server-side DOM


Zombie.js runs on top of Node.js (http://nodejs.org), a platform where you can easily build networking servers using JavaScript. It runs on top of Google's fast V8 JavaScript engine that also powers their Chrome browsers.

Note

At the time of writing, V8 implements the JavaScript ECMA 3 standard and part of the ECMA 5 standard. Not all browsers implement all the features of all the versions of the JavaScript standards equally. This means that even if your tests pass in Zombie.js, it doesn't mean they will pass for all the target browsers.

On top of Node.js, there is a third-party module named JSDOM (https://npmjs.org/package/jsdom) that allows you to parse an HTML document and use an API on top of a representation of that document; this allows you to query and manipulate it. The API provided is the standard Document Object Model (DOM).

All browsers implement a subset of the DOM standard, which has been dictated as a set of recommendations by a working group inside the World Wide Web Consortium (W3C). They have three levels of recommendations. JSDOM implements all three.

Web applications, directly or indirectly (by using tools such as jQuery), use this browser-provided DOM API to query and manipulate the document, enabling you to create browser applications that have complex behavior. This means that by using JSDOM you automatically support any JavaScript libraries that most modern browsers support.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Zombie.js is your headless browser

On top of Node.js and JSDOM lies Zombie.js. Zombie.js provides browser-like functionality and an API you can use for testing. For instance, a typical use of Zombie.js would be to open a browser, ask for a certain URL to be loaded, fill some values on a form, and submit it, and then query the resulting document to see if a success message is present.

To make it more concrete, here is a simple example of what the code for a simple Zombie.js test may look like:

browser.visit('http://localhost:8080/form', function() {
  browser
    .fill('Name', 'Pedro Teixeira')
    .select('Born', '1975')
    .check('Agree with terms and conditions')
    .pressButton('Submit', function() {
      assert.equal(browser.location.pathname, '/success');
      assert.equal(browser.text('#message'),
        'Thank you for submitting this form!');
    });
});

Here you are making typical use of Zombie.js: to load an HTML page containing a form; filling that form and submitting it; and then verifying that the result is successful.

Note

Zombie.js may not only be used for testing your web app but also by applications that need to behave like browsers, such as HTML scrapers, crawlers, and all sorts of HTML bots.

If you are going to use Zombie.js to do any of these activities, please be a good Web citizen and use it ethically.