Easy Free Automation Part IV: UI Tests

I'll be honest: UI tests are my least favorite automated tests.  This is because they are often so hard to set up.  There are dozens of different ways to run automated UI tests, but this can make things more confusing because it's hard for someone new to automation to figure out what to do.

So when I prepared to write this week's post, my primary goal was to make it as easy as possible to get started with UI testing.  And of course, I also wanted the framework to be free, with no need to purchase a tool.

I've arrived at a way to get up and running with UI automation using Node and Selenium Webdriver in just six steps.  While I have only tested this process on two computers, I believe these steps will be effective for most people.  The one prerequisite is that you need to have Chrome installed, because that's the browser that we will be using for the test.

Setting Up Automated UI Testing in Six Easy Steps:

1. Open up a command window and verify that you have Node.js installed by typing
node --version
If you get a version number in response, you have Node installed.  If it's not installed, you can install it here: https://nodejs.org/en/.

2. If you needed to install Node in Step 1, add Node to your system's PATH (see instructions for Windows here and instruction for Mac here).  After you've done this, reboot your computer so the new PATH will be recognized.  Check one more time that Node is installed by typing
node --version again.

3. When you install Node, the npm package manager should be installed automatically.  Verify that npm is installed by typing
npm --version
If you get a version number in response, npm has been installed.  If not, you can check this link for instructions about installing npm.

4. Open a browser and go to this GitHub repo.   If you have Git installed, you can clone the project.  If not, you can download a zipfile of the project and extract it.

5. In the command window, navigate to the folder where the project has been installed.  The project folder should contain a test.js file and a package.json file.  (See instructions here about navigating in the command line.)  Type this command:
npm install
This will install everything you need to run the automated test.

6. Type this command:
node test
This will run the test.js file, which has one test.  You should see an instance of Chrome browser open, run the test, and close again!

Let's take a look at what the test.js file does:

var webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;
var chrome = require('selenium-webdriver/chrome');
var path = require('chromedriver').path;

var service = new chrome.ServiceBuilder(path).build();
chrome.setDefaultService(service);

var driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .build(); 

The purpose of all of this code is to require webdriver and chrome driver, setting up the Chrome driver, and to set up the "By" and "until" classes, which are helpful for automated UI testing.

driver.get('http://www.google.com');

This command tells the driver to navigate to the Google home page.

driver.findElement(By.name('q')).sendKeys('webdriver\n');

This command tells the driver to find the web element named "q", which is the search box; type "webdriver" into the search box; and click the Return key.

driver.findElement(By.partialLinkText("seleniumhq")).click();

This command looks through the search responses for the element that has "seleniumhq" in the link text, and once the element has been found, it clicks on it.

driver.wait(until.elementLocated(By.id('sidebar')));

This is waiting for the Selenium Webdriver page to load by watching for the element with the id called 'sidebar'.

driver.getTitle().then(function(title) {
    if(title === 'Selenium WebDriver') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
    driver.quit();
});

Once the element has been located, then the driver looks at the title of the page and checks to see if it is what was expected.  If the title matches "Selenium Webdriver", it logs to the console that the test passed, and if it does not match, it logs to the console that the test failed.  Finally, the driver closes the browser window.

Hopefully this post has helped you with the most difficult part of automated UI testing- the setup!  Once you are up and running, there are lots of great tutorials that describe how to locate and interact with browser elements using Webdriver.  You can find the documentation for the Webdriver By class here, and I have some old blog posts about element locators here, here, and here.   The posts were written for Java, but the same concepts apply when you are locating elements in Node.

The most important thing to remember about automated UI testing is that it should be done sparingly!  Whatever you can test with unit and services tests should be tested that way instead.  UI testing is best for validating that elements are on a web page, and for running through simple user workflows.  Next week, we'll go on to an important addition to UI testing: visual testing.

UPDATE: If you are experiencing an issue where you get an "unhandled promise rejection", try running this command:  npm install selenium-webdriver@3.6.0 and then try running the test again.