Book Image

Instant Testing with CasperJS

By : Eric Brehault
Book Image

Instant Testing with CasperJS

By: Eric Brehault

Overview of this book

Professional web development implies systematic testing. While JavaScript unit tests will validate your JavaScript library’s quality, web functional testing is the only way to guarantee the expected behavior of your web pages. CasperJS is a fast and simple JavaScript testing API that can run on any platform, and it is currently one of the best and easiest ways to write your functional tests. Instant Testing with CasperJS will teach you how to write efficient and accurate tests for your professional web developments. This practical guide explains the various different CasperJS principles through clear and detailed examples, covering a large set of common use cases. This book will progressively cover everything you need to know from CasperJS basic principles to the most advanced testing practices. This book starts off by introducing you to the different testing assertions that you can perform with the CasperJS API. We will then move on to cover why bad timing between event triggering can ruin tests and learn strategies to avoid it. Finally, you will learn how to test efficient and complex web interactions like drag and drop, authentication, and file uploading. With Instant Testing with CasperJS, you will be able to set up an advanced and functional test suite for your web development projects quickly and efficiently.
Table of Contents (7 chapters)

Installing CasperJS (Simple)


In this recipe, we will cover the steps to install CasperJS and its dependencies on Windows, Mac OS X, and Linux.

Getting ready

The CasperJS sources are managed on GitHub. So, to get them on our local machine, we need Git.

To install Git on Windows, we can use msysGit to deploy the Git command-line utility plus a graphical interface:

  1. Go to http://msysgit.github.io/.

  2. Go to the Downloads page.

  3. Download the latest version.

  4. Run the installer.

To install Git on Mac, the easiest way is to use Git for OS X graphical interface:

  1. Go to https://code.google.com/p/git-osx-installer/.

  2. Go to the Downloads page.

  3. Download the latest version.

  4. Run the installer.

You can also install Git from the MacPorts:

  1. Make sure MacPorts is installed (if not, go to http://www.macports.org/ and follow the instructions).

  2. From a command line, enter the following command:

    $ sudo port install git-core +svn +doc +bash_completion +gitweb
    

To install Git on Linux, use the following commands:

  • For Debian/Ubuntu, enter the following command:

    $ sudo apt-get install git
    
  • For Fedora, enter the following command:

    $ yum install git-core
    

How to do it...

  1. First of all, we need to install PhantomJS.

    Perform the following steps to install PhantomJS on Windows:

    1. Go to http://phantomjs.org/download.html.

    2. Download the Windows version.

    3. Extract its content.

    4. Add the phantomjs.exe path to the PATH environment variable, assuming it is located at C:\PhantomJS:

      ...the existing PATH value...;C:\PhantomJS
      

    Perform the following steps to install PhantomJS on Mac and Linux:

    1. Go to http://phantomjs.org/download.html.

    2. Download the appropriate version (Mac OS X / Linux 32 bits / Linux 64 bits).

    3. Extract its content.

    4. Make bin/phamtomjs available in your system path using the following command:

      ~ sudo ln -s <path-to-extracted-folder>/bin/phantomjs /usr/local/bin
      

    Now we should be able to run phantomjs from a command line:

    ~  phantomjs --version
    1.9.0
    
  2. Now, we can install CasperJS using Git. We need to locally clone the official CasperJS repository from GitHub.

    This can be achieved using the following command:

    ~ git clone git://github.com/n1k0/casperjs.git
    

    This should produce an output similar to the following command:

    Cloning into 'casperjs'...
    remote: Counting objects: 11156, done.
    remote: Compressing objects: 100% (4927/4927), done.
    remote: Total 11156 (delta 6580), reused 10692 (delta 6167)
    Receiving objects: 100% (11156/11156), 6.85 MiB | 113 KiB/s, done.
    Resolving deltas: 100% (6580/6580), done.
    
  3. To check out the last stable version, we need to run the following Git command:

    ~ git checkout tags/1.1-beta3
    

    We will get the following message:

    Note: checking out 'tags/1.1-beta3'.
    
    
    ..
    
    HEAD is now at bc0da16... bump 1.1-beta3
    
  4. Let's check if CasperJS is properly installed.

    To check if CasperJS is installed properly on Windows, use the following commands:

    ~ cd casperjs
    ~ bin\batchbin\casperjs.bat --version
    

    To check if CasperJS is installed properly on Mac OS X / Linux, use the following commands:

    ~ cd ./casperjs
    ~ bin/casperjs --version
    

    We should obtain the following result:

    1.1.0-beta3
    
  5. To complete the installation, we will now make sure that the casperjs executable is available in our system path.

    To complete the installation on Windows add the following path to casperjs.bat to the PATH environment variable, assuming the repository is located in C:\casperjs:

    ...the existing PATH value...;C:\casperjs\batchbin
    

    To complete the installation on Mac and Linux, link bin/casperjs in /usr/local/bin using the following command:

    ~ sudo ln -s `pwd`/bin/casperjs /usr/local/bin
    

    We can check if casperjs is in the system path using the following command:

    ~ casperjs --version
    1.1.0-beta3
    

The setup is now complete.

How it works...

Just after cloning the repository, we launched a Git command to get the Version 1.1 (which was still a beta version at the time we were writing those lines).

If we had not launched the Git command, we would still have had a correct CasperJS setup, but be careful; Git has downloaded all the CasperJS revisions since the very beginning of CasperJS's development till today, and has automatically checked out the last one. So, we try using the following command:

~ bin/casperjs --version

We will obtain something similar to the following result:

1.1.0-DEV

It means that we are running the current development version and using a development version is probably not what we want as it might be unstable or even broken.

That is why we need to check out the 1.1 tagged revision specifically.

There's more...

Now, let's discuss some installation options.

Installing CasperJS with Homebrew on Mac OS X

Homebrew is a package manager for Mac OS X. It is a very handy way to deploy PhantomJS and CasperJS using the following command:

~ brew install casperjs

Installing PhantomJS on Ubuntu

Be careful; on Ubuntu, if we install PhantomJS from the distribution packages, we will get an old version (Version 1.4 or 1.6, depending on our Ubuntu version).

But CasperJS needs at least PhantomJS 1.7. So, package installation is not an option.

Using the CasperJS Ruby executable

On Mac OS X and Linux, the default casperjs executable is a Python script. Python should be available on our system (unless we use an exotic Linux distribution), so it makes no problem.

Nevertheless, if we prefer to launch CasperJS using a Ruby script, we do have one in ./rubybin. So, we just need to make it available in our system path this way:

~ ln -sf `pwd`/rubybin/casperjs /usr/local/bin/casperjs