3. First Selenium Webdriver: JavaScript Code Example (with screenshots)

— 3 min read

Introduction

In this article, we will illustrate how to use the Selenium WebDriver using JavaScript programming with the Chrome web browser. We will also demonstrate how to extract the title of the Google website and compare it with a random character string.

Prerequisites

We hope that your installation of NodeJS and Selenium WebDriver went well.

Let’s Start to Code!

Open your favourite text editor to do the coding. You can use any text editor such as Notepad++ or Visual Studio code. However, we will use Visual Studio code in this tutorial. Our first step will be to create a file called JsWebDriver.js to write our source code**.**

Initially, we’ll create a local variable to load the Selenium WebDriver and communicate with other libraries.

the Chrome web browser. If you want to use other web browsers, then you have to set up the capability name, in this case browserName chrome.

var webdriver = require('selenium-webdriver');

var browser = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();

browser.get('https://www.google.com');

Now we have to mention which website the WebDriver needs to visit in order to complete the objective. You can provide any website you want. after that we want to compare the title name of google Therefor, we will also create another local variable to store the expected title of the website. You may choose whatever the wordings you want to - we will use “Google.”

The final step is to run both the functions so that it extracts the title and compares it with the expected title. For extracting the title and closing the browser, we will implement two functions. We will name the first function as compareTitles(), which will compare the extracted title with the expected title.

function compareTitles() {
    browser.getTitle().then(function(title) {
        if(title == expectedTitle) {
            console.log('The Website Title  (' + title + ') & Your Expected Title ('+ expectedTitle +') Matches!' );
        }else {
            console.log('The Website Title ' + title + ' & Your Expected Title ('+ expectedTitle +') Does NOT Match!');
        }
    })
}

Here, we are using a simple if-else condition to display the output. If both the titles are the same, then the positive output is displayed and vice-versa.

We will implement the second function closeBrowser(), which will simply close the browser after extracting the title.

function closeBrowser() {
    browser.quit();
}

Now all our coding is completed. You should open the terminal and run the saved file. To open the terminal click Terminal and then New Terminal.

VisualStudioCode

VisualStudioCode

After that a terminal will open at the bottom and you have to navigate to the location where you saved the file.

Now use the following node command to execute the JavaScript file.

node JsWebDriver.js

succssfulrunjavascriptselenium

As expected, the output is “The Website TitleĀ  (Google) & Your Expected Title (Google) Matches!

The complete JavaScript codes are as follows:

var webdriver = require('selenium-webdriver');
var browser = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();
 
browser.get('https://www.google.com');
 
var expectedTitle = "Google"
function compareTitles() {
    browser.getTitle().then(function(title) {
        if(title == expectedTitle) {
            console.log('The Website Title  (' + title + ') & Your Expected Title ('+ expectedTitle +') Matches!' );
        }else {
            console.log('The Website Title ' + title + ' & Your Expected Title ('+ expectedTitle +') Does NOT Match!');
        }
    })
}
 
function closeBrowser() {
    browser.quit();
}
browser.then(compareTitles).then(closeBrowser);

This is a screenshot of how it should appear on your screen.

completejavascriptcodeseleniumtutorial1

completejavascriptcodeseleniumtutorial1