diff --git a/package.json b/package.json
index 417147bc..b1be3f20 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "start": "electron dist",
     "watch": "gulp watch",
     "serve": "gulp watch",
-    "test": "gulp build && mocha && gulp prettify:verify",
+    "test": "gulp build && mocha --recursive test/specs && gulp prettify:verify",
     "package": "gulp package",
     "package:windows": "gulp package:windows",
     "package:osx": "gulp package:osx",
diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx
index 36edb207..1237c61e 100644
--- a/src/browser/settings.jsx
+++ b/src/browser/settings.jsx
@@ -81,14 +81,15 @@ var SettingsPage = React.createClass({
 
     var options = [];
     if (process.platform === 'win32' || process.platform === 'linux') {
-      options.push(<Input ref="hideMenuBar" type="checkbox" label="Hide Menu Bar (Press Alt to show Menu Bar)" checked={ this.state.hideMenuBar } onChange={ this.handleChangeHideMenuBar } />);
+      options.push(<Input key="inputHideMenuBar" id="inputHideMenuBar" ref="hideMenuBar" type="checkbox" label="Hide Menu Bar (Press Alt to show Menu Bar)" checked={ this.state.hideMenuBar }
+                     onChange={ this.handleChangeHideMenuBar } />);
     }
     if (process.platform === 'darwin') {
-      options.push(<Input ref="showTrayIcon" type="checkbox" label="Show Icon on Menu Bar (Need to restart the application)" checked={ this.state.showTrayIcon } onChange={ this.handleChangeShowTrayIcon }
+      options.push(<Input key="inputShowTrayIcon" ref="showTrayIcon" type="checkbox" label="Show Icon on Menu Bar (Need to restart the application)" checked={ this.state.showTrayIcon } onChange={ this.handleChangeShowTrayIcon }
                    />);
     }
-    options.push(<Input ref="disablewebsecurity" type="checkbox" label="Allow insecure contents (This allows not only insecure images, but also insecure scripts)" checked={ this.state.disablewebsecurity }
-                   onChange={ this.handleChangeDisableWebSecurity } />);
+    options.push(<Input key="inputDisableWebSecurity" ref="disablewebsecurity" type="checkbox" label="Allow insecure contents (This allows not only insecure images, but also insecure scripts)"
+                   checked={ this.state.disablewebsecurity } onChange={ this.handleChangeDisableWebSecurity } />);
     var options_row = (options.length > 0) ? (
       <Row>
         <Col md={ 12 }>
@@ -133,7 +134,7 @@ var TeamList = React.createClass({
         thisObj.handleTeamRemove(i);
       };
       return (
-        <TeamListItem index={ i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } />
+        <TeamListItem index={ i } key={ "teamListItem" + i } name={ team.name } url={ team.url } onTeamRemove={ handleTeamRemove } />
         );
     });
     return (
diff --git a/test/browser_test.js b/test/browser_test.js
deleted file mode 100644
index 65334a4a..00000000
--- a/test/browser_test.js
+++ /dev/null
@@ -1,236 +0,0 @@
-'use strict';
-
-const webdriverio = require('webdriverio');
-const should = require('should');
-const path = require('path');
-const fs = require('fs');
-
-const source_root_dir = path.join(__dirname, '..');
-const electron_binary_path = (function() {
-  if (process.platform === 'darwin') {
-    return path.join(source_root_dir, 'node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron');
-  }
-  else {
-    const exe_extension = (process.platform === 'win32') ? '.exe' : '';
-    return path.join(source_root_dir, 'node_modules/electron-prebuilt/dist/electron' + exe_extension);
-  }
-})();
-const config_file_path = path.join(source_root_dir, 'test_config.json');
-const mattermost_url = 'http://example.com/team';
-
-var options = {
-  host: 'localhost', // Use localhost as chrome driver server
-  port: 9515, // "9515" is the port opened by chrome driver.
-  desiredCapabilities: {
-    browserName: 'chrome',
-    chromeOptions: {
-      binary: electron_binary_path, // Path to your Electron binary.
-      args: ['app=' + path.join(source_root_dir, 'dist'), '--config-file=' + config_file_path] // Optional, perhaps 'app=' + /path/to/your/app/
-    }
-  }
-};
-
-describe('mattermost-desktop', function() {
-  this.timeout(10000);
-
-  var chromedriver;
-  var client;
-  before(function(done) {
-    chromedriver = require('child_process').spawn('node_modules/chromedriver/lib/chromedriver/chromedriver', ['--url-base=wd/hub', '--port=9515']);
-    client = webdriverio.remote(options);
-
-    fs.unlink(config_file_path, function(err) {
-      // waiting for chromedriver
-      setTimeout(done, 1000);
-    });
-  });
-
-  afterEach(function() {
-    return client.end();
-  });
-
-  after(function() {
-    chromedriver.kill();
-  });
-
-  it('should show settings.html when there is no config file', function() {
-    return client
-      .init()
-      .pause(1000)
-      .getUrl().then(function(url) {
-        var p = path.parse(url);
-        p.base.should.equal('settings.html');
-      })
-      .end();
-  });
-
-  it('should show index.html when there is config file', function() {
-    fs.writeFileSync(config_file_path, JSON.stringify({
-      url: mattermost_url
-    }));
-    return client
-      .init()
-      .pause(1000)
-      .getUrl().then(function(url) {
-        var p = path.parse(url);
-        p.base.should.equal('index.html');
-      })
-      .end();
-  });
-
-  it('should upgrade v0 config file', function() {
-    const settings = require('../src/common/settings');
-    fs.writeFileSync(config_file_path, JSON.stringify({
-      url: mattermost_url
-    }));
-    return client
-      .init()
-      .pause(1000)
-      .getUrl().then(function(url) {
-        var p = path.parse(url);
-        p.base.should.equal('index.html');
-      })
-      .end().then(function() {
-        var str = fs.readFileSync(config_file_path, 'utf8');
-        var config = JSON.parse(str);
-        config.version.should.equal(settings.version);
-      });
-  });
-
-  describe('index.html', function() {
-    const config = {
-      version: 1,
-      teams: [{
-        name: 'example_1',
-        url: mattermost_url + '1'
-      }, {
-        name: 'example_2',
-        url: mattermost_url + '2'
-      }]
-    };
-
-    beforeEach(function() {
-      fs.writeFileSync(config_file_path, JSON.stringify(config));
-    });
-
-    it('should NOT show tabs when there is one team', function() {
-      fs.writeFileSync(config_file_path, JSON.stringify({
-        url: mattermost_url
-      }));
-      return client
-        .init()
-        .isExisting('#tabBar').then(function(isExisting) {
-          isExisting.should.be.false();
-        })
-        .end();
-    });
-
-    it('should set src of webview from config file', function() {
-      return client
-        .init()
-        .getAttribute('#mattermostView0', 'src').then(function(attribute) {
-          attribute.should.equal(config.teams[0].url);
-        })
-        .getAttribute('#mattermostView1', 'src').then(function(attribute) {
-          attribute.should.equal(config.teams[1].url);
-        })
-        .isExisting('#mattermostView2').then(function(isExisting) {
-          isExisting.should.be.false();
-        })
-        .end();
-    });
-
-    it('should set name of tab from config file', function() {
-      return client
-        .init()
-        .getText('#teamTabItem0').then(function(text) {
-          text.should.equal(config.teams[0].name);
-        })
-        .getText('#teamTabItem1').then(function(text) {
-          text.should.equal(config.teams[1].name);
-        })
-        .isExisting('#teamTabItem2').then(function(isExisting) {
-          isExisting.should.be.false();
-        })
-        .end();
-    });
-
-    it('should show only the selected team', function() {
-      return client
-        .init()
-        .pause(1000)
-        .waitForVisible('#mattermostView0', 1000)
-        .isVisible('#mattermostView1').then(function(visility) {
-          visility.should.be.false();
-        })
-        .click('#teamTabItem1')
-        .pause(1000)
-        .waitForVisible('#mattermostView1', 1000)
-        .isVisible('#mattermostView0').then(function(visility) {
-          visility.should.be.false();
-        })
-        .end();
-    });
-
-    it('should show error when using incorrect URL', function() {
-      this.timeout(30000)
-      fs.writeFileSync(config_file_path, JSON.stringify({
-        version: 1,
-        teams: [{
-          name: 'error_1',
-          url: 'http://false'
-        }]
-      }));
-      return client
-        .init()
-        .waitForVisible('#mattermostView0-fail', 20000)
-        .end();
-    });
-  });
-
-  describe('settings.html', function() {
-    const config = {
-      version: 1,
-      teams: [{
-        name: 'example_1',
-        url: mattermost_url
-      }, {
-        name: 'example_2',
-        url: mattermost_url
-      }]
-    };
-
-    before(function() {
-      fs.writeFileSync(config_file_path, JSON.stringify(config));
-    });
-
-    it('should show index.thml when Cancel button is clicked', function() {
-      return client
-        .init()
-        .url('file://' + path.join(source_root_dir, 'dist/browser/settings.html'))
-        .waitForExist('#btnCancel')
-        .click('#btnCancel')
-        .pause(1000)
-        .getUrl().then(function(url) {
-          var url_split = url.split('/');
-          url_split[url_split.length - 1].should.equal('index.html');
-        })
-        .end();
-    });
-
-    it('should show index.thml when Save button is clicked', function() {
-      return client
-        .init()
-        .url('file://' + path.join(source_root_dir, 'dist/browser/settings.html'))
-        .waitForExist('#btnSave')
-        .click('#btnSave')
-        .pause(1000)
-        .getUrl().then(function(url) {
-          var url_split = url.split('/');
-          url_split[url_split.length - 1].should.equal('index.html');
-        })
-        .end();
-    });
-
-  });
-});
diff --git a/test/modules/environment.js b/test/modules/environment.js
new file mode 100644
index 00000000..5efd8574
--- /dev/null
+++ b/test/modules/environment.js
@@ -0,0 +1,41 @@
+'use strict';
+
+const path = require('path');
+const webdriverio = require('webdriverio');
+
+const source_root_dir = path.join(__dirname, '../..');
+const electron_binary_path = (function() {
+  if (process.platform === 'darwin') {
+    return path.join(source_root_dir, 'node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron');
+  }
+  else {
+    const exe_extension = (process.platform === 'win32') ? '.exe' : '';
+    return path.join(source_root_dir, 'node_modules/electron-prebuilt/dist/electron' + exe_extension);
+  }
+})();
+const config_file_path = path.join(source_root_dir, 'test_config.json');
+const mattermost_url = 'http://example.com/team';
+
+var options = {
+  host: 'localhost', // Use localhost as chrome driver server
+  port: 9515, // "9515" is the port opened by chrome driver.
+  desiredCapabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      binary: electron_binary_path, // Path to your Electron binary.
+      args: ['app=' + path.join(source_root_dir, 'dist'), '--config-file=' + config_file_path] // Optional, perhaps 'app=' + /path/to/your/app/
+    }
+  }
+};
+
+module.exports = {
+  sourceRootDir: source_root_dir,
+  configFilePath: config_file_path,
+  mattermostURL: mattermost_url,
+  spawnChromeDriver: function() {
+    return require('child_process').spawn('node_modules/chromedriver/lib/chromedriver/chromedriver', ['--url-base=wd/hub', '--port=9515']);
+  },
+  getWebDriverIoClient: function() {
+    return webdriverio.remote(options);
+  }
+}
diff --git a/test/specs/app_test.js b/test/specs/app_test.js
new file mode 100644
index 00000000..b74c9bb2
--- /dev/null
+++ b/test/specs/app_test.js
@@ -0,0 +1,75 @@
+'use strict';
+
+const should = require('should');
+const path = require('path');
+const fs = require('fs');
+
+const env = require('../modules/environment');
+
+describe('application', function() {
+  this.timeout(10000);
+
+  var chromedriver;
+  var client;
+  before(function(done) {
+    chromedriver = env.spawnChromeDriver();
+    client = env.getWebDriverIoClient();
+
+    fs.unlink(env.configFilePath, function(err) {
+      // waiting for chromedriver
+      setTimeout(done, 1000);
+    });
+  });
+
+  afterEach(function() {
+    return client.end();
+  });
+
+  after(function() {
+    chromedriver.kill();
+  });
+
+  it('should show settings.html when there is no config file', function() {
+    return client
+      .init()
+      .pause(1000)
+      .getUrl().then(function(url) {
+        var p = path.parse(url);
+        p.base.should.equal('settings.html');
+      })
+      .end();
+  });
+
+  it('should show index.html when there is config file', function() {
+    fs.writeFileSync(env.configFilePath, JSON.stringify({
+      url: env.mattermostURL
+    }));
+    return client
+      .init()
+      .pause(1000)
+      .getUrl().then(function(url) {
+        var p = path.parse(url);
+        p.base.should.equal('index.html');
+      })
+      .end();
+  });
+
+  it('should upgrade v0 config file', function() {
+    const settings = require('../../src/common/settings');
+    fs.writeFileSync(env.configFilePath, JSON.stringify({
+      url: env.mattermostURL
+    }));
+    return client
+      .init()
+      .pause(1000)
+      .getUrl().then(function(url) {
+        var p = path.parse(url);
+        p.base.should.equal('index.html');
+      })
+      .end().then(function() {
+        var str = fs.readFileSync(env.configFilePath, 'utf8');
+        var config = JSON.parse(str);
+        config.version.should.equal(settings.version);
+      });
+  });
+});
diff --git a/test/specs/browser/index_test.js b/test/specs/browser/index_test.js
new file mode 100644
index 00000000..8449bcdb
--- /dev/null
+++ b/test/specs/browser/index_test.js
@@ -0,0 +1,120 @@
+'use strict';
+
+const should = require('should');
+const path = require('path');
+const fs = require('fs');
+
+const env = require('../../modules/environment');
+
+describe('browser/index.html', function() {
+  this.timeout(10000);
+
+  const config = {
+    version: 1,
+    teams: [{
+      name: 'example_1',
+      url: env.mattermostURL + '1'
+    }, {
+      name: 'example_2',
+      url: env.mattermostURL + '2'
+    }]
+  };
+
+  var chromedriver;
+  var client;
+  before(function(done) {
+    chromedriver = env.spawnChromeDriver();
+    client = env.getWebDriverIoClient();
+
+    fs.unlink(env.configFilePath, function(err) {
+      // waiting for chromedriver
+      setTimeout(done, 1000);
+    });
+  });
+
+  beforeEach(function() {
+    fs.writeFileSync(env.configFilePath, JSON.stringify(config));
+  });
+
+  afterEach(function() {
+    return client.end();
+  });
+
+  after(function() {
+    chromedriver.kill();
+  });
+
+  it('should NOT show tabs when there is one team', function() {
+    fs.writeFileSync(env.configFilePath, JSON.stringify({
+      url: env.mattermostURL
+    }));
+    return client
+      .init()
+      .isExisting('#tabBar').then(function(isExisting) {
+        isExisting.should.be.false();
+      })
+      .end();
+  });
+
+  it('should set src of webview from config file', function() {
+    return client
+      .init()
+      .getAttribute('#mattermostView0', 'src').then(function(attribute) {
+        attribute.should.equal(config.teams[0].url);
+      })
+      .getAttribute('#mattermostView1', 'src').then(function(attribute) {
+        attribute.should.equal(config.teams[1].url);
+      })
+      .isExisting('#mattermostView2').then(function(isExisting) {
+        isExisting.should.be.false();
+      })
+      .end();
+  });
+
+  it('should set name of tab from config file', function() {
+    return client
+      .init()
+      .getText('#teamTabItem0').then(function(text) {
+        text.should.equal(config.teams[0].name);
+      })
+      .getText('#teamTabItem1').then(function(text) {
+        text.should.equal(config.teams[1].name);
+      })
+      .isExisting('#teamTabItem2').then(function(isExisting) {
+        isExisting.should.be.false();
+      })
+      .end();
+  });
+
+  it('should show only the selected team', function() {
+    return client
+      .init()
+      .pause(1000)
+      .waitForVisible('#mattermostView0', 1000)
+      .isVisible('#mattermostView1').then(function(visility) {
+        visility.should.be.false();
+      })
+      .click('#teamTabItem1')
+      .pause(1000)
+      .waitForVisible('#mattermostView1', 1000)
+      .isVisible('#mattermostView0').then(function(visility) {
+        visility.should.be.false();
+      })
+      .end();
+  });
+
+  it('should show error when using incorrect URL', function() {
+    this.timeout(30000)
+    fs.writeFileSync(env.configFilePath, JSON.stringify({
+      version: 1,
+      teams: [{
+        name: 'error_1',
+        url: 'http://false'
+      }]
+    }));
+    return client
+      .init()
+      .waitForVisible('#mattermostView0-fail', 20000)
+      .end();
+  });
+});
diff --git a/test/specs/browser/settings_test.js b/test/specs/browser/settings_test.js
new file mode 100644
index 00000000..1cdf7f24
--- /dev/null
+++ b/test/specs/browser/settings_test.js
@@ -0,0 +1,121 @@
+'use strict';
+
+const should = require('should');
+const path = require('path');
+const fs = require('fs');
+
+const env = require('../../modules/environment');
+
+function initClient(client) {
+  return client
+    .init()
+    .url('file://' + path.join(env.sourceRootDir, 'dist/browser/settings.html'));
+}
+
+describe('browser/settings.html', function() {
+  this.timeout(10000);
+
+  const config = {
+    version: 1,
+    teams: [{
+      name: 'example_1',
+      url: env.mattermostURL
+    }, {
+      name: 'example_2',
+      url: env.mattermostURL
+    }]
+  };
+
+  var chromedriver;
+  var client;
+  before(function(done) {
+    chromedriver = env.spawnChromeDriver();
+    client = env.getWebDriverIoClient();
+
+    fs.unlink(env.configFilePath, function(err) {
+      // waiting for chromedriver
+      setTimeout(done, 1000);
+    });
+  });
+
+  beforeEach(function() {
+    fs.writeFileSync(env.configFilePath, JSON.stringify(config));
+  });
+
+  afterEach(function() {
+    return client.end();
+  });
+
+  after(function() {
+    chromedriver.kill();
+  });
+
+  it('should show index.thml when Cancel button is clicked', function() {
+    return initClient(client)
+      .waitForExist('#btnCancel')
+      .click('#btnCancel')
+      .pause(1000)
+      .getUrl().then(function(url) {
+        var url_split = url.split('/');
+        url_split[url_split.length - 1].should.equal('index.html');
+      })
+      .end();
+  });
+
+  it('should show index.thml when Save button is clicked', function() {
+    return initClient(client)
+      .waitForExist('#btnSave')
+      .click('#btnSave')
+      .pause(1000)
+      .getUrl().then(function(url) {
+        var url_split = url.split('/');
+        url_split[url_split.length - 1].should.equal('index.html');
+      })
+      .end();
+  });
+
+  describe('Options', function() {
+    describe('Hide Menu Bar', function() {
+      it('should appear on win32 or linux', function() {
+        return initClient(client)
+          .isExisting('#inputHideMenuBar').then(function(isExisting) {
+            if (process.platform === 'win32' || process.platform === 'linux') {
+              isExisting.should.be.true();
+            }
+            else {
+              isExisting.should.be.false();
+            }
+          })
+          .end();
+      });
+
+      if (process.platform === 'win32' || process.platform === 'linux') {
+        [true, false].forEach(function(v) {
+          it(`should be loaded from config: ${v}`, function() {
+            var new_config = {};
+            Object.assign(new_config, config);
+            new_config.hideMenuBar = v;
+            fs.writeFileSync(env.configFilePath, JSON.stringify(new_config));
+            return initClient(client)
+              .isSelected('#inputHideMenuBar input').then(function(value) {
+                value.should.equal(v);
+              })
+              .end();
+          });
+        });
+
+        it('should be saved as config.json', function() {
+          return initClient(client)
+            .click('#inputHideMenuBar input')
+            .click('#btnSave')
+            .pause(1000)
+            .then(function() {
+              const saved_config = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
+              saved_config.hideMenuBar.should.be.true();
+            })
+            .end();
+        });
+      }
+    });
+  });
+});
diff --git a/test/settings_test.js b/test/specs/settings_test.js
similarity index 65%
rename from test/settings_test.js
rename to test/specs/settings_test.js
index eb8900dd..499dee9a 100644
--- a/test/settings_test.js
+++ b/test/specs/settings_test.js
@@ -1,10 +1,11 @@
 const should = require('should');
 const fs = require('fs');
-const settings = require('../src/common/settings');
+const settings = require('../../src/common/settings');
 
-const config_file_path = '../test_config.json'
+const env = require('../modules/environment');
+//const env.configFilePath = '../../test_config.json'
 
-describe('settings.js', function() {
+describe('common/settings.js', function() {
 
   it('should upgrade v0 config file', function() {
     const v0_config = {