This tutorial is for setting up a web test framework in node.js. Previously, I’ve shown you how to create similar frameworks in Ruby and C#. This post should help you add another language to your testing arsenal.
Why node.js?
There are lots of reasons to choose various different languages for your web tests. My default is Ruby as it’s the nicest language to code in (in my opinion), it has lots of support within the testing framework and it’s easy for new people to pick up (should you have any new team members). Ruby developers are also the friendliest 🙂
However, you may be the only person in your team who knows Ruby. In which case, picking a language that is already known by your developers is probably a good choice. All too often, test frameworks are written by testers and never used by developers at all. If your framework is written in a language your developers use & enjoy, it stands a much better chance of being used by people other than yourself.
This is where node.js comes in. Every web developer will know JavaScript and most server side developers will be proficient, too.
Prerequisites
This first section details a few things you’ll need to install before we can start. You may already have some (or all) of them, in which case you can just skip the relevant steps.
First, you’ll need in install Homebrew, if you don’t already have it. Homebrew is a package manager for MacOS. To install Homebrew, navigate to http://brew.sh/ in your favourite browser.
You’ll see that near the top there’s a curl command you need to copy to install it. Simply copy that into your clipboard and paste it into your terminal window then hit return to run it. You’ll need Xcode installed, but if you don’t have it you will see a pop up in the middle of the installation.
Now that you have Homebrew installed, you can use it to install Node.js (the language that webdriver.io is written in). Execute the following command in your terminal:
brew install node
Next, you’ll have to install the Java Runtime Environment. Selenium, the server you’ll be using to interact with each web browser is a Java application. Navigate to the following URL in your browser: https://java.com/en/download/
Once there, you can click on the red button and install Java on your Mac.
Next, we need to install Firefox, as that’s one of the easiest browsers to automate. Navigate to the following URL to download and install it: https://www.mozilla.org/en-US/firefox/
Finally, you’ll need a good text editor to write your test code. I recommend Atom as a good beginner’s tool. You can download and install it from here: https://atom.io/
Creating The Framework
Now that we have the basics installed, we can start to create our test framework. Go back to your terminal and navigate to where you normally store your code. Now execute the following to create a folder for our project, then navigate there:
mkdir webdriverio-test && cd webdriverio-test
You will now be in that directory in your terminal. We’re going to initialise this as a node project using NPM (Node Package Manager). NPM was installed earlier, with Node. Run the following:
npm init –f
This will initialise our project with default values and save them in a file called package.json. This is where important information about our project is stored, such as which node packages are need to run and their versions. If you want to see the different options available to you, simply run the same command without –f. You will then be asked some questions about the project. You can either answer them or accept the default values. For speed, we just accepted everything as default and we’ll make any necessary changes later.
Next, we need to install webdriver.io. We can do this via NPM as well. Execute the following command:
npm install webdriverio --save-dev
This command will do two things. It will install webdriver.io and add that piece of information into your package.json file. You can open it up in Atom to take a look, if you like.
We’ll also need to install Selenium, our webdriver. There are a couple of ways of doing this. We can either install it ourselves and run it in the background (in another terminal window), which will work just fine, or we can use a handy standalone server feature of webdriver.io. I’ve chosen to use the standalone server, as it’s quicker and easier. Execute the following in your terminal:
npm install wdio-selenium-standalone-service --save-dev
This will install the webdriver.io selenium standalone service (and update your package.json file with this new information). Because we have the standalone service, we no longer need to worry about Selenium and if it’s up & running in a terminal window, somewhere. Whenever we run our tests, webdriver.io will now start and stop Selenium when necessary.
The final package we need in install is Chai. We’ll be using Chai for our assertions.
Install Chai and the Chai/Webdriver.io packages with the following:
npm install chai --save-dev
npm install chai-webdriverio --save-dev
Now that we have everything we need, we can run webdriver.io to help us set up our test project. Execute the following in your terminal:
./node_modules/.bin/wdio config
You will now be asked some more questions. Of course you’re free to answer how you see fit, but I’ve provided the answers needed to complete this tutorial:
Q: Where do you want to execute your tests?
A: On my local machineQ: Which framework do you want to use?
A: mochaQ: Shall I install the framework adapter for you?
A: Yes (just press enter)Q: Where are your test specs located?
A: ./test/specs/*/.js (just press enter)Q: Which reporter do you want to use?
A: conciseQ: Shall I install the reporter library for you?
A: Yes (just press enter)Q: Do you want to add a service to your test setup?
A: Selenium Standalone ServiceQ: Shall I install the services for you?
A: Yes (just press enter)Q: Level of logging verbosity:
A: silent (just press enter)Q: In which directory should screenshots gets saved if a command fails?
A: ./errorShots/ (just press enter)Q: What is the base url?
A: http://localhost (just press enter)
Writing Our First Test
Now, we’re ready to start writing our tests.
One of the config questions asked by webdriver.io was where our tests will be saved. We chose the default directory, so we’ll need to create that now. Execute the following in your terminal:
mkdir -p ./test/specs
We can now create our first test script. Open Atom and navigate to our project directory (wherever it is you created it). Next, create a new file in the test/specs directory. You can call it whatever you want, but it must have the .js extension. Something like first_test.js will be fine.
Copy and paste the following code into your new file, then save it.
const chai = require('chai');
const expect = chai.expect;
describe('Our frst test', function() {
it('should have the correct title', function () {
browser.url('http://google.com');
expect(browser.getTitle()).to.equal('Google');
});
});The first part of that script sets up Chai. The second part is our test. The test uses webdriver.io’s browser object to navigate to a URL (in this case, Google’s) and then check the title of the webpage (using Chai).
Earlier, webdriver.io asked us which test framework we wanted to use. We picked Mocha, a popular framework written in node.js. Our test is written in Mocha’s desired format. You can read more about Mocha, here: https://mochajs.org/
In a further tutorial, we’ll set up webdriver.io with cucumber.js for your BDD tests.
Running the test
It’s time to run your test!. Run the following in your terminal:
./node_modules/.bin/wdio wdio.conf.js
Hopefully, your test will pass (go green). You can now experiment with it and make it fail, if you like. Simply change the assertion at the end to check for a different title.
One last thing. There’s a handy section in your package.json file to enable you to run pre-defined scripts. Load it in Atom and take a look at where it says scripts. You will see that test is already defined (although it doesn’t do anything except warn the user, yet). Replace the pre-defined line with ./node_modules/.bin/wdio wdio.conf.js then save the file.
Now, go back to your terminal and run the following:
npm test
Your tests should now run!
