Let's take a look at how Selenium and JavaScript can usher in a new era of excellence in web automation testing. Selenium is an open-source web testing framework that is used for automated testing in web applications.

It provides us with a toolkit that we can use to interact with a web application in much the same way as a user by, for example, entering text in a text input, clicking a submit or login button, or navigating to a page.

Selenium has four separate tools that facilitate test automation in different ways:. Selenium WebDriver is a collection of open-source APIs that are used to automate the testing of web applications through code. Selenium IDE allows us to record scripts and play them back.

It is an excellent way for us to go through, click, and record what we are testing inside a browser. It also allows us to run the test again. Selenium Grid allows the execution of WebDriver scripts on remote machines by routing commands sent by the client to remote browser instances.

Selenium Remote Control is now deprecated. Selenium and JavaScript are a powerful duo for web automation testing. Selenium is a browser automation framework , while JavaScript is a programming language.

Together, they can be used to automate a wide range of web testing tasks, such as logging in to websites, filling out forms, clicking on buttons and links, and navigating through pages. Selenium and JavaScript are open-source, cross-platform, and well-documented.

This makes them ideal for testing web applications on any operating system and for a global audience. In addition, Selenium and JavaScript can be used to test mobile apps , generate reports, and integrate with other tools.

For this tutorial, we will simulate how to use Selenium to automate the login process for a website by entering your username and password into the login form and clicking the login button. We will then use JavaScript to verify that the login was successful by checking the page title and looking for a confirmation message.

Before writing any code, we need to understand how Selenium WebDriver works. This powerful tool enables us to automate browser testing by simulating user actions on a website like entering text into input boxes or clicking buttons.

To begin, we need to specify the browser we want to use for our test and the website we wish to automate. For instance, in our example, we'll work with a React application that has a login page and a welcome page. You can check out the site at testLoginWebsite.

Next, in order for Selenium to interact with the specific elements on the website, we need to tell it what to look for. This is where the findElement method comes into play. It helps Selenium locate elements on the web page using DOM element selectors like ID, XPATH, or CSS selectors.

Once Selenium finds the desired element, it executes the commands or actions we've specified. This allows us to seamlessly automate the web testing process and ensure our application functions as expected. In this section of the tutorial, we will show you how to use Selenium with JavaScript for automated testing.

Before we begin, make sure you have the following tools installed:. An IDE of your choice. You can get Visual Studio Code here. Selenium WebDriver v4. Note that you'll need to download the browser driver separately for Selenium WebDriver versions below 4. Let's get started by installing the required tools and setting up our Node.

js project:. First, install Node. You can check your currently installed version as follows:. Next, create a new folder called "DemoSeleniumProject" on your desktop or preferred location.

Open the command line or terminal, navigate to the newly created folder, and initialize a new Node. js project by running npm init.

While the above node initialization is running, make sure you accept the default configuration options by pressing "Enter" for each prompt. At the end, the package. json looks like this. Now, let's install the Selenium WebDriver package. Run the following command in your terminal to install the package:.

npm install selenium-WebDriver. After you have successfully installed Selenium WebDriver, open your project in your IDE and open the package. json file. The installed Selenium WebDriver package should be listed among the project's dependencies, as shown below:. Now, let's dive into writing our automation test script code.

To write our tests, we have to follow the steps below. Then, we will perform the following:. Begin by importing the necessary libraries, including selenium-WebDriver, assert, and until for handling asynchronous operations. Now, let's set up the loginTest function, which will contain all the code for your test.

As you can see above, we began by setting up a function called loginTest, which contains the entire test logic for app login and redirection.

To run the test file, you use node and the following command in your terminal:. This launches the browser while the builder function creates a WebDriver instance based on the configuration settings. In our case, we set up a Chrome WebDriver instance, which loads the login page on the browser by default as shown below:.

Upon successful login, you will be redirected to the welcome page:. When you run the test, a new Chrome browser window will open. The login credentials will be pre-filled, and the test will click the login button.

