Setting up Selenium Webdriver with Node.js for automated testing
Tags: javascript, node, testing, selenium
Published: 2024-05-21 00:25:55

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](https://developer.chrome.com/docs/chromedriver/)
- FireFox’s browser drivers: [GeckoDriver](https://github.com/mozilla/geckodriver/releases)
- Edge’s browser drivers: [Microsoft Edge WebDriver](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/?form=MA13LH)
- 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](https://nodejs.org/en).
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](https://www.npmjs.com/package/selenium-webdriver) with `npm install selenium-webdriver`
4. Download [Geckodriver](https://github.com/mozilla/geckodriver/releases) 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](https://www.c-sharpcorner.com/article/how-to-addedit-path-environment-variable-in-windows-11/).
6. Create a new file in your directory (eg: `test.js`) and paste in the following code:

```javascript
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/