Setting up Selenium Webdriver with Node.js for automated testing

To get get started, we need 3 ingredients: Node.js, Selenium Webdriver and a browser driver.

What is Selenium Webdriver?

The Selenium open source project provides a range of tools for browser automation. Whilst the regression testing of websites is not the only thing Selenium Webdriver is built for, it is most often used for this.

Why use it with Node.js?

Node.js is a cross-platform JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. It lets developers write applications in JavaScript, the advantage being (among some speed improvements) many web developers are already familiar with this language.

What are browser drivers?

Browser drivers act as a proxy between your Selenium testing code and the browsers themselves.

• Chrome’s browser drivers: ChromeDriver
• FireFox’s browser drivers: GeckoDriver
• Edge’s browser drivers: Microsoft Edge WebDriver
• Safari has browser drivers already built in.

Let's create a simple 'test'

The goal here is to simply open FireFox, navigate to Google and search for the term “Hello World!”, display the results for 5 seconds, then quit.

1. If you haven’t already, download and install Node.js.
2. Create a new project/directory, open it in terminal and run npm init to create a new Node.js project.
3. Install Selenium Webdriver with npm install selenium-webdriver
4. Download Geckodriver for Firefox. I just placed this in my newly created directory.
5. Add the Geckodriver.exe file to your PATHS variables. On Mac, get the route to the file (right click > Get Info), then run the command sudo vi /etc/paths in your terminal (using Vim) and add the path on a new line. Use echo $PATH to check if it was added correctly. On Windows there is a GUI to do this.
6. Create a new file in your directory (eg: test.js) and paste in the following code:

const {Builder, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser("firefox").build();
  try {
    await driver.get('http://www.google.com');
    await driver.findElement(By.name('q')).sendKeys('Hello World!', Key.RETURN);
    await driver.wait(until.titleIs('Hello World! - Google Search'), 5000);
  } finally {
    await driver.quit();
  }
})();

Let's break down what's going on here:

• We're running a Selenium function that first triggers a new instance of FireFox.
• We're telling that instance of FireFox to navigate to google.com
• We're finding the element with the name q (aka the Google search text input field) and entering the values Hello World! by simulating keyboard inputs, followed by the Return key.
• We're waiting until the title of the page becomes Hello World! - Google Search (note this must be an exact match), then waiting 5 seconds before closing the browser down.

Finally, let's try to run this script. Run the command node test.js from your terminal.

Firefox should fire up on it’s own, redirect to google.com and search for the term “Hello World!”, then close itself after 5 seconds.

Troubleshooting

Didn't work? Try the following:

• Ensure your chosen WebDriver version matches up with your browser's version. I found FireFox and Geckodriver to be a little more forgiving in terms of this problem.
• If things are happening a little too fast you can comment out the line await driver.quit(); so that FireFox does not automatically close.
• Do your own manual search for "Hello World!" and ensure the Google search results page's title text matches up with 'Hello World! - Google Search'.

---

Photo by Rodolfo Clix: https://www.pexels.com/photo/photo-of-clear-glass-measuring-cup-lot-1366942/