The test will then verify that the welcome page loads successfully. If everything works as intended, you should see a confirmation message indicating a successful login. If the test fails such as when you enter the wrong credentials , the test will still run to completion.

The following will be logged in the terminal:. Script exited with code 1. This means that the test script returned a value of 1, which indicates that the test failed. In addition, the page title will not change. You have successfully simulated web automation tests for JavaScript using Selenium!

For more information, you can see the complete code in this repository. Additionally, you can find the ReactJS application used above here. Here are some best practices to follow when using Selenium WebDriver with JavaScript:.

Use best-fit web locators — To prevent the constant modification of automation tests due to changing locators, use CSS selectors for elements whenever possible. Create a list of priority test cases — Test critical application functionalities early on to ensure thorough testing.

Implement data-driven testing — Test cases should be able to run with different data combinations for better coverage. Use the PageObjects pattern — Separate test scripts from locators to make your automation more maintainable. Incorporate wait commands — Handle browser loading delays and issues due to slow internet connectivity.

Document your tests — Proper documentation helps organize and make your code scripts more readable, especially in a team environment. When writing automation tests for any web or mobile application, you are bound to face various issues. Here are a few tips that can help you resolve common problems when implementing web automation using Selenium and JavaScript.

The docs for Execution Cloud provide more information. If you are not sure which one to pick, read Leveraging the Applitools platform. For most cases, we recommend Applitools Ultrafast Grid. The docs for Ultrafast Grid and Classic runner provide more information.

js is a Mocha test file that covers login behavior for the ACME Bank demo web app. It uses the Applitools Eyes SDK to execute the test. The variables at the top control how tests will run:.

Setup varies slightly for these different options. In-line comments explain every section of its code. Read it top to bottom to understand how it works:. You may set it through your IDE if applicable , or you may set it from the command line like this:. However, be warned: hard-coding secrets is poor practice.

Do this only temporarily for debugging, and never commit hard-coded secrets to version control. You may also need to set your Applitools Eyes server. By default, tests will use the public Applitools Eyes server at eyes. If you are using a free Applitools account, then use the public server.

To run tests using headless Chrome, set the HEADLESS environment variable to true. After your tests run, you should see results in the Eyes Test Manager.

You can log into the Test Manager at eyes. com or at the address for your private Applitools Eyes server. When you run tests with the Applitools Ultrafast Grid, the tests will run one time on the local machine, and then they will upload snapshots to render on each target configuration in the cloud.

The Test Manager will show a separate result for each rendering. When you run tests with the Applitools Classic runner, the Test Manager will show the one snapshot from your local machine. If you rerun the tests, then they should yield "unresolved" results for you to review.

Visual differences will be highlighted in magenta. It's up to you to accept 👍 or reject 👎 the changes.

Applitools will remember your decisions for future analysis. Again, it's okay. Congratulations on completing this quickstart! There's still so much to learn about visual testing with Applitools, but you're off to a great start.

Skip to main content. Get Started GitHub. SDKs Web Selenium WebDriver JavaScript Mocha On this page. Need extra help?

Installing ChromeDriver. git cd example-selenium-javascript-mocha. Don't have Git?

Operators : Operators are the symbols or keywords which signifies the operation that needs to carry out on the operands. In other words, an operator is capable of either manipulating a particular value or producing a result by comparing or operating on the given values. Like other programming languages, JavaScript also supports multiple types of operators.

Conditional Statements: Javascript has specific statements enabled in it that allow us to check a condition, like all other programming languages. And it then executes certain parts of code depending on whether the condition is true or false.

Loops: Loops are one of the most fundamental concepts available in all programming languages. The loop will execute the set of code repeatedly until the given condition is satisfied. Loop will ask a question; if the given answer is satisfied, then it will perform some actions, again it will ask a question, and this repeats until no further action required.

Each time the question is asked, it is called an iteration. Comments: Comments are one of the basic functionality provided by all the programming languages. Good comments convey essential information to the human reader of the code that the code cannot convey by itself.

