A simple WebdriverIO - Mocha test doesn't display browser

Question

I want to test NOT headlessly but I cannot do that.

The below code start chrome browser. NOT headless. OK.

// test.js

var webdriverio = require('webdriverio');

var options = {
  desiredCapabilities: {
    browserName: 'chrome'
  }
};

webdriverio
  .remote(options)
  .init()
  .url('http://www.google.com')
  .title(function(err, res) {
    console.log('Title was: ' + res.value);
  })
  .end();

The below code (Mocha test code) doesn't start chrome browser by $ mocha test.js.

Headless. NG.

But the test pass! I cannot understand this.

I checked the log of Selenium Server, but it doesn't show (left) any log. No trace.

// test-mocha.js

var expect = require('expect.js');
var webdriverio = require('webdriverio');

var options = {
  desiredCapabilities: {
    browserName: 'chrome'
  }
};

describe('WebdriverIO Sample Test', function () {
  it('should return "Google"', function () {
    webdriverio
      .remote(options)
      .init()
      .url('http://www.google.com')
      .title(function(err, res) {
        var title = res.value;
        expect(title).to.be('Google');
      })
      .end();
  })
});

The test result is as below:

  WebdriverIO Sample Test
    ✓ should return "Google"

  1 passing (4ms) 

Answer 1

webdriver.io is asynchronous. Change your test to mark it as asynchronous and use the done callback after all the checks in the test are done. The two changes are: 1. add done as a parameter to the function you pass to it and 2. add the done() call after your expect call.

  it('should return "Google"', function (done) { // <- 1
    webdriverio
      .remote(options)
      .init()
      .url('http://www.google.com')
      .title(function(err, res) {
        var title = res.value;
        expect(title).to.be('Google');
        done(); // <- 2
      })
      .end();
  })

Without this, Mocha thinks your test is synchronous so it just completes the test before webdriverio does its work.