How to Add Webdriver IO Version 6 to an Existing Node/Npm Project
By: Nick G.
Tags: Software Testing, JavaScript, Nodejs, Software Development, Webdriverio

So I thought I’d write up a tutorial on how to get up and running with WebdriverIO version 6 in any node/npm project.

For this example I’m assuming that you are an automation engineer or aspiring automation engineer who is currently working on adding an E2E test framework into an existing node/npm repository. Meaning that the repository already has a package.json, we’ll be adding our wdio packages to this file as dev dependencies. If you’d like to learn more about the differences between regular dependencies vs. dev dependencies, check out this article

Ok let’s get started!

First off, using your terminal of choice, navigate over to the local instance of your repository and pull all the latest changes. You’ll need to have git installed on your computer to be able to use the git commands.

Mac users — follow this article to get set up with git.

Windows users — follow this article to get set up with git.

cd ~ // this will get you to the root directory of your computer

cd path/to/my/repo //i.e cd Desktop/myRepoFromGithub

git pull

If you don’t already have a local copy of the repository and need help cloning it down, check out this article to learn how to do that.

If you don’t have a repository to work on, you can use the one that I’ll be using for this tutorial. It is located here.

*Disclaimer — All the credit of the repository I’m using goes to Sahat Yalkabov and the many contributors that helped put that boilerplate project together.

Make sure to Fork the repository to your own GitHub account before you clone it down!

(You will need to install MongoDB if you are going to be using the same repository that I am using. I will list some MongoDB resources at the end of this article. Ignore this if you are using your own repository.)

Now, you should be on the master/main branch of the repository with the latest changes.

Next we’ll want to install all the existing npm packages in the repository. You’ll need to have node installed on your computer in order to run npm commands. Follow this article to learn how to install it.

For people that cloned the repository for the first time or who have never executed an npm command, run the following command to install the existing packages

npm install

You should see a new directory named node_modules appear in your repository.

For people who already had a local instance of the repository and have the packages installed, it’s probably a good idea to run the command again to ensure that you have the latest packages. Before you run the npm command above, delete you’re existing node_modules directory and your existing package-lock.json file. These things will be auto generated again once you run the npm command above.

So at this point you should have all the packages required by your repository installed. You’ll now want to run the application to test that everything is working as expected.

*Note — the command used to start your application may differ from the one I’ll use. To find this command, look in your package.json file under the scripts object.

Run the following command to start the application if you’re using the same repository I’m using

npm start

(make sure you have MongoDB running in a separate terminal window or else you’ll get an error when you try to start the application.)

If everything went according to plan, you should now be able to see the application running at the address http://localhost:8080/

Go ahead and stop running your application for now by pressing CTRL-C to stop

Cool! Now we can start with our E2E test framework!

Head over to https://webdriver.io/docs/gettingstarted.html

The people at WebdriverIO have done a really great job of writing up documents to get started, definitely a good idea to bookmark the site if you plan to use WDIO.

Ok first things first, let’s create a new branch using our terminal window. You should be in your project on the master branch when you do this.

git checkout -b wdio-tests

You should now be on a branch labeled wdio-tests

Next, we’re going to create a directory to store our webdiver io tests in our project

mkdir webdriverio-test && cd webdriverio-test

Next, we’ll install our first wdio package

npm install --save-dev @wdio/cli

Once that completes downloading, run the next command to generate a configuration file to store your WebdriverIO settings.

npx wdio config -y

The command above will also install more wdio packages.

At the time I was writing this tutorial, these were the packages that were installed

"@wdio/cli": "^6.10.11", "@wdio/local-runner": "^6.10.13", "@wdio/mocha-framework": "^6.10.11", "@wdio/spec-reporter": "^6.10.6", "@wdio/sync": "^6.10.11", "chromedriver": "^87.0.4", "wdio-chromedriver-service": "^6.0.4"

You should also see that the command created a few more directories and files within your webdriverio-test directory. More importantly, you’ll see that a wdio.conf.js file was created. This file is super important as it contains all the settings for your WDIO E2E framework. For more info on the type of things you can set in this file visit the webdriverIO docs here

You may have also noticed that a sample test file was created example.e2e.js , inside you should see the following code:

const LoginPage = require('../pageobjects/login.page'); const SecurePage = require('../pageobjects/secure.page'); describe('My Login application', () => { it('should login with valid credentials', () => { LoginPage.open(); LoginPage.login('tomsmith', 'SuperSecretPassword!'); expect(SecurePage.flashAlert).toBeExisting(); expect(SecurePage.flashAlert).toHaveTextContaining( 'You logged into a secure area!'); }); });

This is a standard E2E test, I won’t go into the details of writing tests in this tutorial, just know that this is a widely followed standard.

Now for the thing you’ve been waiting for, let’s run our sample test!

Run the following command

npx wdio wdio.conf.js

This should fire up a chrome browser and it should navigate to the following website https://the-internet.herokuapp.com/login

And you should see the following output in the terminal

"spec" Reporter:

------------------------------------------------------------------

[chrome 87.0.4280.88 mac os x #0-0] Spec: /Users/Nick/Desktop/openSourceProjects/hackathon-starter/webdriverio-test/test/specs/example.e2e.js

[chrome 87.0.4280.88 mac os x #0-0] Running: chrome (v87.0.4280.88) on mac os x

[chrome 87.0.4280.88 mac os x #0-0] Session ID: 2627d7e5b0fb5b5558ddb9f21f3c4c2e

[chrome 87.0.4280.88 mac os x #0-0]

[chrome 87.0.4280.88 mac os x #0-0] My Login application

[chrome 87.0.4280.88 mac os x #0-0] ✓ should login with valid credentials

[chrome 87.0.4280.88 mac os x #0-0]

[chrome 87.0.4280.88 mac os x #0-0] 1 passing (6.5s) Spec Files: 1 passed, 1 total (100% completed) in 00:00:11

2020-12-20T19:01:50.614Z INFO

2020-12-20T19:01:50.614Z INFO 2020-12-20T19:01:50.356Z INFO @wdio/local-runner : Shutting down spawned worker2020-12-20T19:01:50.614Z INFO @wdio/local-runner : Waiting for 0 to shut down gracefully2020-12-20T19:01:50.614Z INFO @wdio/local-runner : shutting down

Congratulations!! You’ve successfully added an E2E test framework to an existing node.js project. Have a beer or your drink of choice, you deserve it!

At this point you would commit your code changes and create a pull request to have your changes merged into the master branch. Once merged, you can go back to your master branch in the terminal and pull the latest changes to see that everything was merged correctly.

I’ve also added the completed example I was using down below, feel free to look it over and reach out with any questions!

Additional Resources —