In a continuing series on using WebdriverIO with Selenium we are going to focus on getting better reporting output now that our environment is setup.  The previous article on setting up WebdriverIO should have you up-and-running with basic tests.   Now it is time to use some of that “Mocha flavoring” to get useful reports out of our tests.   WebdriverIO and Mocha gives you the tools to group together tests and report the results in plain text.

Adding Mocha to a test

Mocha adds a ways to group together our test units and send meta information out to the report modules that are employed by WebdriverIO and the default test runner, conveniently named “TestRunner”.   Nothing special needs to be added if you’ve setup the project and employed the Mocha framework as shown in the prior article.

Since we are using the BDD test style with Mocha we have two primary functions we want to employ.

BDD = Behavior Driven Development,  in case you were wondering.

describe()

This is the Mocha syntax that is used to group together tests.   The first parameter in that function is the plain text that will be used to describe what tests are being run.   The second parameter is a standard JavaScript anonymous function that will include the test code.    Typically you use a series of it() functions within.

it()

This is the Mocha syntax that describes each individual thing to be tested.    The first parameter is again the plain text of what is being tested and the second is the function that contains the code.

A simple example

This test is going to open the home page for the website that was configured in the wdio.conf.js file when we setup our wdio configuration.

describe( 'The website login' , function () {

    it( 'should show the login page' , function () {
        browser.url( '/' );
    });

});

This does nothing more than make sure it can open the site URL.

When the test is run we now get a more detailed report of what happened.

Lances-MBP:atest lancecleveland$ ./node_modules/.bin/wdio wdio.conf.js
------------------------------------------------------------------
[chrome #0-0] Session ID: d584e7192e532937159dd27d62e78726
[chrome #0-0] Spec: /Users/lancecleveland/phpStorm Projects/atest/test/specs/wplogin.js
[chrome #0-0] Running: chrome
[chrome #0-0]
[chrome #0-0] The website login
[chrome #0-0]   ✓ should show the login page
[chrome #0-0]
[chrome #0-0]
[chrome #0-0] 1 passing (4s)
[chrome #0-0]

Here is a video showing how the test run looks compared to the standard non-Mocha version.

[videopress EKEync2a]