1. Introduction to JavascriptExecutor in Selenium
JavascriptExecutor is a part of Selenium WebDriver, which is a tool for automating web browsers. It allows us to execute our custom Javascript code on the web page which is loaded in our browser instance. This feature is particularly useful when we need to interact with the page in ways that are not supported by standard WebDriver commands. In this article, we will explore the different methods of using JavascriptExecutor in Selenium and understand how it can help us in our automation testing process.
2. Setting up JavascriptExecutor
Before we can start using JavascriptExecutor in our Selenium tests, we need to first create an instance of the WebDriver interface. This can be done using the following code snippet:
WebDriver driver = new ChromeDriver();
Once we have an instance of the WebDriver interface, we can cast it to a JavascriptExecutor interface as follows:
JavascriptExecutor js = (JavascriptExecutor) driver;
We are now ready to start using JavascriptExecutor methods in our Selenium tests.
3. Executing Javascript code using JavascriptExecutor
The most basic use of JavascriptExecutor is to execute custom Javascript code on the web page. This can be done using the executeScript() method of JavascriptExecutor. The syntax of this method is as follows:
Object executeScript(String script, Object... args)
The script parameter is the Javascript code that we want to execute, and the args parameter is an optional array of objects that can be used as arguments in our Javascript code. The executeScript() method returns an Object, which can be cast to the appropriate data type depending on the return value of our Javascript code.
3.1 Example of executing Javascript code using JavascriptExecutor
Let's say we want to get the title of the web page using Javascript. We can achieve this using the following code:
JavascriptExecutor js = (JavascriptExecutor) driver;
String title = (String) js.executeScript("return document.title;");
System.out.println(title);
In the above code, we first cast our driver instance to a JavascriptExecutor instance. We then use the executeScript() method to execute the Javascript code return document.title;, which returns the title of the web page. Finally, we cast the return value to a String and print it to the console.
4. Manipulating page elements using JavascriptExecutor
JavascriptExecutor can also be used to manipulate page elements that are not easily accessible using standard WebDriver commands. For example, we can use JavascriptExecutor to scroll to a specific element on the page, highlight an element, or even change the value of an input field.
4.1 Scroll to a specific element on the page
We can use the executeScript() method along with the Javascript scrollIntoView() function to scroll to a specific element on the page. The syntax of the scrollIntoView() function is as follows:
void scrollIntoView(boolean alignToTop);
The alignToTop parameter is a boolean that specifies whether we want to align the element with the top of the viewport or the bottom. If true, the element will be aligned with the top of the viewport. If false, the element will be aligned with the bottom of the viewport.
Example of scrolling to a specific element on the page
Let's say we want to scroll to a specific element with id element-id on the page. We can achieve this using the following code:
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement element = driver.findElement(By.id("element-id"));
js.executeScript("arguments[0].scrollIntoView(true);", element);
In the above code, we first cast our driver instance to a JavascriptExecutor instance. We then find the element we want to scroll to using standard WebElement commands. Finally, we use the executeScript() method to execute the Javascript code arguments[0].scrollIntoView(true);, where arguments[0] is the first element in the args array, which refers to our element WebElement. This code scrolls the element into view with the top of the element aligned with the top of the viewport.
4.2 Highlighting an element on the page
We can use JavascriptExecutor to highlight an element on the page by changing its CSS properties. This can be useful for debugging or taking screenshots of specific elements on the page.
Example of highlighting an element on the page
Let's say we want to highlight an element with id element-id on the page. We can achieve this using the following code:
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement element = driver.findElement(By.id("element-id"));
js.executeScript("arguments[0].setAttribute('style','border: 2px solid red;');", element);
In the above code, we first cast our driver instance to a JavascriptExecutor instance. We then find the element we want to highlight using standard WebElement commands. Finally, we use the executeScript() method to execute the Javascript code arguments[0].setAttribute('style','border: 2px solid red;');, where arguments[0] is the first element in the args array, which refers to our element WebElement. This code adds a red border with a thickness of 2px around the element, highlighting it on the page.
4.3 Changing the value of an input field
We can use JavascriptExecutor to change the value of an input field on the page. This can be useful when testing forms or input fields that only accept certain values.
Example of changing the value of an input field
Let's say we want to change the value of an input field with id input-id on the page to new value. We can achieve this using the following code:
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement element = driver.findElement(By.id("input-id"));
js.executeScript("arguments[0].value = 'new value';", element);
In the above code, we first cast our driver instance to a JavascriptExecutor instance. We then find the input field we want to update using standard WebElement commands. Finally, we use the executeScript() method to execute the Javascript code arguments[0].value = 'new value';, where arguments[0] is the first element in the args array, which refers to our element WebElement. This code sets the value of the input field to new value.
5. Conclusion
JavascriptExecutor is a powerful tool that allows us to interact with web pages in ways that would be difficult or impossible using standard WebDriver commands. By executing custom Javascript code using JavascriptExecutor, we can manipulate page elements, scroll to specific elements, highlight elements, and even change input field values. Understanding how to use JavascriptExecutor effectively can help us to write more robust and reliable automation tests.