JavaScript Selenium Mocha QuickStart Guide

Getting started with JavaScript, Selenium and Mocha!

In this article we’ll be using Mocha and Selenium to write tests for web applications. This will be a starter project we can build on for various projects and in future articles.

Requirements

Here are the requirements before we get started:

• NodeJS (A JavaScript runtime)
• Selenium JavaScript language bindings (But we’ll use NPM to grab these)
• MochaJS (Mocha is a JS test framework)
• ChaiJS (Chai is an assertion library)
• Any browsers installed that you want to test Supported Platforms

Selenium Prep

If you haven’t read through my quick Overview of Selenium you should do that now. Selenium will need a few things configured before it’ll do its magic!

NodeJs Tutorial

If you’re unfamiliar with NodeJS I recommend this tutorial to get you started: NodeHero. It’s packed with helpful information. It’s a good resource to keep open in a tab while working through this post.

Create Project

To kick things off we’ll need a new project. Using a command prompt or Explorer we need to create a new folder for our project. Once we have our folder we can use the command prompt to begin installing the packages we’ll need.

Initializing Project

NodeJS comes with its own package manager: NPM. It is also used to initialize a project. Run the following command and fill in each section: npm init. This will create the package.json file. This file tracks dependencies and project information.

Installing Packages

NPM is also responsible for installing packages. The command for installing a package is npm install <package>. We need to install Selenium, Mocha and Chai.

• npm install selenium-webdriver --save
• npm install mocha --save
• npm install chai --save

These will install in the node_modules folder and get tracked in our package.json file.

Here’s what our folder structure looks like:

We can now write our first test and use our installed packages! Here’s what the package.json file should look like at this point:

{
"name": "selenium-js-mocha",
"version": "1.0.0",
"description": "A project to go along with blog posts explaining how to get started with functional testing using Selenium, JavaScript and Mocha. ",
"main": "test1.js",
"dependencies": {
"chai": "^3.5.0",
"mocha": "^2.5.3",
"selenium-webdriver": "^2.53.2"
},
"devDependencies": {},
"scripts": {
"test": "mocha test1.js"
},
"author": "Stephen Cavender",
"license": "ISC"
}

Write Test

We’ll write our test against The Internet¹.

Let’s create a new JS file in our project folder: I’ll create test1.js.

// Load dependecies
var assert = require('chai').assert,
test = require('selenium-webdriver/testing'),
webdriver = require('selenium-webdriver');

// Our test
test.describe('Test', function () {
test.it('Title should be "The Internet"', function () {
// Set timeout to 10 seconds
this.timeout(10000);

// Get driver
// var driver = new webdriver.Builder().
// withCapabilities(webdriver.Capabilities.firefox()).
// build();
// var driver = new webdriver.Builder().
// withCapabilities(webdriver.Capabilities.edge()).
// build();
// var driver = new webdriver.Builder().
// withCapabilities(webdriver.Capabilities.ie()).
// build();
var driver = new webdriver.Builder().
withCapabilities(webdriver.Capabilities.chrome()).
build();

// Go to URL
driver.get('http://the-internet.herokuapp.com');

// Find title and assert
driver.executeScript('return document.title').then(function(return_value) {
assert.equal(return_value, 'The Internet')
});

// Quit webdriver
driver.quit();
});
});

1. Load dependencies
2. Create test
3. Set timeout (test runs too fast and fails without increasing the timeout)
4. Get a web driver
5. Set the URL property (tells the driver to go to that URL)
6. Assert on the title of the driver
7. Dispose of the driver

Run Test

Now that we have a functional test we can run it. Save the test file and let’s grab our command prompt. To run tests we call the mocha command and our test file.

mocha test1.js

Run that in the command prompt and we should see our test run and the command prompt will tell us the result of the test. If the package.json is set up with a test script we can also run our test by calling the npm test script.

npm test

This is how the command prompt displays our test run:

And this is how bash displays our test run:

This is a basic, and brittle, example of how Selenium works. We’ll cover a much better testing approach in a later post to avoid such things! This is not an example of best practices by any means. This is to get you a working example of Selenium. Stay tuned for more posts on how to use Selenium, best practices for automating tests and video tutorials!

Thanks for reading! Be sure to share this post if you found it helpful and don’t hesitate to chat with me about it!

Credit to Dave Haeffner. ↩

Originally published at cavender.dev

Comments

[Patric Pires]

Nice post, thank you for sharing it with us. I think maybe you need put only:

describe('Test', function () {...}

and

it('Title should be "The Internet"', function () {...}

[Stephen Cavender]

Thanks! Did an update to Mocha allow this syntax or did I just make mine more complicated than it needed to be?

[pavithrabt]

title: Error message while trying to write a Feature file
published: true
description: I am new to the Selenium+JavaScript. Started implementing BDD framework. I have Atom as editor, trying to implement BDD framework using Cucumber. I am getting a warning message on right top corner as "cucumber-autocomplete: cannot find features directory at C:\work\Vuelio UX/features. please update your settings to point to the location of your features directory"

[Stephen Cavender]

Unfortunately I'm not familiar with cucumber so I don't have any possible solutions to your issue. Have you figured it out?