Selenium JavaScript with Mocha beforeEach to create new browser instance for every test

Question

I am using Selenium with JavaScript and Mocha as the test framework.

I am trying to create a new webdriver instance before each test case (and also quit driver instance after each test case) using beforeEach() and afterEach() methods in Mocha. This is currently what my tests look like right now:

test = require('selenium-webdriver/testing'),
webdriver = require('selenium-webdriver');

test.describe('User A Actions', function(){
  this.timeout(10000);

  test.describe('User A page 1', function(){
    test.it('should see X on page', function(){
      var driver = new webdriver.Builder().withCapabilities(
        webdriver.Capabilities.chrome()).build();
      driver.get('http://mywebsite.org');

      loginUserA(driver);
      goToPage1(driver);
      // assert some element is there
      driver.quit()
  });

  test.describe('User A page 2', function(){
    test.it('should see Y on page', function(){
      var driver = new webdriver.Builder().withCapabilities(
        webdriver.Capabilities.chrome()).build();
      driver.get('http://mywebsite.org');

      loginUserA(driver);
      goToPage2(driver);
      // assert some other element is there
      driver.quit()
  });
});

As you can see, it is creating a new webdriver instance at the beginning of each test, and also quitting it. I feel it is extremely repetitive to have these at the top of each test. Also, if the test fails, it won't reach driver.quit() which leaves the browser hanging.

I was hoping to put a beforeEach() method and afterEach() method inside the top level describe, so it would resemble something like this:

test.describe('User A Actions', function(){
  this.timeout(10000);

  beforeEach(function(){ 
    var driver = new webdriver.Builder().withCapabilities(
      webdriver.Capabilities.chrome()).build();
    driver.get('http://mywebsite.org');
  });

  afterEach(function(){
    driver.quit();
  });

  test.describe('User A page 1', function(){
    loginUserA(driver);
    goToPage1(driver);
    // assert some element is there
  });

  test.describe('User A page 2', function(){
    loginUserA(driver);
    goToPage2(driver);
    // assert some other element is there
  });
});

When I try this, I am getting an error ReferenceError: driver is not defined . How can I fix this?

Answer 1

Mocha does not change the normal rules of JavaScript scoping. If you do something that does not respect the general rules of scoping in JavaScript, then Mocha won't make it work.

You need to declare driver in your test.describe block rather than in your beforeEach hook:

test.describe('User A Actions', function(){
  var driver; // Declare it here.
  this.timeout(10000);

  test.beforeEach(function(){ 
    driver = new webdriver.Builder().withCapabilities(
      webdriver.Capabilities.chrome()).build();
    driver.get('http://mywebsite.org');
  });

  // ... etc ...

Also, make sure you use the API exported by Selenium, so test.beforeEach rather than beforeEach directly (same with all the other hooks, including the afterEach you already have). Otherwise, you are skipping the control flow management that Selenium does for you when you use the exported API.