Menu

Run a Local Automated Test

Write a simple Nightwatch.js test and execute it on a local version of your mobile site.

Nightwatch.js is an end-to-end browser testing tool. It uses Node.js to operate the Selenium WebDriver tools. The JavaScript test instructions that you write in Nightwatch.js rely on CSS selectors to select elements from the webpage. Mobify has implemented its own custom extension of Nightwatch.js to work specifically with features that are common to transformed sites.

Custom Nightwatch.js API Refer to our Mobify Custom Nightwatch.js Commands and Assertions API.

This is similar to the approach that you are already familiar with from building your site because element selections are commonly used in creating the mobile site adaptation in the view files.

Views: Context To refresh your memory, skim through the context section in our overview of Views.

Similarly to the Views selection process, you edit the Nightwatch.js test configuration files in the projectName-mobile/tests/system directory of your project.

With the default configuration of Adaptive.js, the tests folder already exists within your project directory.


1. Retrieve your Project from its GitHub Repository

Follow the next set of steps to download your project to a local directory.

If you already have a local project to test, skip to Step 2. Write the Nightwatch.js Test Scripts.


A. Add your SSH key to GitHub

To set up your computer to communicate with GitHub, add your SSH key to GitHub. This is done only once per computer.

Add your SSH key to GitHub


B. Clone the GitHub repository

1. In your web browser, go to GitHub at http://www.github.com and navigate to your GitHub project repository

2. Locate the "clone URL" option on the sidebar.

3. Click the "SSH" toggle link to switch to the SSH option.

4. Copy the resulting URL to your clipboard using the button beside the URL bar.

GitHub Clone URL

5. Open a new Terminal (Mac) or Command Prompt (Windows).

6. To change to your project directory, enter the following command on the command line:

cd path/to/project/directory

7. To clone the GitHub repository, enter the following command on the command line:

git clone git://replaceCopiedURL

Substitute the git://replaceCopiedURL argument in the command with the URL that you copied to your clipboard in the previous step.

GitHub clone command


2. Write the Nightwatch.js Test Scripts

The test files use commands and verify and assert statements to do their work.

As a best practice, always define your selectors separately at the top of each test file. This improves code maintainability because selectors often change.


A. Create a Simple Nightwatch.js Test File

1. In your local project directory, locate the projectName-mobile/tests/system directory.

2. Open a new Terminal (Mac) or Command Prompt (Windows).

3. To change to the system test folder of your local project directory, enter the following command on the command line:

cd path/to/localGitHubRepository/projectName-mobile/test/system

Define your test files in this directory. This directory is included by default with your project structure.

4. To create a new directory called pages in the projectName-mobile/tests/system directory, enter the following command on the command line:

mkdir pages

5. Launch a text editor app to create a new JavaScript file in this directory.

6. Copy the script listed below into your editor app. Save it as the index.js file in the projectName-mobile/tests/system/pages directory.

var selectors = {
  body: 'body'
}

module.exports = {
    'setUp': function(browser) {
        browser.preview()
    },

    'Index test': function(browser) {
        // Page level tests go here, product index, PDP...
        browser
            // Verify that the <body> tag is present.
            .verify.elementPresent(selectors.body)
           .end();
    }
}

B. Write More Test Files

In this optional step, repeat the previous Step A. Create a Test File to include any other tests for your mobile site.

Custom Nightwatch.js API Refer to our Custom Nightwatch.js Commands and Assertions API to learn to write Nightwatch.js tests for Mobify sites.


3. Run the Automated Nightwatch.js Tests

Execute your Nightwatch.js tests with Grunt.


A. Install the NPM Packages

Your Adaptive.js project has specific NPM package dependencies which are needed to run your project. These only need to be installed once.

1. Open a new Terminal (Mac) or Command Prompt (Windows).

2. To change to your project directory, enter the following command on the command line:

cd path/to/project/directory

3. To install the NPM packages, enter the following command on the command line:

npm install

Or if you need administrative privileges, precede the command with sudo as follows:

sudo npm install

B. Run Nightwatch.js

Use the Grunt JavaScript task runner to execute your Nightwatch.js tests.

1. Start your local Adaptive.js server:

grunt preview

2. To run the Nightwatch.js tests, enter the following command on the command line:

grunt nightwatch

Now Grunt successively runs your test scripts.

Running Specific Tests grunt nightwatch --group <group> runs tests under a subfolder specified at

grunt nightwatch --test <path> runs the single test specified at

By default, the Nightwatch.js tests are run against a Preview environment specified inside tests/system/site.json. Change the activeProfile value to production in order to bypass the Preview step and run tests directly against production.

Grunt launches Chrome as it executes the Nightwatch.js tests. You see each test as it executes on the browser.

Chrome is Mobify's preferred browser. To change to another browser, in the Selenium section, change the content of the tests/system/nightwatch.json config file.

"selenium": {
        ...
        "cli_args": {
            "webdriver.chrome.driver": "./node_modules/nightwatch-commands/selenium/drivers/chromedriver"
        }
    },

If you remove this line, Selenium uses its default browser, Firefox.

The results of the Nightwatch.js tests display on the command line.

Edit in GitHub