Let's create a new subdirectory within our project at tests/casper and then create a new file in there called Sanity.js. We're going to write a couple of simple checks to make sure the application is loading correctly. Here's the starting point for the code:

casper.test.begin('Alcohology Sanity Checks', 0, function suite(test) {
    casper.start('http://localhost:1841/', function() {
    });
    casper.run(function() {
        test.done();
    });
});

We kick off by calling the casper.test.begin method, which starts off a new test suite and takes three arguments: a description for the suite, the number of tests we expect should be run, and a callback function that is called when the suite is created. The callback gets passed on a test object on which we can call various assert methods.

We then call CasperJS's start method with the URL to our application. In order to trigger the test run, we call CasperJS's run method and when everything's complete, we call the done method on the test object.

The first test we're going to write will check whether the category menu on the left-hand side of the application is populated as expected. To do this, we'll look for the first menu item and check whether it contains the text we expect, but it complicates matters slightly when we're loading this content in with Ajax. We need to be able to wait for the page to load, select the relevant element, and check whether it contains the content we'd expect.

In order to select elements, we're going to use the CSS selector, and so on, but we need a mechanism to find the correct selector to use. Fortunately, Chrome Developer Tools will come to our rescue once more; if we right click on the Pilsner text in the top category menu item in Alcohology, then pick Inspect Element, the elements panel will display with the menu item's element selected.

Next, right-click on the element and click on the Copy CSS Path option:

The CSS select of this div tag will be copied to your clipboard and should look like this:

#gridview-1014-record-6 > tbody > tr > td > div

We can now use this with CasperJS:

casper.test.begin('Application sanity checks', 0, function suite(test) {
    casper.start('http://localhost:1841/', function() {
        var selector = '#gridview-1014-record-6 > tbody > tr > td > div';

        casper.waitForSelector(selector, function() {
            test.assertSelectorHasText(selector, 'Pilsner'),
        });
    });

    casper.run(function() {
        test.done();
    });
});

After telling CasperJS to start and load the application's web page, we will use the waitForSelector method to wait until the specified selector appears on the page; by default, it'll wait for 5 seconds before throwing up a failure message. When the selector appears, the callback function is triggered and we use the assertSelectorHasText method to check whether the div tag has the correct text:

Running our first CasperJS test

It's simple, but effective. If we'd broken something due to an amend in the code for the categories store, incorrectly bound the data to the view model, or some other minor change that cascaded to affect this key feature, then this test would immediately flag it up.

We can do a lot more. Although the correct text is showing, the menu isn't just for display purposes, and when a user clicks on a menu item, it will load the products with this category. Can we create a CasperJS test for this?

Of course we can! Take a look at the CasperJS API documentation at http://docs.casperjs.org/en/latest/modules/casper.html#casper-prototype.

Alongside the start method, we have ones such as fill that allows you to complete form fields: scrollTo, which lets us move to a particular location on the page, and for our current purposes: click, it provides a means to click on an element specified by a selector. Let's build another test using click to run a more advanced set of steps, something like this:

This is a much more comprehensive test that goes some way to demonstrating the power of CasperJS to replicate user actions and validate the behavior of our application. Here's the code:

casper.test.begin('Product walk through', 2, function suite(test) {
    casper.start('http://localhost:1841/', function() {
        var categorySelector = '.categories-body table:nth-child(2) td',
            productSelector = '.product-list .product:nth-child(2)',
            windowSelector = '.product-detail',
            headerSelector = '.product-detail h1',
            priceSelector = '.product-detail p.price';

        // Wait for the categories to load.
        casper.waitForSelector(categorySelector, function() {
            // Click the specified category.
            casper.click(categorySelector);
        });

        // Wait for the category products to load.
        casper.waitForSelector(productSelector, function() {
            // Click the specified product.
            casper.click(productSelector);
        });

        // Wait for the product window to appear.
        casper.waitForSelector(windowSelector, function() {
            // Assert text for heading and price.
            test.assertSelectorHasText(headerSelector, 'Lagunitas IPA'),
            test.assertSelectorHasText(priceSelector, '£12.99'),

            // Capture a screenshot.
            casper.capture('products-page.png'),
        });
    });

    casper.run(function() {
        test.done();
    });
});

The comments in the code should make it pretty self-explanatory. After setting out all of the selectors we need, we wait for the categories and click on the one that we need. Next, we wait for the product we want and click on it before waiting for the product window to appear and asserting on its contents. For the final trick, we instruct CasperJS to take a screenshot, a feature that can be useful for debugging or further evaluation.

Running this code gives us the following screenshot:

Success! We've simulated and validated a small user path through the Alcohology application, checking whether several moving parts of our project work in tandem as expected.

The eagle-eyed reader will notice that the selectors in this example look a little more friendly than the ones in the first example that we grabbed using Google Chrome. There's a very good reason for this and it relates to a set of ideas surrounding making your application easier to test.