Selenium python with javascript

Perform Actions Using JavaScript in Python Selenium WebDriver

Join the DZone community and get the full member experience.

In this tutorial, let’s analyze the least used but most powerful feature of Selenium WebDriver. Yes, I am going to discuss the JavaScript executor, and show you a few different ways to execute JavaScript statements through Python Selenium WebDriver.

It may so happen that in some real-time projects, Selenium WebDriver cannot perform an action on a particular web element. For example, since WebDriver simulates end-user interaction, it is natural that it will refuse to click on an element that is not visible to the end user (sometimes it also happens even though the web element is visible on the page). There can be several other similar reasons or scenarios.

In these cases, we can rely on JavaScript to click or perform actions on that web element, and these JavaScript statements can be executed through WebDriver.

You can do everything that the WebElement interface does and more with JavaScript.

What is JavaScript?

JavaScript is a scripting language that runs on client side, i.e, on the browser, and does some magic things when you surf through web pages. For more details, search for the keyword «JavaScript» on DZone.

How Do We Use JavaScript in WebDriver?

Python Selenium WebDriver provides a built-in method:

driver.execute_script("some javascript code here");

There are two ways we can execute JavaScript within the browser.

Method 1: Executing JavaScript at Document Root Level

In this case, we capture the element that we want to work with, using JavaScript-provided methods, then declare some actions on it and execute this JavaScript using WebDriver.

javaScript = "document.getElementsByName('username')[0].click();" driver.execute_script(javaScript)

What Are We Doing Here?

Step 1: We are inspecting and fetching the element by a property ‘name’ using JavaScript. (Also, ‘id’ and ‘class’ properties can be used.)

Step 2: Declare and perform a click action on an element using JavaScript.

Step 3: Call execute_script() method and pass the JavaScript that we created as a string value.

Notice [0] in the getElementsByName(‘username’)[0] statement above. JavaScript functions getElementsByName , getElementsByClassName , and so on return all matching elements as an array. In our case, we need to act on the first matching element that can be accessed via index [0] . If you know what you are doing, i.e., if you know the index of the element you want to operate, you can directly use the index, such as getElementsByName(‘username’)[2] .

However, if you are using the JavaScript function ‘ getElementById ‘, you do not need to use any indexing, as it will return only one element (‘id’ should be unique).

While executing, WebDriver will inject the JavaScript statement into the browser and the script will perform the job. In our example, it performs a click operation on the target element. This JavaScript has its own namespace and does not interfere with the JavaScript in the actual web page.

Method 2: Executing JavaScript at Element Level

In this case, we capture the element that we want to work with using WebDriver, then we declare some actions on it using JavaScript and execute this JavaScript using WebDriver by passing the web element as an argument to the JavaScript.

Is this confusing? Let’s break it down.

For example:

userName = driver.find_element_by_xpath("//button[@name='username']") driver.execute_script("arguments[0].click();", userName)

What Are We Doing Here?

Step 1: Inspect and capture the element using WebDriver-provided methods like ‘ find_element_by_xpath ‘:

userName = driver.find_element_by_xpath("//button[@name='username']")

Step 2: Declare and perform a click action on the element using JavaScript:

Step 3: Call execute_script() method with the JavaScript statement that we created as a string value and web element captured using WebDriver as arguments:

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

The above two lines of code can be shortened to the format below, where we find an element using WebDriver, declare some JavaScript functions, and execute the JavaScript using WebDriver.

driver.execute_script("arguments[0].click();", driver.find_element_by_xpath("//button[@name='username']"))

Another issue faced more frequently is the need to scroll to the bottom of the web page. You can perform this operation in a single line of code:

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

Also, you can have more than one JavaScript action in your statement.

For example:

userName = driver.find_element_by_xpath("//button[@name='username']") password = driver.find_element_by_xpath("//button[@name='password']") driver.execute_script("arguments[0].click();arguments[1].click();", userName, password)

In this case, usage of the order of web elements matters. Accessing index with [0] anywhere inside a JavaScript statement will retrieve the first web element passed.

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

How to Return Values

Another important aspect of the JavaScript executor is that it can be used to fetch values from web elements. That means the execute_script() method can return values.

For example:

print driver.execute_script('return document.getElementById("fsr").innerText')

Note that if you want something returned by JavaScript code, you need to use return. Also, elements can be located with Selenium and passed into the script.

What Happens When an Element Is Not Found?

When JavaScript cannot find an element to operate on, it throws a WebDriver exception with the respective error message.

Scenario 1: We’re trying to read a property using ‘ print driver.execute_script(‘return document.getElementById(«fsr»).innerText’) ‘ but there is no such element available in the web page. We get the following message in the exception trace:

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

Scenario 2: We’re trying to use an invalid operation or error function name inside JavaScript, like ‘ print driver.execute_script(‘document.getElementById(«fsr»).clic();’) ‘. (Note the spelling mistake in the click() method name.)

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