They make the source code more natural for humans to understand, and compilers and interpreters generally ignore them. Each programming language provides some operators to compare all kinds of operands.

JavaScript also inherits and extends the same concept and provides two variants of operators for comparing whether two operands are equal or not. Arrays : The array is one of the most used data structure. Additionally, it stores a collection of similar kinds of objects.

Moreover, it helps to organize the data so that values can be easily maintained, searched, and sorted. In these tutorials, we are concentrating on the intermediate level, more on Arrays inbuilt functions, object, Different inbuilt objects like String, Math.

Simplify Arrays using inbuilt functions: Arrays in JavaScript provide multiple inbuilt functions for the manipulation of array elements.

We already covered a few of them related to the addition and deletion of individual elements to the arrays in the previous article. Let vs Var vs Const: Let, Var, and Const are the various ways that JavaScript provides for declaration of variables.

Var is an old way of declaring variables. Before starting the discussion about JavaScript let Vs var Vs const, let's understand what ES is? ES stands for Ecma Script, which is a scripting language specification specified by ECMA international.

It standardized various implementations of JavaScript. Callback Function : A callback, as the name suggests, is a function that is to execute after another function has finished executing. As we know, in JavaScript, functions are objects.

Because of this, functions can take functions as arguments, and other functions can also return it. Functions that take the additional function as a parameter are called higher-order functions, and the function which passes as an argument is called a callback function.

Strings: Similar to other programming languages, the String is one of the data types in Javascript, which represent a sequence of characters.

Still, in JavaScript, String can be both a primitive data type and a composite data type. Unlike other global objects, Math is not a constructor.

In other words, all the properties and methods of Math are static, and one can call them by using Math as an object without creating it. Additionally, the Math object provides a set of properties and methods for mathematical constants and functions.

Objects: An object is a non-primitive data type that represents a collection of properties and the methods which manipulate and expose those properties.

In other words, we can think of an object as a list that contains items, and a name-value pair store each item in the list. Objects in JavaScript, similar to other programming languages, can be compared to real-life objects. In these tutorials, we are concentrating on more advanced topics like scheduling, event handlers, error handling, Promises, etc.

Scheduling Tasks in JavaScript: There can be multiple scenarios where a programmer decides to execute a function at a later time, instead of running it instantaneously. This kind of behavior is " scheduling as call " or " scheduling a timeout ".

So what happens when somebody makes a promise to you? They give you an assurance based on which you can plan something. Now, the promise can either be kept or broken. So, when a promise is kept you expect something out of that promise. You can make use of the output of a promise for your further actions or plans.

But, when a promise is broken, you would like to know why the person who made the promise was not able to keep up his side of the bargain and will take the next action accordingly.

You should make sure that everything is up-to-date. Next, you need to download the relevant drivers to allow WebDriver to control the browsers you want to test. You can find details of where to get them from on the selenium-webdriver page see the table in the first section. Obviously, some of the browsers are OS-specific, but we're going to stick with Firefox and Chrome, as they are available across all the main OSes.

Note: Just to reiterate, the path you add to PATH needs to be the path to the directory containing the drivers, not the paths to the drivers themselves! This is a common mistake. To set your PATH variable on Windows, follow the instructions at How can I add a new folder to my system path?

Note: This function is an IIFE Immediately Invoked Function Expression. You should see an instance of Firefox automatically open up! Google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked.

WebDriver will then wait for 1 second; the document title is then accessed, and if it is "webdriver - Google Search", we will return a message to claim the test is passed. We then wait four seconds, after which WebDriver will then close down the Firefox instance and stop.

There is also nothing to stop you running the test on multiple browsers simultaneously. Let's try this! So here we've done the test as before, except that this time we've wrapped it inside a function, searchTest.

We've created new browser instances for multiple browsers, then passed each one to the function so the test is performed on all three browsers! Let's have a look at a few key features of the webdriver syntax.

