NodeJS

UI testing with DalekJS and PhantomJS on CentOS

With DalekJS you can automate your functional GUI tests very easy. This article describe how to prepare the test environment on CentOS.

Setup

First, the necessary packages are installed.

# install EPEL (Extra Packages for Enterprise Linux)
$ yum install -y epel-release

# check repositories
$ yum repolist

# update all
$ yum -y update

# install packages
$ yum install -y vim nodejs npm bzip2 freetype fontconfig

# check versions of nodejs and npm
$ node --version
$ npm --version

# change to tmp folder
$ cd /tmp/

# download PhantomJS and unzip
$ curl -O https://phantomjs.googlecode.com/files/phantomjs-1.9.2-linux-x86_64.tar.bz2
$ tar xvf phantomjs-1.9.2-linux-x86_64.tar.bz2

# copy binary, delete unneeded files and check version
$ cp phantomjs-1.9.2-linux-x86_64/bin/phantomjs /usr/local/bin/
$ rm -fr phantomjs-1.9.2-linux-x86_64
$ rm -f phantomjs-1.9.2-linux-x86_64.tar.bz2
$ phantomjs --version

# install dalek-cli (global) and check version
$ npm install dalek-cli -g
$ dalek --version

It is also possible to compile PhantomJS itself, but this takes a lot of time.

Prepare test project

Once all is installed without any issues you can start to create the test project.

# change to home folder
$ cd ~/

# create project folder and change into
$ mkdir DalekTest && cd DalekTest

# create package.json interactively
$ npm init

# install dalekjs on project
$ npm install dalekjs --save-dev

Create test case

Now it is time for the first Test Case. I have used the example from Dalek website.

# create test case file
$ touch test_title.js

# insert content
$ vim test_title.js
module.exports = {'Page title is correct': function (test) {
  test
    .open('http://google.com')
    .assert.title().is('Google', 'It has title')
    .done();
  }
};

Run test

By default DalekJS use PhantomJS as browser. For running the test case simple use dalek command and as argument the test case file (*.js).

# run test case
$ dalek test_title.js

CSSLint with Grunt on Debian

This tutorial gives an tiny insight into CSSLint with Grunt on Debian. After that you should be able, to implement more Grunt tasks for your project.

Installation

As root or sudo user install needed packages!

# update your system
$ apt-get update && apt-get upgrade

# install nodejs and npm
$ apt-get install -y nodejs-legacy npm

# install grunt-cli (global)
$ npm install -g grunt-cli

Check the installation of all needed tools.

# show different versions
$ nodejs --version
$ npm --version
$ grunt --version

Create a new project

As “normal” user create a new project and install the needed plugin.

# create new folder
$ mkdir TestProject

# change directory
$ cd TestProject/

# interactively create a package.json file
$ npm init

# install the csslint plugin
$ npm install grunt-contrib-csslint --save-dev

If no problems occurred, the package.json file should look like:

{
  "name": "TestProject",
  "version": "0.0.1",
  "description": "my example project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lupin3000",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5", "grunt-contrib-csslint": "^0.4.0"
  }
}

Create a css folder and a css file with some mistakes like:

$ mkdir css
$ vim css/example.css

The example.css file contains some issues!

html, body {
  margin: 0;
  padding: 0 
  borde: 0;
}

In the last step we create the Gruntfile.js

# create Gruntfile.js
$ vim Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    csslint: {
      // define the files to lint
      files: ['css/*.css'],
      strict: {
        options: {
          "import": 2
        }
      }
    }
  });
  grunt.loadNpmTasks("grunt-contrib-csslint");
};

Thats all, now run just the command and see the results.

# run csslinter
$ grunt csslint