Exploring Selenium: Effective Methods to Display Attributes of Hidden Elements in Your Tests

The Style Attribute in HTML

The display property in HTML specifies an element's display behavior. Both inline and block elements can be assigned a display property, which governs the element's visibility. This property is defined within the element's <style> attribute. You can read more details on style attribute on W3Schools official website.

Selenium getAttribute and JavaScript Executor for hidden elements

Selenium, as the most popular web and mobile automation tool, offers an intriguing method for managing element visibility. This blog will demonstrate a script that uncovers a hidden element on an HTML page. To accomplish this, we will utilize the getAttribute() method to obtain the value of the style attribute. Based on this value, we will alter the display property to make the previously invisible element visible on the webpage. The manipulation of the style attribute is carried out using Selenium's JavaScriptExecutor.

Test Environment

Python has been utilized for scripting Selenium commands. Although JAVA remains a dominant language in the automation field, Python is increasingly gaining market share due to its concise and rapid coding capabilities, along with its extensive benefits in data processing.

Selenium Version - 4.22
Python Version - 3.10
Pytest Version - 8.2.2
Test Environment Specifications - Windows 11 + Pycharm Community Edition
Application URL - http://the-internet.herokuapp.com/

Creating Selenium instance and Launching the Application

We have developed pytest fixtures to establish the application URL and to manage the setup and teardown of our tests as an initial step.

# Some environment details are described in this fixture method like 
# Application URL
@pytest.fixture
def environment_details():
    url = "http://the-internet.herokuapp.com/"
    return url

# setup initiates the test environment and selenium webdriver instance
@pytest.fixture 
def setup(environment_details):
    print("Setting up...")
    driver = webdriver.Firefox()
    driver.get(environment_details)
    yield driver
    print("Tearing down...")
    driver.close()

Uncover the hidden element using getAttribute and Javascriptexecutor

We begin by opening the link to the page that contains the hidden element. Next, we use the getAttribute() method to retrieve the value of the style attribute, specifically the display property. If the value is 'display:none', we employ the Selenium JavascriptExecutor to alter this value to 'display:block' by using the arguments[0].setAttribute() method. The hidden element referred in this example is shown in the image below in the Google chrome inspector.

# Method to navigate to a page with hidden element and displaying it
def test_dynamic_loading(setup):
    setup.find_element(By.LINK_TEXT,"Dynamic Loading").click()
    setup.find_element(By.LINK_TEXT,"Example 1: Element on page that is hidden").click()
    hidden_element = setup.find_element(By.XPATH,"//*[@id='finish']")
    display_status = setup.find_element(By.XPATH,"//*[@id='finish']").get_attribute("style")

    # Check elements display status
    if display_status == 'display: none;':
        # Use javascript to change the attribute display from none to block
        setup.execute_script("arguments[0].setAttribute('style','display: block;')",hidden_element)
    wait = WebDriverWait(setup,20).until(EC.presence_of_element_located((By.XPATH,"//*[@id='finish']")))

So, this is how we can use one of Selenium's numerous capabilities to ease the life of an automation tester and deal with elements not readily visible on the web page but need to be interacted with as per the requirements of a test.

The comprehensive code base for the above reference has been checked in @.

priyadarshanipandey/HerokuAutomation: A python selenium commands reference with demo site as https://the-internet.herokuapp.com/ (github.com )

With over 14 years of experience as an automation engineer and a product quality owner, I possess extensive expertise in resolving automation-related challenges. If you encounter quality roadblocks or have business use cases that demand meticulous testing with precision and cost-efficiency, please consider reaching out to me.

You can reach me @

Email - priyadarshani.pandey@techconceptz.com

Linkedin - Priyadarshani Pandey | LinkedIn

#SeleniumAutomation #HiddenElements #AutomatedTesting #WebScraping #SoftwareTesting #TestAutomation #ElementVisibility

TechConceptz

Quality Squad