Finding elements on a web application is important for automated testing. You can’t assess the behavior of an element if you can’t perform actions on it. And you can’t perform actions on it if you can’t find it. To make sure all the elements on your application are working fine, you have to test each and every element. Clicking on the element is one of the important actions to make sure the element behaves as expected.
Modern applications are made to look attractive and pleasing. A lot of developers use complex development approaches to achieve this. It becomes a little difficult to find elements and click on them in modern applications because of the way they’re designed. In this post, I’ll be talking about one of the most common errors that testers face: “element is not clickable at point.”
What Is the “Element Is Not Clickable at Point” Error?
The error “element is not clickable at point” is self-explanatory. It means that the element that you’re trying to click on can’t be clicked at that particular point. You’d usually find this error when you locate an element and try to execute a click action on it. The question is, “why is the element not clickable if the element is found?”
You’ll find this error mostly while using the Google Chrome browser but hardly ever while using the Firefox browser. The reason for this being common in the Chrome browser is because the Chrome driver always clicks in the middle of the element. So when you’re testing a dynamic application, there are chances that the element you want to click on isn’t at the exact location as expected.
There are various cases that cause this error. I’m going to address a few common cases to help you understand the reason for this error.
What Causes the “Element Is Not Clickable at Point” Error?
Overlapping Elements
In most dynamic applications, there are overlapping elements. One of the common examples of such a design is the license agreement or disclaimer. When you visit a website that requires you to agree to the license or requires you to accept the disclaimer, a new overlapping element is created. You’ll see that all the other page elements are loaded and this disclaimer is another layer that’s placed on top of the underlying layer of elements. In such cases, if you try to click on the element that is lying below the pop-up, the “element is not clickable at point” error will be displayed.
Another example is when the web application wants you to accept the usage of cookies by the application. These applications want to store your cookie information to make your experience on the application better. Due to the General Data Protection Requirement (GDPR) and other similar privacy regulations, there are new requirements to disclose what information is being captured. These notifications often overlay the first page accessed. That can be the home page, or other pages on the website if they are directly linked—say, from a search result. If you try to click on the underlying element while the permission pop-up is displayed, you will likely get the error.
Expand Your Test Coverage
The solution is to make sure that the overlapping element is closed before you try to click on another element. Another solution is to switch to the layer that contains the element you want to click.
Element Isn’t Loaded Completely
In dynamic applications, elements are loaded on the fly. This means that all the elements you see aren’t completely ready. In such cases, if you try to click on the element, you’ll get the error. The solution to avoid this is to wait until the element is loaded completely. There are different ways of doing this. You can use implicit wait, explicit wait, or fluent wait.
Element Is Disabled
In certain applications, you’ll see the elements, but they aren’t enabled to be clicked. Submission forms are a common example of this. Suppose you’re testing an application that has a form and a “submit” button. Developers sometimes disable the “submit” button until all the data in the form is filled. The developers can also design the application in such a way that the “submit” button is enabled only after the data validation is done. In such cases, if you try to click on the elements that are disabled, you’ll see this error.
The solution is to wait until the element you want to click is enabled. Another solution is to fulfill the condition that would enable the element that you want to click.
Finding Element by Coordinates
When it gets difficult to find elements by name, ID, or XPath, testers use coordinates to click on an element. When this approach is used, if the location of the element is changed by a developer, due to dynamic load, or due to change in the location of the browser window, you see this error.
The first solution is to avoid using coordinates to identify the location of an element. If, for some reason, you have to use coordinates, then always maximize the browser or use a standard browser configuration size before identifying and setting the coordinates.
Fixing “Element Is Not Clickable at Point”
There’s no universal solution to this error. The fix completely depends on the cause. Here I’m going to list some of the common fixes for this error.
Maximize the Browser
As mentioned above, if you are using coordinates to click on an element, if the browser is minimized, some other element might receive the click. To avoid this, it’s a good practice to maximize the browser before interacting with the website.
Here’s the sample Python code to maximize the window:
driver = webdriver.Chrome()
driver.maximize_window()
Add Waits
When you’re working with dynamic applications, the elements load as the page is loaded. You should add waits wherever necessary to make sure that the element is available to click upon before clicking on it. Adding waits will also help in case of network issues that cause a delay in the loading of elements.
Use Coordinates to Select Element
If you’re dealing with complex websites, there might be nested elements. Finding and selecting these elements can be difficult. In such cases, using coordinates to click on elements is easier than using XPath or other element properties. But wait. Didn’t you tell me not to use coordinates to select elements? Yes, but this is one of those cases where coordinates might be necessary.
Switch to Active Element
Most dynamic websites display a pop-up for you to interact with. In such cases, switching the control from the background layer to the active layer using element properties such as XPath can be difficult. You can use functions to switch to the active element before clicking on it.
Below is the sample Python code to switch to the active element:
elem = driver.switch_to.active_element
There are various reasons why you’ll see this error and various solutions for the same. But wouldn’t it be better if you had one solution for all the cases? Fortunately for you, there’s is a solution to all of these problems, and that’s what we’ll cover in our next section.
Testim for “Element Is Not Clickable at Point” Error
Testim is a “record and playback” automated testing tool. Testim enables you to quickly record all your user actions in a web application and then convert them into a test that can be configured and modified. Before showing you how to use Testim, let me tell you why it’s the universal solution to the “element is not clickable at point” error.
Testim uses AI algorithms for application testing. When you record a set of actions in a web application, Testim’s algorithms look at hundreds of attributes to uniquely identify each element on the page. This helps tests remain stable as they can identify the element holistically rather than by a single attribute, by coordinate or another error-prone way. Testim also enables you to configure additional wait times or ensure that an element is visible before attempting to click on it.
I won’t go into how the AI works, but the benefit of using this approach is that when some attributes of an element change, such as color, location, or text, Testim can still find it and pass the test.
The first step is to log in to Testim. Once your account is set up, you’ll have to go to the dashboard and create a new test by clicking on the “CREATE TEST” button.
To record the test, click on the record button. The tool will open a new browser window where you’ll have to perform the tasks for testing the application. I’ll create a simple test where I’ll Google search for Testim. Then visit the Testim website and click on an element.
Once you complete the test actions, you’ll see the test steps created in Testim’s visual editor that represent the actions I performed. See the screenshot below.
To run the test simply press the play button. Testim adds a default validation that the element must be visible. In cases where a popup makes the element invisible, Testim can override the default validation and select the element. With Testim, you can also add a conditional step to close the popup. This is a good practice as running tests in incognito mode can trigger additional popups.
Conclusion
You’ve now learned about the “element is not clickable at point” error. I also mentioned the common causes of this error and how to solve them. But identifying the type of cause for the error and then writing code to solve that is time-consuming. Likely, you’d much rather use a smart tool that’ll do everything for you. Get a free community account of the Testim tool and see what more it can do.
Sudhrity is a technology advisor and presales leader at Testim.io. He specializes in Automated functional/performance Testing, Test Modeling, Test Data Management, Service Virtualization, Continuous Delivery/Testing, and DevOps. With over 28 years of software development, architecture, and consulting experience, he is passionate about making sure that his customers see and derive value from the successful adoption of Testim’s technology. He has architected and helped clients deploy solutions using a variety of technologies including agile, cloud, virtualization, and web across different industries – telecommunications, media, retail, finance, insurance, banking, utilities, and transportation.
What to read next
How to wait for a page to load in Selenium
How to Take a Screenshot in Selenium: A Walkthrough With Code
