How to run webdriverio on WSL windows Ubuntu

This is a hacky way to run webdriverio and maybe other kind of node frameworks like protractor on WSL (windows Subsystem for Linux).

Before to start

I would like to mention this still uses the npm for windows but only to install the wdio client; We have to install it because we need the chromedriver version for windows.

What's WSL?

Windows Subsystem for Linux (WSL) is a compatibility layer for running Linux binary executables (in ELF format) natively on Windows 10 and Windows Server 2019. wikipedia

So basically you can run Ubuntu or other many distros on Windows, of course there are some incompatibilities but for now I prefer to use WSL instead of git bash, MSYS or powershell.

Why?

git bash sometimes froze or didn't show some logs and it's the same for MSYS (git bash use MSYS), I know there are other alternatives like cygwin or MINGW but kinda the same problems.

Node it could be a nightmare on windows, it depends on what are you doing. For example I lost many hours trying to make node-gyp work on windows.

I know I can use a virtual machine or docker etc.. there are many ways to have linux environment for develop software but I like to share this one, maybe it could be helpful for someone.

Let's Start

Install WSL on windows - (official windows guide)

The first step it's to enable the WSL on your machine you can do that running this command on powershell

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

From windows store you can search for the linux distro you like to install. I choose ubuntu.

After the installation finish, you have to restart your machine and now you can type your distro on the windows start menu and open your terminal.

Note: it looks like this because I already installed tmux and some plugins.

Can't access to my external drives.

Your local files it's on /mnt/c or /mnt/f it depends of how your partitions were made.

My only problem was the rights permission on the partition, it can only be modified by the root and the command to change the user seems to work but the access folder it was still only by root.

If you have the same problem, close the Ubuntu terminal and from powershell run the next command.

Restart-Service -Name "LxssManager"

This command will restart WSL service and if you open your terminal again you would be able to modify your files without problem.

I can modify my files from windows on WSL and vice versa?

There are many comments from the WSL version 1 where they recommend to don't modify your files from the WSL on windows. Since the version 2. I readed there are no problem now. However I would recommend to modify only your files from the C or external drives and don't play around directly on the WSL directory.

Let's install node.

On windows I really like this node manager nvm-windows

Go to the release tab and download the installer it's very easy to install and use. With nvm you can install any node version and change from version to version easily.

You can do the same on your ubuntu terminal

nvm for ubuntu

start the webdriver config and install

From ubuntu you can create a symbolic links so create one from your home to your external drive. I have a external ssd and I can access from home easily thanks for the symbolic link.

Is important to install your projects on C or your external drives, it would be more easy to access and edit from Windows or Ubuntu.

Run the following commands to start a new webdriverio project example.

mkdir webdriverio-test && cd webdriverio-test
npm init -y

expected output

Wrote to /mnt/f/projects/personal/webdriverio-test/package.json:

{
  "name": "webdriverio-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now, from powershell let's install webdriver.io.

Now you can install any other dependency on ubuntu we only need webdriver cli for windows.

Run the next command to generate the config file for webdriverio

#you have to be on your root project still on windows
./node_modules/.bin/wdio config

select the local options.

and select your browser driver that you like. I choose chromedriver.

On WSL/Ubuntu.

let's create our first test.

mkdir -p ./test/specs
touch ./test/specs/basic.js

use your any editor and add paste this code

const assert = require('assert')

describe('webdriver.io page', () => {
    it('should have the right title', () => {
        browser.url('https://webdriver.io')
        const title = browser.getTitle()
        assert.strictEqual(title, 'WebdriverIO · Next-gen WebDriver test framework for Node.js')
    })
})

Now let's edit our package.json to add the wdio script.

{
  "name": "webdriverio-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "./node_modules/.bin/wdio wdio.conf.js"   #edit this
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wdio/cli": "^5.14.4",
    "@wdio/jasmine-framework": "^5.14.4",
    "@wdio/local-runner": "^5.14.4",
    "@wdio/spec-reporter": "^5.14.4",
    "chromedriver": "^77.0.0",
    "wdio-chromedriver-service": "^5.0.2"
  }
}

Now we can run your test like this

cmd.exe /c "npm run test"

We can save the previous command on a bash alias.

thanks for reading any suggestion or recommendation would be appreciated.