In this article, we will delve into the world of Selenium automation with Python and explore a vital function called ‘element_to_be_clickable’. As you may already know, web scraping and automated testing require effective interaction with web elements. Selenium, a powerful tool for browser automation, provides us with the means to achieve this. We will discover how the ‘element_to_be_clickable’ function plays a crucial role in ensuring successful clicks on web elements, even in the face of dynamic web pages.
Understanding the ‘element_to_be_clickable’ Function in Selenium
To put it simply, the ‘element_to_be_clickable’ function in Selenium is a tool that allows us to wait for a specific web element to become clickable before performing any actions on it. By clickable, we mean that the element is not only visible on the webpage but also enabled, meaning we can interact with it.
The benefit of using the ‘element_to_be_clickable’ function becomes evident when dealing with dynamic web pages. Dynamic pages often have elements that load or change over time. For example, a button may appear after a certain event or condition is met. In such cases, if we try to interact with the element immediately without waiting, there’s a high chance that it won’t be ready, resulting in failed actions or errors.
By implementing the ‘element_to_be_clickable’ function, we can ensure that we interact with elements at the right moment, avoiding such issues. It acts as a guard, patiently waiting for the element to meet the criteria of being both visible and enabled before proceeding. This way, we can be confident that the element is ready for interaction, guaranteeing the success of our automation tasks.
By using ‘element_to_be_clickable,’ we improve the stability and reliability of our Selenium scripts. It helps us handle the timing intricacies of web page elements, allowing us to automate interactions accurately. Whether it’s clicking a button, submitting a form, or navigating through a menu, this function ensures that our automation scripts wait for the precise moment when the element is ready, resulting in smoother and more successful automation workflows.
Importing the Required Libraries:
To begin our Selenium automation journey, we need to set up the necessary Python libraries. Start by importing the Selenium WebDriver and the ‘expected_conditions’ module. Here’s an example code snippet to import these libraries:
from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as ECHow to use ‘element_to_be_clickable’ function in Selenium
Here is the generic syntax for using this function in Python Selenium.
driver = webdriver.Chrome()
wait = WebDriverWait(driver, 10)
options = (By.<LOCATOR_METHOD>, "<LOCATOR_VALUE>")
element = wait.until(EC.element_to_be_clickable(options))
First we created driver object. followed by defining a “wait” object which determines the maximum waiting period for the “element_to_be_clickable” function. The above code defines the maximum waiting period as 10 seconds.
We then create a tuple, which defines “how” and “where” the element we want to click is. For example, if we want to locate and click a “button” using XPath, the tuple for it will be the following:
options = (By.XPATH, "/xpath/expression/to/button")
Lastly, we called the element_to_be_clickable() function, wrapped in the until() method of the wait() object. This will return the element back to us, which we can then perform an action on (e.g clicking it) as shown below:
element.click()
Using different locaters with ‘element_to_be_clickable’
In this section we will practice using various locators available to us in Selenium, followed by some practical and working code snippets using sample HTML content. Here is a screenshot of the website’s main page.
We will be attempting to click on several of the buttons/links in the above image using the element_to_be_clickable() function.
Locating by ID:
<html>
<body>
<button id="loginBtn">Login</button>
</body>
</html>
To locate the button element by its ID attribute, you can use the following code:
options = (By.ID, 'loginBtn')
login_button = wait.until(EC.element_to_be_clickable(options))
login_button.click()
Locating by Name:
<html>
<body>
<input name="username" type="text" />
<input name="password" type="password" />
<input name="login" type="submit" value="Login" />
</body>
</html>
To locate the login button element by its name attribute, you can use the following code:
options = (By.NAME, 'login')
login_button = wait.until(EC.element_to_be_clickable(options))
login_button.click()
Locating by XPath:
<html>
<body>
<div>
<a href="https://example.com">Click me</a>
</div>
</body>
</html>
To locate the hyperlink element by its XPath, you can use the following code:
options = (By.XPATH, "//a[@href='https://example.com']")
hyperlink = wait.until(EC.element_to_be_clickable(options))
hyperlink.click()
Locating Hyperlinks by Link Text:
<html>
<body>
<p>Do you want to continue?</p>
<a href="/nextpage">Continue</a>
<a href="/home">Cancel</a>
</body>
</html>
To locate the “Continue” hyperlink element by its link text, you can use the following code:
options = (By.LINK_TEXT, 'Continue')
continue_link = wait.until(EC.element_to_be_clickable(options))
continue_link.click()
Locating Elements by Tag Name:
<html>
<body>
<div>
<a href="https://example.com">Click me</a>
</div>
</body>
</html>
To locate the “a” element by its tag name, you can use the following code:
options = (By.TAG_NAME, 'a')
hyperlink = wait.until(EC.element_to_be_clickable(options))
hyperlink.click()
Locating Elements by Class Name:
<html>
<body>
<div>
<a class='content' href="https://example.com">Click me</a>
</div>
</body>
</html>
To locate the “a” element by its class name, you can use the following code:
options = (By.CLASS_NAME, 'content')
hyperlink = wait.until(EC.element_to_be_clickable(options))
hyperlink.click()
Locating Elements by CSS Selectors:
<html>
<body>
<div class='class1'>
<a href="https://example.com">Example</a>
</div>
<div class='class2'>
<a href="https://quotes.toscrape.com/">Qoutes</a>
</div>
</body>
</html>
To locate the “a” element by its CSS selector, you can use the following code:
wait = WebDriverWait(driver, 10)
options = (By.CSS_SELECTOR, 'div.class2 a')
hyperlink = wait.until(EC.element_to_be_clickable(options))
hyperlink.click()
Combining Multiple Conditions:
You can combine the ‘element_to_be_clickable’ function with other expected conditions to create more complex waits. For example, you might want to wait for an element to be clickable and visible simultaneously. Here’s an example:
from selenium.webdriver.support import expected_conditions as EC
element = wait.until(EC.and_(
EC.visibility_of_element_located((By.ID, "element_id")),
EC.element_to_be_clickable((By.ID, "element_id"))
))
In this example, we use the ‘EC.and_’ function to combine the conditions of visibility and clickability. The code waits until the element is both visible and clickable before returning it.
By leveraging these different ways of using the ‘element_to_be_clickable’ function in python selenium, you can adapt it to various scenarios and ensure that your automation scripts interact with web elements only when they are ready.
This marks the end of the ‘element_to_be_clickable’ Function in Selenium Python. Any suggestions or contributions for CodersLegacy are more than welcome. Questions regarding the tutorial content can be asked in the comments section below.