Within the Selenium Python miscellaneous topics we shall be covering Javascript executor and some of the examples on Javascript Executor. Also we shall discuss the Chrome Options in Selenium. 

Javascript Executor and Why do we need them

Besides Selenium, all the elements in a webpage can be identified with Document Object Model provided by Javascript. Thus the Document Object Model can access all objects within a webpage.

We can spy on an element and find all the available methods in DOM for accessing the html attributes for that element. In the Console tab, if we type document. all the methods like getElementById, getElementsClassName and so on will be visible as suggestions. The below image shows some of the methods in DOM.

Thus Javascript DOM can work on any element on a webpage just like Selenium. Selenium has a method to execute Javascript code in it. There are some instances when Selenium may fail to identify an element and perform action on it. In these situations we may access the element and perform action on it with the help of DOM in Javascript.

For demonstration of Javascript Executor examples we shall be using the application with the link: https://rahulshettyacademy.com/angularpractice/

Let us now obtain the text entered in the Name edit box with the help of JavaScript Executor.

Selenium exposes the method execute_script to execute Javascript commands. The Javascript command is passed as argument to the method. To locate the Name edit box, let us first spy on the element and analyze its html code.

Now we shall move to the Console tab and shall identify the element with the help of DOM methods. To locate the Name edit box we can use the name attribute which is having name as value. DOM provided by Javascript shall identify that element with the help of its name attribute by the method document.getElementsByName. The value of the name attribute shall be passed as an argument to the method. Also, this method returns a collection of nodes with the starting index as 0.

As the Name edit box is the first matching element on the page we shall refer to that index number with [0]. On hovering over the result returned by the expression document.getElementsByName("name")[0] in Console, our desired element gets highlighted.

To obtain the value entered inside the Name edit box, we shall use the value method. So the complete Javascript command shall be: 

document.getElementsByName("name")[0].value

This entire expression shall be passed as an argument to the execute_script method. We can validate the value of the edit box in the Console with the same Javascript command. Please note the result hello returned in the Console.

Code Implementation

from selenium import webdriver

driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")

# launch URL in browser

driver.get("https://rahulshettyacademy.com/angularpractice/")

# identify element with name attribute and input text

driver.find_element_by_name("name").send_keys("hello")

# locate element with getElementsByName method

# execute Javascript command with execute_script method

# retrieve text with value method from input box

print(driver.execute_script('return document.getElementsByName("name")[0].value'))

Output:

The output shows hello as value in the Name edit box. So we see that we can use DOM methods to work on any elements on the web page where Selenium methods may not work.

Conclusion: Thus we have discussed what a Javascript Executor is and how to use it. Also we have seen why we need a Javascript Executor. For more details, you can refer to the link:

https://courses.rahulshettyacademy.com/courses/learn-selenium-automation-in-easy-python-language/lectures/13248415

In the next section, we shall discuss some of the examples of JavaScript Executor for performing web operations.

Examples of JavaScript Executor for various Web Operations

Let us perform a click operation on the Shop link appearing on the application having the link: https://rahulshettyacademy.com/angularpractice/. We shall do this operation with Javascript Executor.

There may be a scenario when we find an element hidden behind another element on the page. If we want to click on such an element, Selenium throws an element not clickable exception or some other element gets clicked. Javascript Executor can be used to deal with such a scenario where it works directly at the html level irrespective of its front end view.

Let us spy on the element and analyze its html code.