For more complete details, you should consult the selenium-webdriver JavaScript API reference for a detailed reference and the Selenium main documentation's Selenium WebDriver , which contain multiple examples to learn from written in different languages. To start up a new test, you need to include the selenium-webdriver module, importing the Builder constructor and Browser interface:.

You use the Builder constructor to create a new instance of a driver, chaining the forBrowser method to specify what browser you want to test with this builder.

The build method is chained at the end to actually build the driver instance see the Builder class reference for detailed information on these features. Note that it is possible to set specific configuration options for browsers to be tested, for example you can set a specific version and OS to test in the forBrowser method:.

Let's create a new test to allow us to explore this code as we talk about it. js , and add the following code to it:. To load the page you actually want to test, you use the get method of the driver instance you created earlier, for example:.

Note: See the WebDriver class reference for details of the features in this section and the ones below it.

But it is better to use a remote server location so the code is more flexible — when you start using a remote server to run your tests see later on , your code will break if you try to use local paths. Now we've got a document to test, we need to interact with it in some way, which usually involves first selecting a specific element to test something about.

You can select UI elements in many ways in WebDriver, including by ID, class, element name, etc. The actual selection is done by the findElement method, which accepts as a parameter a selection method. For example, to select an element by ID:.

One of the most useful ways to find an element by CSS — the By. css method allows you to select an element using a CSS selector. There are many ways to interact with your web documents and elements on them. You can see useful common examples starting at Getting text values on the WebDriver docs.

Let's do something a bit more useful. Replace the previous code entry with this line of code, button. click ; as shown below:. Try running your test again; the button will be clicked, and the alert popup should appear. At least we know the button is working!

You can interact with the popup too. Update the example function as follows, and try testing it again:. Next, let's try entering some text into one of the form elements. Update the example function as follows and try running your test again:. You can submit key presses that can't be represented by normal characters using properties of the Key object.

For example, above we used this construct to tab out of the form input before submitting it:. There are times where you'll want to make WebDriver wait for something to complete before carrying on.

For example if you load a new page, you'll want to wait for the page's DOM to finish loading before you try to interact with any of its elements, otherwise the test will likely fail. The sleep method accepts a value that specifies the time to wait in milliseconds — the method returns a promise that resolves at the end of that time, at which point the code inside the then executes.

In this case we get the title of the current page with the getTitle method, then return a pass or fail message depending on what its value is. js test too — try updating your example function like this:. WebDriver will now wait for 2 seconds before filling in the form field.

We then test whether its value got filled in i. is not empty by using getAttribute to retrieve it's value attribute value, and print a message to the console if it is not empty.

Note: There is also a method called wait , which repeatedly tests a condition for a certain length of time, and then carries on executing the code.

g this is how you can create a border around the about me element on toolsQa home page. See the below images of same element before and after creating border. Coloring elements can also help us take screenshots with visual markers to identify problematic elements.

Let's say you want to know total number of frames inside a webpage, including the Iframes. You cant do it using selenium directly, you may need to create your own logic to parse and find frames. However, in JavaScript is simple and is done like this.

Finding the size of the inner browser window. It is the size of the window in which you see the web page. JavaScriptExecutor is an interface that provides a mechanism to execute Javascript through selenium driver. Similarly, you can execute practically any JavaScript command using Selenium.

I hope this blog gives you an idea of what can be done and you can take it forward by playing around with different JavaScripts. Home Selenium-Webdriver JavaScript and Selenium JavaScriptExecutor.

Table of Contents. Selenium WebDriver Tutorial. JavaScript and Selenium JavaScriptExecutor Category: Selenium-Webdriver , October 1 Next Lesson. Scroll Web elements and Web page- Selenium WebDriver using Javascript.

Share this post:. Custom Firefox Profile for Selenium. Author: Virender Singh. I am Virender Singh, I have around 14 years of experience in the Technology domain. Stale Element Reference Exception. By Gunjan Kaushik. How to avoid StaleElementReferenceException?

What is it and how to handle it while writing test automation code in Selenium? Handle CheckBox in Selenium WebDriver. By Anshu Ranjan. What is a CheckBox?