How to Check if an Element is Displayed on a Web Page with Selenium?

During web automation testing with Selenium, checking whether an element is displayed on a web page is a very common requirement. Selenium provides several methods to help achieve this. The following are the steps and methods for verifying an element's visibility on a web page:

1. Using the is_displayed() Method

The is_displayed() method is the most direct approach in Selenium WebDriver to determine if an element is visible. It returns a boolean value: True if the element is visible, False if it is not.

Example code:

python
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("http://example.com")

try:
    element = driver.find_element_by_id("someElementId")
    if element.is_displayed():
        print("Element is displayed on the web page.")
    else:
        print("Element is not displayed on the web page.")
finally:
    driver.quit()

In this example, we first locate the element with ID "someElementId" and then use the is_displayed() method to verify its visibility.

2. Checking Element CSS Properties

Sometimes, an element may exist in the DOM but not be visually rendered due to CSS properties like display: none or visibility: hidden. We can further confirm visibility by retrieving the element's CSS properties.

Example code:

python
display_status = element.value_of_css_property("display")
visibility_status = element.value_of_css_property("visibility")

if display_status != "none" and visibility_status != "hidden" and element.is_displayed():
    print("Element is displayed on the web page.")
else:
    print("Element is not displayed on the web page.")

This method combines CSS property checks with is_displayed() to more accurately assess the element's visibility.

3. Exception Handling

When attempting to access a non-existent element, Selenium raises a NoSuchElementException. We can catch this exception to determine if the element exists, thereby indirectly confirming its display status.

Example code:

python
from selenium.common.exceptions import NoSuchElementException

try:
    element = driver.find_element_by_id("someElementId")
    if element.is_displayed():
        print("Element is displayed on the web page.")
    else:
        print("Element is not displayed on the web page.")
except NoSuchElementException:
    print("Element does not exist.")

Here, if a NoSuchElementException is raised, it indicates the element is absent in the DOM and thus not displayed on the web page.

Conclusion

Verifying an element's visibility on a web page with Selenium typically involves combining the is_displayed() method, CSS property checks, and exception handling for accurate results. These techniques ensure reliable verification of element visibility, enhancing the accuracy and effectiveness of automated testing.