Welcome to an easy and simple guide to installing WebDriverJS. WebDriverJS is a Web Automation framework which we can use to emulate user actions in a web browser such as Chrome or Firefox. It is a great tool when used in conjunction with NodeJS. In this tutorial we will firstly ensure we have all the required tools in place to eventually write a basic script which will open a Chrome browser and navigate to www.thetestroom.com, let’s begin.
Installing WebDriverJS – Installing NodeJS
There are a number of ways to install WebDriverJS but perhaps the most efficient and simplest way is to do it through ‘npm’. ‘npm’ is NodeJS’s package manager and it really helps to download modules and dependency through the command line very easily. We will see how to use ‘npm’ soon(ish), firstly we need to install NodeJS.
Navigate to NodeJS.org and download the LTS version. This is assumed to be the most stable version and should be very comfortable to use. Once downloaded simply run the installer.
Now that you have installed NodeJS on your machine lets check if the installation succeeded. Open a console window and type in the following:
This should return the version of NodeJS which you downloaded. With this done now let’s check to see that you have ‘npm’ installed. Type the following in the console window:
This should return the version of ‘npm’ you have. Great, we now have both NodeJS and ‘npm’ installed.
With NodeJS now ready, let’s go ahead and start setting up our project directory. Navigate to a directory of your choice and create a new folder called ‘webdriver-js-project’. Before we actually begin to use ‘npm’ to install WebDriverJS we should spend a second or two deciding on which web browser to run our WebDriverJS scripts against? There are a number of options but for the moment (and to keep things a little simple) I would suggest we roll with ChromeDriver. ChromeDriver is an executable file which is used to control Chrome. This means you will need to have Chrome installed on your machine. Ensure that you have Google Chrome installed and once confirmed navigate to ChromeDriver and download the latest ChromeDriver. Once Downloaded simply extract the driver and place the exe file in the ‘webdriver-js-project’ folder.
Great stuff, you now have both Google Chrome as well as the driver ready on your machine. The final step of the setup phase is to download WebDriverJS via ‘npm’. Open a command windows (or terminal) and ensure you are in ‘webdriver-js-project’ and run the following command:
npm install --save--dev selenium-webdriver
This will install WebDriverJS locally in ‘webdriver-js-project’. If you have a quick look now at your project then you will notice that now there is a new directory called ‘node_modules’. If you dig into that folder then you will also notice that it contains a ‘selenium’ folder. Congratulations, we just used ‘npm’ to install WebDriverJS.
We now have all the required components to start writing our first script in WebDriverJS.
Writing A Basic WebDriverJS Script
var webdriver = require('selenium-webdriver');
Let’s discuss what is happening in the line above. The line above is declaring a new variable called webdriver. We then assigned selenium-webdriver (the same module which we installed via ‘npm’) to that variable we gained access to the building methods inside Selenium. With this said let’s create our driver variable:
var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build();
As you can see we are now able to use our webdriver variable to identify the browser we want to use and build it as part of a driver instance. Once we build the instance we are able to assign this to a driver variable. The driver variable now contains all the methods which can now allow us to interact with the chrome browser. With this said lets actually do something with the browser, let’s try to navigate to a URL:
The line above uses the driver variable that we created and makes a call to the ‘get’ method. This method is used to navigate to a URL. Your test.js file should now look like this:
var webdriver = require('selenium-webdriver'); var driver = new webdriver.Builder().withCapabilities(webdriver.Capabilities.chrome()).build(); driver.get('http://www.thetestroom.com');
With the script now ready let’s actually run the file. Using command line navigate to ‘webdriver-js/project’ directory and run the following command:
This should have now opened a Chrome browser and navigated to www.thetestroom.com. Congratulations as you have just written your test script using WebDriverJS.