Installing and running nemo functional tests

Pre-requisites

1. You are using a Mac, and already have node 8+/npm 6+ set up
2. Have a local node/npm project you wish to functionally test
3. Have a recent (generally the latest) version of the Chrome and Firefox browser installed

After this training you will be able to

1. Download and place the chromedriver and geckodriver executables, and understand their purpose
2. Install the nemo CLI
3. Generate a new nemo test suite using the nemo CLI "scaffold" feature
4. Identify the newly installed nemo files and components
5. Run your new test suite
6. reconfigure nemo to run against two browsers
7. add a nemo "run" script into package.json

Download and place the chromedriver executable

If you have never used nemo, or any other functional test framework locally, you probably don't have a chromedriver binary downloaded to your system. This is a necessary component in local functional testing with selenium-based frameworks (which covers all major test frameworks except for cypress).

There is going to be a *driver binary for every major browser you may want to run locally (Firefox requires geckodriver, Safari requires SafariDriver). For this document, we are only going to run Chrome. So let's get the chromedriver for our version of Chrome.

1. Navigate to: https://sites.google.com/a/chromium.org/chromedriver/downloads
2. From there, navigate to the appropriate version for your version of Chrome
3. Download the mac_64.zip file
4. Find that file in your downloads, click to unzip
5. Place the unzipped chromedriver file to a directory location on your PATH variable (I added a bin directory under my own home directory for this purpose. e.g. /Users/<username>/bin, and include that on my path by customizing my .bashrc file)
   • this will allow selenium to find the chromedriver binary when it attempts to open a local Chrome browser

If you followed these steps correctly, you should see nemo open your Chrome browser a few steps later.

Install nemo

From the base directory of your node/npm project, run the following command

npm install --save-dev nemo

This will install the node dependencies required to run nemo. But we are not yet ready to run tests, because we don't have any test suite or local configuration.

Generate a new nemo test suite using the nemo CLI "scaffold" feature

From the base directory of the sample-app, you can run the following command

./node_modules/.bin/nemo -X test/functional

This tells nemo to create a new test suite for you under the directory test/functional. The CLI will:

