Selenium WebDriver
JavaScript Executor - Scroll, Alerts & Styling
Master advanced JavaScript Executor techniques including scrolling, custom alerts, element highlighting, border creation, and closed shadow root handling.
Day 36 Part 2: JavaScript Executor Advanced
Scrolling, Alerts, Styling & Browser Operations
JavaScript Executor
ScrollIntoView
Custom Alerts
Element Styling
Master advanced JavaScript Executor techniques for scrolling, creating custom alerts, element highlighting, and advanced browser operations.
Scroll Operations with JavaScript Executor
Learn to scroll elements into view using JavaScript Executor
Scroll Implementation Steps
- Locate the target WebElement
- Convert WebDriver to JavascriptExecutor
- Use executeScript() with scrollIntoView() method
- Pass WebElement as argument
Scroll Implementation Example
// Locate the element
WebElement wb = driver.findElement(
By.xpath("//h2[text()='Bus Booking redDeals']"));
// Convert to JavascriptExecutor
JavascriptExecutor js = (JavascriptExecutor)driver;
// Scroll element into view
js.executeScript("arguments[0].scrollIntoView();", wb);
// Scroll with alignment (true = top)
js.executeScript("arguments[0].scrollIntoView(true);", wb);
WebElement wb = driver.findElement(
By.xpath("//h2[text()='Bus Booking redDeals']"));
// Convert to JavascriptExecutor
JavascriptExecutor js = (JavascriptExecutor)driver;
// Scroll element into view
js.executeScript("arguments[0].scrollIntoView();", wb);
// Scroll with alignment (true = top)
js.executeScript("arguments[0].scrollIntoView(true);", wb);
Complete Scroll Example
ChromeDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.redbus.in/");
WebElement wb = driver.findElement(
By.xpath("//h2[text()='Bus Booking redDeals']"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].scrollIntoView(true);", wb);
driver.manage().window().maximize();
driver.get("https://www.redbus.in/");
WebElement wb = driver.findElement(
By.xpath("//h2[text()='Bus Booking redDeals']"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].scrollIntoView(true);", wb);
Custom Alert Generation
Create and handle custom JavaScript alerts, confirms, and prompts
Alert Popup
2 objects:
- • OK button
- • Physical text
Confirm Popup
3 objects:
- • OK button
- • Cancel button
- • Physical text
Prompt Popup
4 objects:
- • OK button
- • Cancel button
- • Physical text
- • Text box
Custom Alert Syntax
// Generate Alert
js.executeScript("alert('User is on Register Page');");
// Generate Confirm
js.executeScript("confirm('User is on Register Page');");
// Generate Prompt
js.executeScript("prompt('User is on Register Page');");
js.executeScript("alert('User is on Register Page');");
// Generate Confirm
js.executeScript("confirm('User is on Register Page');");
// Generate Prompt
js.executeScript("prompt('User is on Register Page');");
Complete Alert Handling Example
ChromeDriver driver = new ChromeDriver();
driver.get("https://www.google.com");
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("prompt('User is on Home Page');");
Alert alt = driver.switchTo().alert();
alt.sendKeys("Ankit"); // For prompt popup
alt.accept(); // Click OK
// alt.dismiss(); // Click Cancel
driver.get("https://www.google.com");
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("prompt('User is on Home Page');");
Alert alt = driver.switchTo().alert();
alt.sendKeys("Ankit"); // For prompt popup
alt.accept(); // Click OK
// alt.dismiss(); // Click Cancel
Element Styling & Highlighting
Create borders and highlight elements for visual identification
Create Element Border
// Locate element
WebElement wb = driver.findElement(
By.name("firstname"));
// Convert to JS Executor
JavascriptExecutor js =
(JavascriptExecutor)driver;
// Create red border
js.executeScript(
"arguments[0].style.border=" +
"'4px solid red';", wb);
WebElement wb = driver.findElement(
By.name("firstname"));
// Convert to JS Executor
JavascriptExecutor js =
(JavascriptExecutor)driver;
// Create red border
js.executeScript(
"arguments[0].style.border=" +
"'4px solid red';", wb);
Highlight Element Background
// Locate element
WebElement wb = driver.findElement(
By.name("websubmit"));
// Get current color
String actualColor =
wb.getCssValue("background-color");
// Convert to JS Executor
JavascriptExecutor js =
(JavascriptExecutor)driver;
// Change background color
js.executeScript(
"arguments[0].style.backgroundColor=" +
"'rgb(204,0,204)';", wb);
WebElement wb = driver.findElement(
By.name("websubmit"));
// Get current color
String actualColor =
wb.getCssValue("background-color");
// Convert to JS Executor
JavascriptExecutor js =
(JavascriptExecutor)driver;
// Change background color
js.executeScript(
"arguments[0].style.backgroundColor=" +
"'rgb(204,0,204)';", wb);
Blinking Effect Example
WebElement wb = driver.findElement(By.name("login"));
String actualColor = wb.getCssValue("background-color");
JavascriptExecutor js = (JavascriptExecutor) driver;
for (int i = 0; i < 200; i++) {
js.executeScript("arguments[0].style.backgroundColor='rgb(255,0,0)';", wb);
Thread.sleep(500);
js.executeScript("arguments[0].style.backgroundColor='rgb(204,0,204)';", wb);
Thread.sleep(500);
js.executeScript("arguments[0].style.backgroundColor='" + actualColor + "';", wb);
Thread.sleep(500);
}
String actualColor = wb.getCssValue("background-color");
JavascriptExecutor js = (JavascriptExecutor) driver;
for (int i = 0; i < 200; i++) {
js.executeScript("arguments[0].style.backgroundColor='rgb(255,0,0)';", wb);
Thread.sleep(500);
js.executeScript("arguments[0].style.backgroundColor='rgb(204,0,204)';", wb);
Thread.sleep(500);
js.executeScript("arguments[0].style.backgroundColor='" + actualColor + "';", wb);
Thread.sleep(500);
}
Browser Information Capture
Extract browser title and URL using JavaScript Executor
Capture Browser Title
String title = js.executeScript(
"return document.title").toString();
System.out.println(title);
"return document.title").toString();
System.out.println(title);
Capture Browser URL
String url = js.executeScript(
"return document.URL").toString();
System.out.println(url);
"return document.URL").toString();
System.out.println(url);
Complete Browser Info Example
ChromeDriver driver = new ChromeDriver();
driver.get("https://www.facebook.com");
JavascriptExecutor js = (JavascriptExecutor) driver;
String title = js.executeScript("return document.title").toString();
System.out.println("Page Title: " + title);
String url = js.executeScript("return document.URL").toString();
System.out.println("Page URL: " + url);
driver.get("https://www.facebook.com");
JavascriptExecutor js = (JavascriptExecutor) driver;
String title = js.executeScript("return document.title").toString();
System.out.println("Page Title: " + title);
String url = js.executeScript("return document.URL").toString();
System.out.println("Page URL: " + url);
Closed Shadow Root Handling
Understanding closed shadow root limitations in Selenium
Important Note
Selenium WebDriver does not support closed shadow root elements. JavaScript language must be used to work with closed shadow root elements. In most current projects, closed shadow root elements are rarely encountered.