diff --git a/.gitignore b/.gitignore
index 99105f4..4284f10 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,4 @@ node_modules
 
 # Ignore build files
 public
+/.runner-opts
diff --git a/config/wdio.conf.js b/config/wdio.conf.js
new file mode 100644
index 0000000..3ac9e7d
--- /dev/null
+++ b/config/wdio.conf.js
@@ -0,0 +1,216 @@
+var webpack          = require("webpack");
+var WebpackDevServer = require("webpack-dev-server");
+var webpackConfig    = require("./webpack.config");
+var testConfig       = require("./test/specs/config");
+
+
+var server;
+
+exports.config = {
+    
+    //
+    // ==================
+    // Specify Test Files
+    // ==================
+    // Define which test specs should run. The pattern is relative to the directory
+    // from which `wdio` was called. Notice that, if you are calling `wdio` from an
+    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
+    // directory is where your package.json resides, so `wdio` will be called from there.
+    //
+    specs: [
+        './test/specs/simple.js'
+    ],
+    // Patterns to exclude.
+    exclude: [
+        // 'path/to/excluded/files'
+    ],
+    //
+    // ============
+    // Capabilities
+    // ============
+    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
+    // time. Depending on the number of capabilities, WebdriverIO launches several test
+    // sessions. Within your capabilities you can overwrite the spec and exclude options in
+    // order to group specific specs to a specific capability.
+    //
+    // First, you can define how many instances should be started at the same time. Let's
+    // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
+    // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
+    // files and you set maxInstances to 10, all spec files will get tested at the same time
+    // and 30 processes will get spawned. The property handles how many capabilities
+    // from the same test should run tests.
+    //
+    maxInstances: 10,
+    //
+    // If you have trouble getting all important capabilities together, check out the
+    // Sauce Labs platform configurator - a great tool to configure your capabilities:
+    // https://docs.saucelabs.com/reference/platforms-configurator
+    //
+    capabilities: [{
+        // maxInstances can get overwritten per capability. So if you have an in-house Selenium
+        // grid with only 5 firefox instances available you can make sure that not more than
+        // 5 instances get started at a time.
+        maxInstances: 5,
+        //
+        browserName: 'firefox'
+    }],
+    //
+    // ===================
+    // Test Configurations
+    // ===================
+    // Define all options that are relevant for the WebdriverIO instance here
+    //
+    // By default WebdriverIO commands are executed in a synchronous way using
+    // the wdio-sync package. If you still want to run your tests in an async way
+    // e.g. using promises you can set the sync option to false.
+    sync: true,
+    //
+    // Level of logging verbosity: silent | verbose | command | data | result | error
+    logLevel: 'silent',
+    //
+    // Enables colors for log output.
+    coloredLogs: true,
+    //
+    // If you only want to run your tests until a specific amount of tests have failed use
+    // bail (default is 0 - don't bail, run all tests).
+    bail: 0,
+    //
+    // Saves a screenshot to a given path if a command fails.
+    screenshotPath: './errorShots/',
+    //
+    // Set a base URL in order to shorten url command calls. If your url parameter starts
+    // with "/", then the base url gets prepended.
+    baseUrl: 'http://localhost',
+    //
+    // Default timeout for all waitFor* commands.
+    waitforTimeout: 10000,
+    //
+    // Default timeout in milliseconds for request
+    // if Selenium Grid doesn't send response
+    connectionRetryTimeout: 90000,
+    //
+    // Default request retries count
+    connectionRetryCount: 3,
+    //
+    // Initialize the browser instance with a WebdriverIO plugin. The object should have the
+    // plugin name as key and the desired plugin options as properties. Make sure you have
+    // the plugin installed before running any tests. The following plugins are currently
+    // available:
+    // WebdriverCSS: https://github.com/webdriverio/webdrivercss
+    // WebdriverRTC: https://github.com/webdriverio/webdriverrtc
+    // Browserevent: https://github.com/webdriverio/browserevent
+    // plugins: {
+    //     webdrivercss: {
+    //         screenshotRoot: 'my-shots',
+    //         failedComparisonsRoot: 'diffs',
+    //         misMatchTolerance: 0.05,
+    //         screenWidth: [320,480,640,1024]
+    //     },
+    //     webdriverrtc: {},
+    //     browserevent: {}
+    // },
+    //
+    // Test runner services
+    // Services take over a specific job you don't want to take care of. They enhance
+    // your test setup with almost no effort. Unlike plugins, they don't add new
+    // commands. Instead, they hook themselves up into the test process.
+    services: ['phantomjs'],
+
+    //
+    // Framework you want to run your specs with.
+    // The following are supported: Mocha, Jasmine, and Cucumber
+    // see also: http://webdriver.io/guide/testrunner/frameworks.html
+    //
+    // Make sure you have the wdio adapter package for the specific framework installed
+    // before running any tests.
+    framework: 'mocha',
+    //
+    // Test reporter for stdout.
+    // The only one supported by default is 'dot'
+    // see also: http://webdriver.io/guide/testrunner/reporters.html
+    reporters: ['spec'],
+    //
+    // Options to be passed to Mocha.
+    // See the full list at http://mochajs.org/
+    mochaOpts: {
+        ui: 'bdd',
+        // Because we don't know how long the initial build will take...
+        timeout: 2*60*1000
+    },
+    //
+    // =====
+    // Hooks
+    // =====
+    // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+    // it and to build services around it. You can either apply a single function or an array of
+    // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+    // resolved to continue.
+    //
+    // Gets executed once before all workers get launched.
+    onPrepare: function (config, capabilities) {
+      var compiler = webpack(webpackConfig);
+      server = new WebpackDevServer(compiler, {
+        stats: "minimal"
+      });
+      server.listen(testConfig.port);
+    },
+    //
+    // Gets executed just before initialising the webdriver session and test framework. It allows you
+    // to manipulate configurations depending on the capability or spec.
+    // beforeSession: function (config, capabilities, specs) {
+    // },
+    //
+    // Gets executed before test execution begins. At this point you can access all global
+    // variables, such as `browser`. It is the perfect place to define custom commands.
+    // before: function (capabilities, specs) {
+    // },
+    //
+    // Hook that gets executed before the suite starts
+    // beforeSuite: function (suite) {
+    // },
+    //
+    // Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
+    // beforeEach in Mocha)
+    // beforeHook: function () {
+    // },
+    //
+    // Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
+    // afterEach in Mocha)
+    // afterHook: function () {
+    // },
+    //
+    // Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+    // beforeTest: function (test) {
+    // },
+    //
+    // Runs before a WebdriverIO command gets executed.
+    // beforeCommand: function (commandName, args) {
+    // },
+    //
+    // Runs after a WebdriverIO command gets executed
+    // afterCommand: function (commandName, args, result, error) {
+    // },
+    //
+    // Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+    // afterTest: function (test) {
+    // },
+    //
+    // Hook that gets executed after the suite has ended
+    // afterSuite: function (suite) {
+    // },
+    //
+    // Gets executed after all tests are done. You still have access to all global variables from
+    // the test.
+    // after: function (result, capabilities, specs) {
+    // },
+    //
+    // Gets executed right after terminating the webdriver session.
+    // afterSession: function (config, capabilities, specs) {
+    // },
+    //
+    // Gets executed after all workers got shut down and the process is about to exit. It is not
+    // possible to defer the end of the process using a promise.
+    onComplete: function(exitCode) {
+      server.close();
+    }
+}
diff --git a/webpack.config.js b/config/webpack.config.js
similarity index 100%
rename from webpack.config.js
rename to config/webpack.config.js
diff --git a/webpack.loaders.js b/config/webpack.loaders.js
similarity index 100%
rename from webpack.loaders.js
rename to config/webpack.loaders.js
diff --git a/webpack.production.config.js b/config/webpack.production.config.js
similarity index 100%
rename from webpack.production.config.js
rename to config/webpack.production.config.js
diff --git a/karma.conf.js b/karma.conf.js
deleted file mode 100644
index 4c82093..0000000
--- a/karma.conf.js
+++ /dev/null
@@ -1,34 +0,0 @@
-var webpackConfig = require('./webpack.config.js');
-
-// Karma configuration
-module.exports = function(config) {
-  var browsers = ['Chrome'];
-  if (process.env.TRAVIS) {
-    browsers = ['Firefox'];
-  }
-
-  config.set({
-		browsers: browsers,
-		frameworks: ['mocha'],
-    // ... normal karma configuration
-    files: [
-      // all files ending in "_test"
-      {pattern: 'test/*_test.js', watched: false},
-      {pattern: 'test/**/*_test.js', watched: false}
-      // each file acts as entry point for the webpack configuration
-    ],
-
-    preprocessors: {
-      // add webpack as preprocessor
-      'test/*_test.js': ['webpack'],
-      'test/**/*_test.js': ['webpack']
-    },
-
-    webpack: webpackConfig,
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      // i. e.
-      stats: 'errors-only'
-    }
-  });
-};
diff --git a/package.json b/package.json
index 644250a..2ef17fc 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,11 @@
   "description": "A MapboxGL visual style editor",
   "main": "''",
   "scripts": {
-    "stats": "webpack --config webpack.production.config.js --profile --json > stats.json",
-    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
-    "test": "karma start --single-run",
-    "test-watch": "karma start",
-    "start": "webpack-dev-server --progress --profile --colors --watch-poll",
+    "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
+    "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
+    "test": "wdio config/wdio.conf.js",
+    "test-watch": "wdio config/wdio.conf.js --watch",
+    "start": "webpack-dev-server --progress --profile --colors --watch-poll --config config/webpack.config.js",
     "lint": "eslint --ext js --ext jsx {src,test}",
     "lint-styles": "stylelint 'src/styles/*.scss'"
   },
