Handling hidden elements in Selenium

Question

I have just encountered a question about handling hidden elements in Selenium. I don't understand how they should be handled. I'm also confused about why hidden elements would be used.

How do I handle hidden elements in Selenium? I'm particularly concerned with handling hidden elements that have the same or almost the same identifiers as a visible element.

Original text

Today was the first time I was asked about hidden elements in Selenium and I never had to deal with them in practice. I watched a video tutorial on that and I now get the general idea. To follow up on that video I would like to ask, why hidden elements exist to begin with, is it flawed design?

Secondly, is it true that they can pose a challenge only if there is an identical visible element present and even in this case you don't have to resort to identifying non-hidden elements by their coordinates not being equal to 0, you just need to carefully inspect it because hidden elements are unlikely to have all identifiers identical to another visible element?

Answer 1

To click on a hidden element, you can use execute_script with the parameter "arguments[0].click();"

Code example:

element = driver.find_element_by_xpath("//input[@id='firstname']")
driver.execute_script("arguments[0].click();", element)

Answer 2

I am sure even if the id of the hidden element is same of that of visible element; there will be an attribute which would be different. You would need to carefully investigate the attributes/locator. As @quinny1187 suggests XPath or css would be ideal way to do it!

ExecuteJavascript with unique attribute would prove useful in such cases. That always helps me in these situation where i would not be able to click on the element which is hidden.

For instance:

driver.executeJavaScript("document.getElementBy"attribute"
('attribute/locator').click();");

Answer 3

Hidden elements are hard to handle: QA script can detect its presence but not more - because user cannot interact with such element either. So presence of a hidden element can signify some status/transition is a page, like throbber/spinner signifies page is loading something.

Also, hidden elements can contain some info relevant to a test script but not to a user.

If hidden element has EXACTLY same ID as visible, locating such element by ID will fail. Happened to me, and was quite confusing (locating element failed without any good error message, as if element was not present - but it was. There was also another element with same ID). Page had to be fixed, removing the extra element (or renaming it).

Answer 4

If the hidden object has an ID that is the same as another element, you can use an xpath to find the specific hidden element. Using chrome developer tools and inspect element a lot of the times a hidden object has this attribute type="hidden" if that is the case you can do something like this for a locator object.

By hiddenObj = By.xpath("//*[@id='idOfYourHiddenElement' and @type='hidden']");

This would get your locator even if the id idOfYourHiddenElement is used by some other non-hidden element.

If the hidden object does not have that hidden attribute you can use the Chrome Developer tools

Go to Chrome Menu -> More Tools -> Developer Tools and click the Console tab.

Type this into the console:

$x("//*[@id='idOfYourHiddenElement']");

As long as chrome is using the right frame, it should find both of your objects. An easy way to find a difference between the two is open up each element and copy paste all attributes into something like notepad++ to auto compare them. Once you find what the difference is you should use that as the second part of your xpath instead of type='hidden'.

Answer 5

I have a similar situation, where there are several essentially identical elements on a page, but only one is displayed at any given time and that's the one that I need to interact with.

I use "findElements" to get a list, then iterate through the list and click on the isDisplayed() element.

    List<WebElement> allItems= myWebDriver.findElements(<find criteria here>));
    for (WebElement oneItem: allItems) {
        if(oneItem.isDisplayed()) {
          oneItem.click();
          break;
        }
    }

I don't think it's very elegant, but it works for me.

Cheers!

Answer 6

So now we know how to verify hidden elements using Selenium Webdriver :-)

My first reflection is to question why this test is necessary to do and in case the test is needed I would investigate if this test could be done as a unit test (for example with react testing library if the frontend is developed in React).

Considerations should be done with the following principles in mind:

• Testing Pyramid
• Risk Based Testing
• Test Economy