Selenium with JavaScript : Getting Started with Automation Testing

With the ever-expanding scope of web applications, both in terms of technology and functionality, user expectations have increased manifold. Every few weeks, new features are added to web applications for higher user engagement. In order to test these features and ensure that the UI is working well, automated testing is necessary. For testers across the world, Selenium is the first choice for executing automated tests.

Selenium is an open source automation testing tool that supports a number of scripting languages like C#, Java, Perl, Ruby, JavaScript, etc. Depending on the application to be tested, one can choose the script accordingly.

JavaScript is a popular choices when it comes to scripting, as suggested by the StackOverflow's Annual Survey 2021 that is Loved by 61.51% and Dreaded by 38.49% of the 82,000+ respondents.

Why do developers prefer JavaScript for writing Selenium test scripts?

JavaScript is widely used for developing web applications, as a large fraction of web applications are developed using the MEAN stack (MongoDB, Express.js, AngularJS, and Node.js).

• Selenium WebDriver with JavaScript is a favorable combination to perform automated UI testing of applications.
• JavaScript offers efficiency with its well built and structured patterns and functions, making the script more compact.
• It offers security and is well supported by a large community of developers.
• These are open source and free of costs, which helps in decreasing the overall cost of testing.

It is essential to perform an in-depth evaluation of the application under testing before choosing the scripting language for automated testing with Selenium WebDriver.

Getting started with Selenium using JavaScript

Selenium offers great flexibility when it comes to testing. Whether it is platforms like Windows, Linux, Solaris or the browsers like Chrome, Firefox, Edge, IE, or Safari, Selenium allows platform-independent, cross-browser test functionality with no licensing costs.

Here’s how to get started with the Automated UI testing of an application using Selenium WebDriver and JavaScript:

Prerequisites of the Setup Configuration

1. Node.js (comes bundled with npm, i.e. Node package manager). For those comfortable with using Maven in Java, consider this to be the equivalent package manager for JS.
2. Any IDE to write the code. The example in this article uses Eclipse.

Step 1: Install Node.js npm

One can download Node.js and npm, then check that it is installed by running the following commands in the terminal.

node -v (to check Node.js is installed)

npm -v (to check npm is installed)

Once the user has installed Node.js, they will get access to the npm, an inbuilt package manager which will be used to install Selenium for JS.

Step 2: Install Selenium WebDriver

One can download Selenium WebDriver, and install it by running the following command in the terminal by using the Node’s built-in package manager (NPM) to get the package.

npm install –save selenium-webdriver

(–save creates a new package. This would be saved to the project’s package.json file.)

From this page, get download links to the actual drivers that Selenium uses to command different browsers.

It is highly recommended to download links to drivers that the tester wants to work with (for example, Chrome and Firefox). Save them in a separate folder in separate directories and then add those folders to the system PATH. Once this is done, Selenium will be able to start the browser that the user tells it to, by using those executables.

Step 3: Install Eclipse

To perform Automation Testing, IDE is a platform that is required to write the test script. Here we use Eclipse. You can download Eclipse, and run the downloaded file.

Step 4: Install Selenium Webdriver and Client language bindings

Selenium WebDriver and client language bindings are important to establish a connection between the WebDriver and the client and perform testing. Here are the links to install the Selenium WebDriver and client language bindings:

• Download JavaScript Language Bindings
• Changelog
• API Docs

Step 5: Creating and running test script using JavaScript and Selenium

Let’s write the first test script using JavaScript. The code will navigate to the Google.com page, and fetch its title on the console using the promise function.

var webdriver = require(‘selenium-webdriver’);

var browser_name = new webdriver.Builder();

withCapabilities(webdriver.Capabilities.firefox()).build();

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

var promise = browser_name.getTitle();

promise.then(function(title) 

{

console.log(title);

});

browser.quit();

The code sets aside the instance of Selenium WebDriver, and then builds the browser using WebDriver and the Firefox plugin. In the browser, the code opens Google and fetches its title using promise. This title is then sent as output to the console before quitting the browser.

Best Practices for using JavaScript with Selenium WebDriver

Here are some of the best practices to follow while using JavaScript with Selenium for automated testing:

• Use the Right Locators: As the Selenium framework is meant to interact with the browser, it is essential to use the right locators for better navigation of the objects with the DOM (Document Object Model).

- Perform Data-Driven Testing:
For accurate results, make sure the testing is data-driven, as it will help to perform functional testing faster.

- Use PageObjects:
To enhance the overall maintenance and reduce redundancy and duplication, use PageObjects. Here the webpages are defined as classes, and the various elements on it are defined as variables, where the user interaction is implemented in the form of methods.

- Choose the right selector order:
Selector Order is important for faster testing. Get the right Selector Order i.e. (XPath < CSS < Links Text < Name < ID) in place for better results. Learn about different locators in selenium.

Selenium WebDriver has made automation testing easier and more efficient than ever. By using JavaScript to create test scripts, it is easy to perform automated UI Testing for applications. This is useful especially when development cycles are short and the features have to be added every few weeks to keep up with the users’ demand.

Selenium is widely recommended due to the flexibility it offers. It supports major platforms like Windows, Linux, etc. and browsers like Chrome, IE, Edge, Firefox, and Safari as well as numerous scripts like Ruby, Perl, C#, Python, Java, JavaScript. With integrations of tools like TestNG Framework, one can get test results for further analysis, and improve the application.

To create an application with the optimal user experience, use cloud based Automation Selenium Testing tools like BrowserStack that offers access to browsers and real devices to test on. Testing on a real device cloud helps offer a seamless cross platform experience.