@@ -125,6 +125,10 @@
     "stylelint-config-standard": "^15.0.1",
     "transform-loader": "^0.2.3",
     "url-loader": "0.5.7",
+    "wdio-mocha-framework": "^0.5.9",
+    "wdio-phantomjs-service": "^0.2.2",
+    "wdio-spec-reporter": "^0.1.0",
+    "webdriverio": "^4.6.2",
     "webpack": "1.14.0",
     "webpack-cleanup-plugin": "^0.4.1",
     "webpack-dev-server": "1.16.2"
diff --git a/test/sample_test.js b/test/sample_test.js
deleted file mode 100644
index b187c05..0000000
--- a/test/sample_test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import assert from 'assert'
-
-describe('Component', () => {
-	it('#always successds', () => {
-		assert.equal(1, 1)
-	})
-})
diff --git a/test/specs/config.js b/test/specs/config.js
new file mode 100644
index 0000000..7bb8239
--- /dev/null
+++ b/test/specs/config.js
@@ -0,0 +1,6 @@
+var config = {};
+
+config.port = 9001;
+config.baseUrl = "http://localhost:"+config.port;
+
+module.exports = config;
diff --git a/test/specs/simple.js b/test/specs/simple.js
new file mode 100644
index 0000000..655e920
--- /dev/null
+++ b/test/specs/simple.js
@@ -0,0 +1,15 @@
+var assert = require('assert');
+var config = require("./config");
+
+
+describe('maputnik', function() {
+
+  it('check logo exists', function () {
+    browser.url(config.baseUrl);
+    browser.waitForExist(".maputnik-toolbar-link");
+
+    var src = browser.getAttribute(".maputnik-toolbar-link img", "src");
+    assert.equal(src, config.baseUrl+'/img/maputnik.png');
+  });
+
+});