• add the test/functional directory with a mocha test suite file
• add a nemo configuration file in the base directory: nemo.config.js
• output the following

  Next steps:
  1. Make sure you have latest chrome/chromedriver installed (https://sites.google.com/a/chromium.org/chromedriver/getting-started)
     - The binary should be in your PATH
  2. Run nemo! "./node_modules/.bin/nemo"
  4. Look at nemo.config.js and test/functional/nemo.test.js
  5. Learn more: http://nemo.js.org

Since we've already downloaded the correct version of the chromedriver binary, we should be ready to run nemo. Try it:

./node_modules/.bin/nemo

You should have seen a Chrome browser open and close, and the following output on the command line:

  @firstTest@
    ✓ should load a website (2721ms)


  1 passing (6s)

┌────────────────────────────────────────────────────────────────┬──────┬──────┬───────┐
│ tags                                                           │ pass │ fail │ total │
├────────────────────────────────────────────────────────────────┼──────┼──────┼───────┤
│ profile: base                                                  │ 1    │ 0    │ 1     │
│ reportFile: /03-18-2019/09-07-38/profile!base/nemo-report.html │      │      │       │
│                                                                │      │      │       │
├────────────────────────────────────────────────────────────────┼──────┼──────┼───────┤
│ TOTALS                                                         │ 1    │ 0    │ 1     │
└────────────────────────────────────────────────────────────────┴──────┴──────┴───────┘

You can confirm there is a directory and an html report (along with some support files) that have been output into test/functional/report

Identify the newly installed nemo files and components

So, where are the files that were used to configure and run your new test suite? Knowing this will allow you to write new tests, and configure new profiles for various browsers and environments.

The main items installed are the nemo module, a config file, and a test suite file.

Configuration file

nemo.config.js at the base of your project

const path = require('path');

module.exports = {
  plugins: {
    view: {
      module: 'nemo-view'
    }
  },
  output: {
    reports: path.resolve('test/functional', 'report')
  },
  profiles: {
    base: {
      tests: path.resolve('test/functional', '*test.js'),
      driver: {
        browser: 'chrome'
      },
      data: {
        baseUrl: 'https://www.google.com'
      },
      mocha: {
        timeout: 180000,
        reporter: 'mochawesome',
        reporterOptions: {
          quiet: true
        }
      }
    }
  }
}

From the above config file, you can see how the browser is chosen, how nemo locates test files, and where reports are output.

Test file

test/functional/nemo.test.js

describe('@firstTest@', function () {
  it('should load a website', async function () {
    await this.nemo.driver.get(this.nemo.data.baseUrl);
  });
});

In the test file, you can see how we access nemo from the mocha this context. You can also see how we access a data property from our config file (this.nemo.data.baseUrl).

reconfigure nemo to run against two browsers

The power of nemo is its ability to configure and run in parallel based on a myriad of properties. But here let's focus on running in parallel against multiple browsers. We are already configured to run against Chrome. Let's add the ability to run against Firefox, and then run in parallel.

Download the GeckoDriver for your version of Firefox

1. go to https://github.com/mozilla/geckodriver/releases/latest (find the "macos" file and download it)
2. place the unzipped geckodriver file to the PATH location where you added chromedriver earlier

Modify your nemo config file with separate "profile" for each browser

const path = require('path');

module.exports = {
  plugins: {
    view: {
      module: 'nemo-view'
    }
  },
  output: {
    reports: path.resolve('test/functional', 'report')
  },
  profiles: {
    base: {
      tests: path.resolve('test/functional', '*test.js'),
      driver: {
        browser: 'chrome'
      },
      data: {
        baseUrl: 'https://www.google.com'
      },
      mocha: {
        timeout: 180000,
        reporter: 'mochawesome',
        reporterOptions: {
          quiet: true
        }
      }
    },
    chrome: {
      driver: {
        browser: 'chrome'
      }
    },
    firefox: {
      driver: {
        browser: 'firefox'
      }
    }
  }
};

Run against both browsers at once

Now you can try the following command:

./node_modules/.bin/nemo -P firefox,chrome

You should see both Firefox and Chrome opening, and the brief automation test run in each.

Without pasting the entire output here, you should see this at the end:

┌───────────────────────────────────────────────────────────────────┬──────┬──────┬───────┐
│ tags                                                              │ pass │ fail │ total │
├───────────────────────────────────────────────────────────────────┼──────┼──────┼───────┤
│ profile: chrome                                                   │ 1    │ 0    │ 1     │
│ reportFile: /03-18-2019/13-33-11/profile!chrome/nemo-report.html  │      │      │       │
│                                                                   │      │      │       │
├───────────────────────────────────────────────────────────────────┼──────┼──────┼───────┤
│ profile: firefox                                                  │ 1    │ 0    │ 1     │
│ reportFile: /03-18-2019/13-33-11/profile!firefox/nemo-report.html │      │      │       │
│                                                                   │      │      │       │
├───────────────────────────────────────────────────────────────────┼──────┼──────┼───────┤
│ TOTALS                                                            │ 2    │ 0    │ 2     │
└───────────────────────────────────────────────────────────────────┴──────┴──────┴───────┘

It indicates that both browsers opened, and the single test passed on each of them.

If there was any failure, it would likely indicate one of:

1. You did not place the geckodriver and chromedriver binaries on your PATH
2. There is an incompatibility between the *driver version and browser version for one or both of the browsers
   • You can look at each project's release notes to understand what version of *driver is required for what version of browser. You may need to install a different version of either one (e.g. if the driver release is lagging behind the most recent browser release, you may need to downgrade your browser)

Add a nemo run script into package.json

This is something you would want to do if you are using the exact same combination of parameters to nemo consistently. It allows you to create a shortcut that you can then run (and your teammates can run on their machines) more easily.

1. add the following line into package.json inside the "scripts" section:

"nemo:ff:chrome": "nemo -P firefox,chrome",

2. Run the following command:

npm run nemo:ff:chrome

You should see the same result as above, with firefox and chrome running in parallel, and a successful test on each.