Cucumber is a tool to write Behavioral Test in the process of Behavioral Driven Development.

Originally written in Ruby, it has been ported to other programming languages, including javascript: cucumber-js.

In this article, I will introduce about how to use  cucumber-js to test another Web-based application written in any language. Of course, I prefer Ruby over javascript, but using cucumber in a Ruby project is easy, so I am writing about using cucumber-js.

I. Prerequisites

1. Install Nodejs

It depends on your operating system, you have different ways to install Nodejs.

2. Install cucumber-js:

npm install -g cucumber

3. Install cucumber-mink

npm install -g cucumber-mink

Cucumber Mink is a cucumber-js step definition library. Most of the steps to perform actions on browser are predefined. You don't have to work with regular expressions  to write popular step definitions yourself.

4 - Install phantomjs if you want to do headless testing

It depends on your operating system, you have different ways to install phantomjs.

5. Install selenium stand alone server if you want to use different browsers (Chrome, Firefox)  to run cucumber tests.

Download the Selenium Standalone Server jar file from here: http://docs.seleniumhq.org/download/ 
You can put it in any convenient place on your computer to use later on.

 6. Install Java JDK

Download what you need from here and install the JDK. It is used to run selenium standalone server.

II. Writing the tests

1. Get familiar with Gherkin syntax.

2. Create a directory to contain the test files with following structure:

top_project
  features
    step_definitions
    support
    [any other sub directories that contain "*.feature" files]

See this project for example:  https://github.com/linhchauatl/cucumber_js 

3. Test files
Test files have ".feature" extension, written in Gherkin syntax. They are stored in the subdirectories of "<top_project>/features".

You can write tests to test any web-based applications running on any ports on your localhost.

III. Running the tests

1. Start the application you want to test on designated port.

For convenient testing the example cucumber-js project, you can setup this rails project on your machine and run it on the port 3000.

2. Start phantomjs for headless testing, or selenium for browsers testing

If you start phantomjs, you don't need to start selenium, and vice versa.

Start phantomjs:

phantomjs -w

Start selenium: Go to the directory where you keep the file selenium-server-standalone-2.48.2.jar (or whatever version.jar) you downloaded at the step I.5.

java -jar selenium-server-standalone-2.48.2.jar -port 8910

3. Run the tests

Go to the directory of your test project, in this case, my directory is $HOME/projects/cucumber_js.

Run the command:

Test headless:

cucumber-mink -r features/

Test with firefox 

cucumber-mink -r features/ --browser firefox

Test with chrome

cucumber-mink -r features/ --browser chrome

You should see some thing like this in your terminal:

Have fun testing :)