/ JavaScript

How to port a WebdriverIO project to TypeScript

WebDriverIO is an amazing tool for driving Selenium tests from Node.js that we’ve been using at LivingLens to replace our tedious manual testing plans with automated happiness. When the project started we were using Babel to give us access to ES2015 features but the extra intellisense and optional static typing features of TypeScript proved too tempting to resist so I set out to investigate how easy it is to switch a WebDriverIO project to build with TypeScript instead.
As a quick experiment I grabbed a boilerplate project using Babel from WDIO’s getting started guide to try a simple port, so let’s get started. First of all I installed the TypeScript and TypeScript Node packages into the project:

npm install typescript --save-dev
npm install ts-node --save-dev

The first of these (as you can probably guess) adds the TypeScript language to our project while ts-node provides ‘TypeScript execution environment and REPL for node’ which we can use as our compiler in place of Babel.
Next we modify the wdio.conf.js config file to pull in ts-node via the before hook and in the same file modify the mochaOpts to use ts-node as our compiler.

... 
before(capabilities, specs) 
{ 
  require('ts-node/register'); 
... 
mochaOpts: {
  ui: 'bdd', 
  compilers: ['ts:ts-node/register'], 
  requires: ['./test/helpers/common.js'] 
} 
...

Finally we remove the following Babel dependencies from package.json and delete our .babelrc config file.

// "babel-plugin-transform-runtime": "^6.12.0", 
// "babel-preset-es2015": "^6.13.2", 
// "babel-register": "^6.11.6"

And now when I execute npm test everything runs just as it did before making any of the above changes which. Success, we’ve achieved nothing! But no don’t panic this wasn’t all a waste of time, to quote the TypeScript spec:

TypeScript syntax is a superset of ECMAScript 2015 (ES2015) syntax.

What that means in practice is that all of our existing .js tests and supporting files continue to work exactly as they did before but now we can add new .ts tests which take advantage of TypeScript features and port over the existing .js as and when time allows.

So now to start writing some TypeScript tests … 🙂

I pushed my changes into a branch on GitHub so you can see a diff of the changes I needed to make.