How to use Python Selenium WebDriver to implement JavaScript Commands

This tutorial will start by briefly explaining JavaScript (for newbies or if you have forgotten). It will then show you how to utilize Python Selenium WebDriver to implement JavaScript commands or statements.

It is important to note that there are a few projects done in real-time and in which the Python Selenium WebDriver may be unable to execute certain directives on its own. This may be in relation to a certain web element pertaining to the end user for example.

In this situation, the WebDriver would be most useful when JavaScript is the medium through which it interacts with that web elements. Python Selenium WebDriver is the vehicle on which JavaScript commands or statements may be implemented.

A typical scenario is where the WebDriver executes a JavaScript statement to carry out certain action(s) in relation to an end user interface web element. Whether this web element can or cannot be seen on a website's home page, for example. Through the use of JavaScript statements, WebDriver will be effective in executing action(s) on the web element in question.

JavaScript Explained

On the client end of every website is where scripting language is run and JavaScript is one of such scripting languages. With JavaScript, you are able to do a lot of cool stuff to ensure that web elements on the user end function smoothly. When you use JavaScript on the Python Selenium WebDriver browser, then you can experience loads of amazing stuff.

If you want to learn more about JavaScript, you can do so right here.

Executing JavaScript on the Python Selenium WebDriver

You can implement JavaScript on the Python Selenium WebDriver browser in a couple of ways and the WebDriver offers an in-built system as well.

#1: Implementing JavaScript at the Document Root Stage

At the document root stage, you can implement JavaScript. First of all, the web element that you intend working with is captured with the use of JavaScript enabled methodology. Next, you will state certain actions on this captured web element and subsequently you will implement the JavaScript with the use of the Python Selenium WebDriver.

An example of this can be seen below;

The following can be derived from the example above;

First, the web element is inspected and then captured with the use of JavaScript. In this case the property name of the web element is utilized. You can also make use of the class properties or even the “id” of the web element for this purpose.

Secondly, you use JavaScript to implement “click () action” on the web element.

Thirdly, you then use “execute_script()” and then have the JavaScript passed up as a String value.

Notice [0] in getElementsByName(‘username’)[0] statement. JavaScript functions getElementsByName, getElementsByClassName and so on.

The initial matching web element should first be acted on and you can derive this through index [0]. Note that every one of the matching web elements should be returned.

The index of the web element which you intend acting on can be used directly, such as; getElementsByName(‘username’) [2]

On the other hand, where the JavaScript function of “getElementById” is been used directly, you will not be required to utilize any form of indexing. This is because just a single web element is returned by this function as the id is meant to be exclusive and one-of-a-kind.

In the browser, the Python Selenium WebDriver will infuse the JavaScript command/statement so that the JavaScript then executes the action. Going back to the example above, a “click () action” is performed on the captured web element. Note that the JavaScript comes with its namespace, so the JavaScript on the web page is not affected by the JavaScript on your project web page.

#2: Implementing JavaScript at the Web Element Stage

You can also implement JavaScript at the web element stage. Here the web element you intend working on is captured with the use of the Python Selenium WebDriver. Secondly, you call actions with the use of JavaScript and thirdly, you utilize the WebDriver to implement the JavaScript. Note that the web element is projected as a sort of contradiction to the JavaScript. For a better understanding, check out the example below;

You first have to inspect the web element and then capture it with the use of an in-built system of the Python Selenium WebDriver, such as;‘find_element_by_xpath’

userName = driver.find_element_by_xpath(“//button[@name=’username’]”)

You then call “click () action” on the web element with the use of JavaScript.

arguments [0]. click ()

Next, the created JavaScript command/statement should be used with “execute_script()”as a String value. This is done alongside the captured web element while the arguments are taken up by the WebDriver.

driver.execute_script(“arguments[0].click();”, userName)

You can summaries these couple of code lines above in the following way;

driver.execute_script(“arguments[0].click();”, driver.find_element_by_xpath(“//button[@name=’username’]”))

You can see the web element making use of the Python Selenium WebDriver. Also, a few JavaScript functions are called while the WebDriver implements the created JavaScript.

There is a code line that you can use in ensure a quick scroll to the bottom of a web page on your website project. This code line is;

driver.execute_script(“window.scrollTo(0, document.body.scrollHeight);”)

It is also possible for your JavaScript command/statement to have two or more JavaScript actions.

A typical example of this is;

Here the index is paramount and NOT the sequence in which the web elements are utilized.

driver.execute_script(“arguments[1].click();arguments[0].click();”, userName, password)

Using Python Selenium WebDriver to Capture Web Element values

You can use Python Selenium WebDriver to capture web element values. So in effect values can be returned using execute_script().

This is explained further in the example below;

Use “return” whenever you need the created JavaScript code to return something. You can also locate web elements using Python Selenium WebDriver and then have them passed through the JavaScript.

In a situation where the JavaScript cannot locate a web element to work with, then a “WebDriverException” error message pops up.

Case Study 1:

Where the JavaScript code -
‘print driver.execute_script(‘return document.getElementById(“fsr”).innerText’)‘ attempts to read out web element property. However, the web element cannot be found on the web page.

In this case study, the following message is indicated;

selenium.common.exceptions.WebDriverException: Message: unknown error: Cannot read property ‘innerText’ of null

Case Study 2:

Where there is a mistake in an action name or an operation that is not valid is used in a JavaScript, such as;

‘print driver.execute_script(‘document.getElementById(“fsr”).clic();’)‘.

As you can see, there is a spelling error in the “click action” name. Instead of “click ()”, you have “click ()”.

selenium.common.exceptions.WebDriverException: Message: unknown error: document.getElementById(…).clic is not a function

In Closing;

Every single action can be summaries as follows;

●     Derive the attribute or text of a web element.

●     Locate a web element.

●     Perform an action on the web element, such as; “click ()”.

●     Alter a web element’s attributes.

●     Scroll on a web page to a particular location or to a web element.

●     Be patient and wait whilst the loading of the web page is in progress.

On a final note, you should know that having a basic understanding of JavaScript can come in handy whenever you use Python Selenium WebDriver in dealing with DOM.