Summary

Here is a summary of a few potential actions for which JavaScript could be used.

• get elements text or attribute
• find an element
• do some operation on an element, like click()
• change attributes of an element
• scroll to an element or location on a web page
• wait until the page is loaded

Basic knowledge of JavaScript helps a lot when handling the DOM with Selenium. You can find more details and articles on the allselenium website.

Published at DZone with permission of Arunkumar Velusamy . See the original article here.

Opinions expressed by DZone contributors are their own.

Источник

How to execute custom JavaScript code in Selenium Python?

Selenium Python – Execute custom JavaScript code on Webpage

To execute a custom JavaScript code in a webpage in Selenium Python, you can use execute_script() method of the driver object.

Call execute_script() method on the driver object, and pass the JavaScript code as argument. We can also pass additional arguments to the JavaScript code via execute_script() method.

In this tutorial, you will learn how to execute a custom JavaScript code on the webpage, using execute_script() method in Selenium Python, with examples.

Examples

1. Execute JavaScript code, with no arguments

In the following example, we initialize a Chrome webdriver, navigate to a specific URL, and execute a JavaScript code to append text to the webpage, using execute_script() method.

We shall take screenshots of the webpage before and after the JavaScript execution.

Python Program

from selenium import webdriver from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.chrome.service import Service as ChromeService from selenium.webdriver.common.by import By # Setup chrome driver service = ChromeService(executable_path=ChromeDriverManager().install()) driver = webdriver.Chrome(service=service) driver.set_window_size(500, 400) # Navigate to the url driver.get('http://127.0.0.1:5500/index.html') # Take a screenshot before JS code execution driver.save_screenshot("screenshot-1.png") # Execute custom JavaScript driver.execute_script("document.body.append('Apple Banana');") # Take a screenshot after JS code execution driver.save_screenshot("screenshot-2.png") # Close the driver driver.quit()

  
Hello World
 
This is a sample paragraph.
  

screenshot-1.png – Before executing JavaScript

screenshot-2.png – After executing JavaScript

2. Pass arguments to the JavaScript code

In the following example, we pass additional arguments to the execute_script() method, which are then passed as arguments to the JavaScript code.

We shall pass the first heading h1 as argument to the JavaScript code, and change the color of h1 to ‘blue’ in the JavaScript.

Python Program

from selenium import webdriver from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.chrome.service import Service as ChromeService from selenium.webdriver.common.by import By # Setup chrome driver service = ChromeService(executable_path=ChromeDriverManager().install()) driver = webdriver.Chrome(service=service) driver.set_window_size(500, 400) # Navigate to the url driver.get('http://127.0.0.1:5500/index.html') # Take a screenshot before JS code execution driver.save_screenshot("screenshot-1.png") # Get first h1 h1 = driver.find_element(By.TAG_NAME, 'h1') # Execute custom JavaScript driver.execute_script("arguments[0].style.color='blue';", h1) # Take a screenshot after JS code execution driver.save_screenshot("screenshot-2.png") # Close the driver driver.quit()

  
Hello World
 
This is a sample paragraph.
  

screenshot-1.png – Before executing JavaScript

screenshot-2.png – After executing JavaScript

Summary

In this Python Selenium tutorial, we have given instructions on how to execute a custom JavaScript code on a webpage using Selenium Python, with examples.

Источник

How to execute a Javascript function in Python with Selenium?

We can execute a JavaScript function in Python with Selenium webdriver. DOM interacts with the elements via JavaScript. Selenium is capable of executing JavaScript commands with the execute_script method.

Few actions like web scrolling cannot be done by Selenium directly. For this, we shall use the JavaScript Executor. We shall take the help of the JavaScript command window.scrollTo and pass it to the execute_script method. To scroll to the bottom of the page, we have to pass 0 and document.body.scrollHeight as parameters to the window.scrollTo.

Syntax

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

Example

from selenium import webdriver driver = webdriver.Firefox(executable_path="C:\geckodriver.exe") driver.implicitly_wait(0.5) driver.get("https://www.tutorialspoint.com/index.htm") #scroll till page bottom driver.execute_script("window.scrollTo(0,document.body.scrollHeight);)

We can also do web action like click on a link with JavaScript. Here, also we shall utilize the execute_script method and pass arguments with index and element as parameters to that method.

Syntax

e = driver.find_element_by_css_selector(".cls") driver.execute_script("arguments[0].click();",e)

Let us click the link Library on the page.

Example

from selenium import webdriver driver = webdriver.Firefox(executable_path="C:\geckodriver.exe") driver.implicitly_wait(0.8) driver.get("https://www.tutorialspoint.com/index.htm") # to identify element l = driver.find_element_by_xpath("//*[text()='Library']") #click with execute_script driver.execute_script("arguments[0].click();",l) print("Page title after click: " + driver.title)

Источник