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.

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.

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.

Below are the different methods of forcing Selenium WebDriver to click on the element that is not currently visible:

1. Recommended Approaches 

• Wait for Visibility
• Scroll the Element into View
• Address Underlying Issues

2. Less Recommended Approach

• Forceful Click using JavaScript

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.

Syntax:

WebDriverWait wait = new WebDriverWait(driver,Duration.ofSeconds(seconds));

wait.until(ExpectedConditions.visibilityOfElementLocated(By.linkText(element_text)));

Here,

seconds: These are the seconds for which we want the user to wait for the visibility of the element.

element_text: It is the text for which the webdriver needs to wait before clicking on that element.

Example:

In this example, we have opened the Geeks For Geeks website (link) and then waited until the element containing the text 'Trending Now' is visible. Once it is visible, we have clicked on that element.

Output:

👁 output-of-force-selenium-webdriver-click-on-invisible-element

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.

Output:

👁 scroll-the-element-into-view

Address Underlying Issues

1. 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.
2. 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.
3. 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.

Forceful Click using JavaScript

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.

1. executeScript: The feature of JavascriptExecutor that enables to execution of JavaScript code within the context of the current browser window is known as executeScript.

2. click(): The function that is used to simulate a mouse click action on a web element is known as the click function.

Syntax:

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript("arguments[0].click();", element);

Here,

element: It is the element that is out of the viewport and you want to click forcefully.

Example:

In this example, we 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, and then clicked on that element using JavascriptExecutor.

Output:

👁 forceful-click-using-javaScript

Conclusion

In conclusion, Javascript execution can help the Selenium web driver forcefully click on an element that is not currently visible. This is one of the best ways to click an element or perform some other action on an element if we are unsure about the visibility of an element. I hope after reading the various approaches mentioned in the article, you will be able to forcefully click on the element that is not currently visible using Selenium Webdriver.