Selenium with JavaScript : Getting Started with Automation Testing

Every few weeks, new features are added to web applications for higher user engagement. Automated testing is necessary to test new features and ensure that the UI is working well. Selenium is one of the popular Automation Testing Tools.

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 one of the most popular choices when it comes to scripting with 62.3% of the developers using it, as suggested by the StackOverflow 2024 annual survey.

This article helps you understand how to perform Automated Testing using Selenium Javascript from basics using simple example.

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 cost, 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: Tutorial

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, and then check that it is installed by running the following commands in the terminal.

• To check Node.js is installed

node -v

• To check npm is installed

npm -v

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.

Selenium JavaScript Resources

• Page Object Model in Selenium and JavaScript
• How to get data of attributes in JavaScript using Selenium
• How to use JavascriptExecutor in Selenium
• How to perform Visual Regression Testing using Selenium in JavaScript

Best Practices using Selenium WebDriver with JavaScript

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.
• 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.
• 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.

Why run Selenium JavaScript Tests on BrowserStack Real Device Cloud?

You should run Selenium JavaScript Tests on a real device cloud like BrowserStack Automate for below reasons:

• Realistic Testing Conditions: Real device clouds provide access to a broad spectrum of devices and environments, ensuring tests reflect actual user conditions accurately.
• Enhanced Security: Maintained with high security standards, real device clouds offer secure, isolated testing environments, minimizing data breach risks.
• Broad Browser and OS Coverage: Helps identify compatibility issues across various browsers and operating systems, enhancing user experience.
• Performance Insights: Real devices yield authentic performance data essential for optimizing application responsiveness.
• Scalability and Accessibility: Facilitates scalable and accessible testing, suitable for distributed teams.
• CI/CD Integration: Integrates smoothly with CI/CD pipelines for continuous testing and early issue detection.
• Cost-Effectiveness: Although initially more costly, it saves on long-term expenses related to fixes and support.

Talk to an Expert

Conclusion

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.

To create an application with the optimal user experience, use cloud-based Automation Selenium Testing tools like BrowserStack that offers access to 3500+ real browsers and devices to test on. Test on a real device cloud to offer a seamless cross-platform experience through accurate testing. Since testing on Cloud Selenium Grid takes real user conditions into account, it helps identify the bottlenecks and deliver a seamless and consistent user experience across different browsers and devices.

Run Selenium JavaScript Tests on Real Devices