Automated UI Testing with Selenium and JavaScript

Selenium is an excellent portable framework for test automation that is compatible across every programming language to automate your web application testing. What makes it even better is that it is an open-source test automation framework with a large community support. Selenium has played a pivotal part in go-to-market launches of web-applications worldwide. It makes the overall automation testing process easier if you are using an automated testing tool like LambdaTest. 

LambdaTest is an online automated testing selenium grid that focuses on testing the visual aspects of your web app to display the visual differences between baseline snapshots and both future and current snapshots. It can be integrated with various testing frameworks like TestNG, Selenium, etc. 

Today, we are going to talk about how to automate UI testing of your JavaScript web app with Selenium. But, before that, let’s gain some knowledge about Selenium WebDriver.

Selenium WebDriver

Selenium WebDriver is a part of the Selenium suite, and it is mostly used to test web applications. Also, Selenium can be used for almost any job that requires automated interaction with a browser. The WebDriver performs as a layer on the top of the WebDriver Standard to provide unified programmatic access for all browsers that are compatible with WebDriver implementation.

For example, if you install ChromeDriver on your system in the right manner, the Selenium Script will automatically detect the WebDriver. After that, Selenium will send the instructions to ChromeDriver so that it can control the Chrome browser. Likewise, if you use the Firefox browser installing Firefox Driver, then Selenium will integrate with it for controlling the browser. In short, Selenium provides a standard API to run test scripts on multiple browsers and platforms.

JavaScript Frameworks

Most software applications are web-based applications that require a web framework for testing the web app. JavaScript is the most used language for web application development because it is simple and flexible, as well as it allows you to build complex web solutions. There are many advantages of using a JavaScript framework, such as:

  • Secure – JavaScript frameworks provide firm security arrangements and are supported by large communities
  • Efficient – JavaScript frameworks comes with pre-built patterns and functions, which allow them testing a project much faster
  • Cost – Usually it requires money to purchase a framework, but most of the JavaScript frameworks are open-source and free to use

Here, we will perform the end-to-end visual testing of a web app with Selenium using Node.js because it is easy to get started.

Before starting the test, make sure you have installed these items on your machine properly:

  • Selenium WebDriver
  • Chrome Driver

Step 1: Setting up Selenium in Node.js

To begin with Selenium automation using Node.js, you need to set up a new npm project, and then install a framework that allows you to work with Selenium form inside Node.

As mentioned above, we will use Selenium WebDriver because it’s documentation is easy and up-to-date. However, if you are interested in other options, then prefer choosing webdriver.io and Nightwatch.js.

To install Selenium WebDriver for your npm project, run the below command:

npm install selenium-webdriver

After installing the WebDriver, you need to install the relevant drivers that allow WebDriver to control the browsers you want to test. Here, we will be executing our tests over the Chrome browser and Firefox browser.

Step 2: Installing Chrome Browser/Driver

  1. To install Chrome browser visit: https://www.google.com/chrome/
  2. To install Chrome Driver that meets your system requirements and browser, visit: http://chromedriver.chromium.org/downloads
  3. Unzip the download file on your system.
  4. Now, add the Chrome Driver path to your system’s PATH so that Selenium can quickly locate it. To select a path on Windows, follow the below steps:
  • Go to Computer and right-click on it to select Properties, and then go to Advanced System Settings
  • In the Advanced Tab, select Environment variables, and then click System Variables
  • Select the line with the Path key and click Edit
  • Add (;) at the end of the values and add the location where the unzipped Chrome Driver is stored

Similarly, you can download and install a gecko-driver for the Firefox browser.

Step 3: Setting PATH Variable for Operating System

If you are using Windows OS, then check out How to add a new folder to the system path to set your PATH variable. And if you’re using Mac OS X or any Linux system, then follow the below steps to set your PATH variable.

 

  1. Open the .bash_profile file in the directory and paste the below command at the bottom of the file:

 

#Add WebDriver browser drivers to PATH

export PATH=$PATH:/Users/bob

 

       2. Now save the file and restart the command prompt to apply the saved changes.

3. To verify whether the new paths are in the PATH variable or not, run the below command in the command prompt:

 

echo $PATH

The new paths will be visible in the command prompt.

Now, let’s perform a small and quick test to ensure everything is working. Below we will create a new file inside the project directory to execute the tests.

 

  1. Create a new file in the project directory known as google_test.js
  2. Now, write the below code in the files and save it:

const webdriver = require(‘selenium-webdriver’),

    By = webdriver.By,

    until = webdriver.until;

const driver = new webdriver.Builder()

    .forBrowser(‘firefox’)

    .build();

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

driver.findElement(By.name(‘q’)).sendKeys(‘webdriver’);

driver.sleep(1000).then(function() {

  driver.findElement(By.name(‘q’)).sendKeys(webdriver.Key.TAB);

});

driver.findElement(By.name(‘btnK’)).click();

driver.sleep(2000).then(function() {

  driver.getTitle().then(function(title) {

    if(title === ‘webdriver – Google Search’) {

      console.log(‘Test passed’);

    } else {

   console.log(‘Test failed’);

    }

    driver.quit();

  });

});

 

       3. Go to the Terminal and make sure you are inside the project folder, and then run the below command:

node google_test

An instance of Firefox will start running automatically, as well as Google will be loaded in the tab with ‘webdriver’ in the search box with the search button being clicked. If the search result appears as “webdriver – Google Search,” it means the test is passed. After that, WebDriver will automatically shuts down the Firefox instance and stop.

Testing in Multiple Browsers at Once

If you want to test your web app in multiple browsers at once, then it can also be achieved easily with Selenium. Let’s have a look at the below example:

 

  1. First of all, create a new file in your project directory and name it something like google_test_multiple.js. You can add or remove browsers in the code as per your requirements. Before executing the tests, ensure that you have all the necessary browser drivers set up on your system for the browsers you want to run your test across.
  2. Now, paste the below code in the new file we created above, and then save the file.

 

 

 

 

const webdriver = require(‘selenium-webdriver’),

    By = webdriver.By,

    until = webdriver.until;

let driver_fx = new webdriver.Builder()

    .forBrowser(‘firefox’)

    .build();

let driver_chr = new webdriver.Builder()

    .forBrowser(‘chrome’)

    .build();

searchTest(driver_fx);

searchTest(driver_chr);

function searchTest(driver) {

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

  driver.findElement(By.name(‘q’)).sendKeys(‘webdriver’);

  driver.sleep(1000).then(function() {

    driver.findElement(By.name(‘q’)).sendKeys(webdriver.Key.TAB);

  });

  driver.findElement(By.name(‘btnK’)).click();

  driver.sleep(2000).then(function() {

    driver.getTitle().then(function(title) {

      if(title === ‘webdriver – Google Search’) {

        console.log(‘Test passed’);

      } else {

        console.log(‘Test failed’);

      }

      driver.quit();

    });

  });

}

 

     3. After saving the file, enter the below command in your project folder:

node google_test_multiple

The above code might help you test your web app across almost every browser, but it might show an error if you’re using Mac and want to test the Safari browser. To test your app across Safari, you need to enable the “Allow Remote Automation” option in the Safari browser’s Develop menu so that Selenium WebDriver can control the browser.

So, here we performed visual UI testing of web app across multiple browsers. Though the process is not that complicated, it takes too much time to automate it because you need to install a testing framework on your system or write different test scripts for different browsers.

Automating UI testing with LambdaTest

If you want to save yourself some time and effort, then LambdaTest is a great tool for visual UI testing of your web app with Selenium. LambdaTest is a scalable cloud testing platform that can fulfill all your needs related to software testing. It even allows you to test your web app across a combination of more than 2000 browsers and operating systems. Also, when it comes to visual UI testing of a web app, LambdaTest provides the screenshot API feature that makes it easier for users to check the visible appearance of their site across multiple browsers from one system. But, before you use LambdaTest, you need to generate an access key to run your tests. To create the access key:

 

  1. Go to LambdaTest and register with your user name and ID
  2. After signing in with your account, click on the left menu and select Generate Access Key.
  3. An access key will be mailed to your registered email address

 

After generating the access key, replace the ‘username’ and ‘accessKey’ placeholders with the actual name and access key in your code, and then run the below command:

node index.js

It will reflect the test results on your LambdaTest dashboard. You can even extract these results for reporting purposes with the help of LambdaTest restful API.

Conclusion

JavaScript has become a trending language for web app development. Also, due to broad community support and testing frameworks, most developers prefer to use only JavaScript for their projects. But, when it comes to automated testing of web apps with Selenium, most developers get confused about where to begin with. In this article, we talked about automating visual UI testing of the web with Selenium and JavaScript framework Node.js, as well as we spoke of LambdaTest that can make the overall visual testing process easier.