Scroll the Element into View

The certain cases where the element is not visible within the viewport, we need to scroll the element into view before performing a specific action on them. This can be done using JavascriptExecutor, which is used to perform the actions that cannot be performed through Selenium in-built functions. In this approach, we will see how we can scroll the element into view and click on that element.

Syntax:

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(“arguments[0].scrollIntoView();”, element);

Here,

element: It is the element that has to be brought into view by scrolling.

Example:

In this example, we have opened the Geeks For Geeks website (link) and then found the element containing the text ‘Problem of the day’ which is out of the viewport. Then, we scrolled to the element using the retry mechanism till the element was clearly in the viewport and then we clicked that element.

Java




//Importing the Selenium libraries
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.By;
 
public class selenium3 {
    public static void main(String[] args) throws InterruptedException {
          
           //specify the location of the driver
           System.setProperty("webdriver.chrome.driver",
"C:\\Users\\Vinayak Rai\\Downloads\\chromedriver-win64\\chromedriver-win64\\chromedriver.exe");
      
           //Initialising the driver
           WebDriver driver = new ChromeDriver();
      
           //Launch the website
           driver.get("https://www.w3wiki.org/");
            
           // Maximize the screen
           driver.manage().window().maximize();
            
           // Stating the Javascript Executor driver
           JavascriptExecutor js = (JavascriptExecutor) driver;
            
           // Find Problem of the day text
           WebElement element = driver.findElement(By.xpath("// *[contains(text(),'Problem of the day')]"));
           int maxRetries = 10;
           int retryCount = 0;
            
           // Run while loop
            while (retryCount < maxRetries) {
                try {
 
                     // Scroll to the specific position
                    js.executeScript("arguments[0].scrollIntoView();", element);
                     
                    // Click that element
                    if (element.isDisplayed() && element.isEnabled()) {
                        element.click();
                        break;
                    }
                     
                } catch (Exception e) {
                    // Increment retry count if element is not found
                    retryCount++;
                    if (retryCount == maxRetries) {
                        // Throw exception of element is not found
                        throw e;
                    } else {
                        // Sleep for some time
                        Thread.sleep(10);
                    }
                }
            }
       }
}


Output:

How to Force Selenium WebDriver to Click on Element which is Not Currently Visible?

A programming language that is used to execute a set of instructions that a computer can understand and execute to perform various tasks is known as Java. Java can be controlled autonomously using various automation tools.

Table of Content

  • Visibility criteria
  • Wait for Visibility
  • Scroll the Element into View
  • Address Underlying Issues
  • Forceful Click using JavaScript
  • Conclusion
  • FAQs

Selenium is one such tool, that can make the work of developer and tester easier. There are various instances when the user needs to click or perform a certain action on the element that is currently not in the scope of visibility. In this article, we will see how we can forcefully click on an element that is not currently visible using Selenium webdriver.

Similar Reads

Visibility Criteria

The conditions that decide whether the element is visible or hidden within the viewport are known as visibility criteria. For performing any action on the element in the web page, either you need to make that element appear within the viewport or forcefully click that element....

Wait for Visibility

There are certain scenarios in which the element becomes visible after performing certain actions. In such cases, the user can let Selenium webdriver wait until the element is visible. This can be done using ExpectedConditions.visibilityOfElementLocated function. In this approach, we will see how we can wait for the visibility of the element before clicking on it....

Scroll the Element into View

...

Address Underlying Issues

The certain cases where the element is not visible within the viewport, we need to scroll the element into view before performing a specific action on them. This can be done using JavascriptExecutor, which is used to perform the actions that cannot be performed through Selenium in-built functions. In this approach, we will see how we can scroll the element into view and click on that element....

Forceful Click using JavaScript

...

Conclusion

Challenges with scrolling: In most cases, after the Selenium has scrolled to the element, still the element is not visible within the viewport. Thus the webdriver couldn’t perform any further action on that element, such as clicking, etc. Thus, we need to implement try-catch until the element is visible within the viewport and further actions can be performed on it. Dynamic Loading: In certain cases where the element appears at a certain time, the user doesn’t know how much time it will take the element to load, hence Selenium needs to find the element dynamically until the element is loaded. This affects the performance of the script execution. Appropriate element state: The user can face the challenges of performing actions on the element if the element is not in the appropriate state, i.e., disable or not clickable....

FAQs

In the cases, where above stated approaches don’t work, we need to forcefully click on an element using Javascript. This can be done using executeScript and click functions of JavascriptExecutor. In this approach, we will see how we can forcefully click an element using JavascriptExecutor....