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.

To click on Shop link with the help of Javascript Executor we shall use the execute_script method. The number of arguments and target element locators are passed as arguments to the method. To pinpoint the first target element we have to specify arguments[0]. To point to the second target element locator we have to specify arguments[1]. Now to perform click operation, we have to apply the click method on the arguments.

So the complete Javascript command to click on first element locator shall be: 

arguments[0].click(); then we shall wrap the expression in single or double quotes inside the execute_script method.

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'))

# identify link with css selector with regular expression in href

shopButton = driver.find_element_by_css_selector("a[href*='shop']")

# execute Javascript command with execute_script method

# perform click with arguments[0].click()

driver.execute_script("arguments[0].click();",shopButton)

Next let us discuss how to scroll down to the bottom of the webpage with the help of Javascript in the same application.

Please note, Selenium by default does not support the feature of scrolling down.

We can scroll down with the Javascript method scrollTo. The coordinate to scroll horizontally along x axis in pixels and the coordinate to scroll vertically along y axis in pixels are passed as arguments to the method. To perform complete scroll height along y axis we shall use the Javascript method document.body.scrollHeight.

So the Javascript command to do complete scroll from top to the bottom shall be: 

window.scrollTo(0,document.body.scrollHeight); then we shall wrap the expression in single or double quotes inside the execute_script method.

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'))

# identify link with css selector with regular expression in href

shopButton = driver.find_element_by_css_selector("a[href*='shop']")

# execute Javascript command with execute_script method

# perform click with arguments[0].click()

driver.execute_script("arguments[0].click();",shopButton)

# execute Javascript command with execute_script method

# perform scroll from top to bottom with scrollTo Javascript method

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

Conclusion

Thus we have discussed some of the examples of JavaScript Executors for performing web operations like clicking, scrolling and so on. For more details, you can refer to the link:

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

In the next section, we shall discuss Chrome options and their importance in Selenium WebDriver.

Chrome Options and importance in Selenium

We shall explore multiple types of Chrome Options available and their importance. The class ChromeOptions within the webdriver package is used to set instructions and behavior for the chrome browser while invoking. Next we shall create an object for the ChromeOptions class. With the help of this object we can add all the necessary behavior and knowledge on how the browser should behave once it is invoked.

chrome_options = webdriver.ChromeOptions(),

here the chrome_options is the object variable name.

Next we shall use the add_argument method to give the instructions to the browser. The necessary instruction is passed as an argument to the method. To open the browser in a maximized mode, we need to pass the value --start-maximized as an argument to that method.

We can open the browser in a headless mode by passing the value headless as argument to the add_argument method. By headless, it means that the browser execution happens but it is not visible from the front end. This headless feature in browsers is popular since it consumes lesser resources compared to normal browser invocation.

Some of the websites often have certificate errors which we have to accept and proceed to access the actual websites. In Selenium we can achieve this by passing --ignore-certificate-errors value as an argument to the add_argument method which can be accessed by creating the object chrome_options from the ChromeOptions class.

There are numerous options available which can be added to the chrome browser. 

Next we have to provide information of the chrome_options object to the actual browser invocation. So basically we have to connect the chrome_options object to the driver object. For browser invocation in chrome, we pass the executable_path as one of the mandatory arguments to the Chrome class. Now we shall pass another optional argument options [with its value set to chrome_options object] to the Chrome class.

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

options = chrome_options)

Thus we have sent the chrome options to the browser invocation step.

Code Implementation

from selenium import webdriver

# ChromeOptions class to add chrome browser options

chrome_options = webdriver.ChromeOptions()

# add option to open maximized browser with add_argument method

chrome_options.add_argument("--start-maximized")

# add option to open browser headless mode with add_argument method

chrome_options.add_argument("headless")

# add option to accept browser certificate errors with add_argument

chrome_options.add_argument("--ignore-certificate-errors")

# chrome browser invocation with options parameter

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

options = chrome_options)

# launch a URL in browser

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

Conclusion

Thus we have discussed how to add chrome options and their importance in Selenium WebDriver. For more details, you can refer to the link:

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

In the next section we shall discuss one end to end practice project with complete methods in Selenium WebDriver.


Tags


You may also like

Groups attribute in TestNG 

Groups attribute in TestNG 
Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}