How do you click on an element which is hidden using Selenium WebDriver?

Question

I have a web application which I am automating using WebDriver and Python .

The issue is that there is a menu something like this if I click manually on the arrow button it expands to another submenu from where I need to select a particular field.

I can find this third menu but when I click on it using element.click() instead of expanding the menu and showing me its sub menu items it is showing consolidated contents of all the sub menu.

(Manually the expansion to sub menu is achieved by actually clicking on the small arrow icons before the group names) So how do I actually click on this arrow icons to expand one of the group menu into sub menus.

This is the HTML corresponding to third group menu if it helps.

<div id="node_3_item" class="treeLabelSelected" style="padding-left: 0px; background-position: 0px -24px;">
<span style="background-position: 0px -24px;">XXX Groups</span>
</div>
<div style="display: none;"></div>
</div>

The display: none line is actually hiding the sub menu (as far as I can make out)

Any suggestion on how to handle will be appreciated. Thanks

Note: I have already gone through several questions on SO related to interacting with hidden web elements but they differ with my situation.

Answer 1

Grab the element you want to click:

# Or using xparth or something
element = driver.find_element_by_css_selector(css_selector)

Click it using javascript:

driver.execute_script("$(arguments[0]).click();", element)

NOTE: I'm using jQuery otherwise select it native with javascript

Answer 2

You can use JavaScriptExecutor

For Eg. - document.getElementsByClassName('post-tag')[0].click();

Issue that JS via JavaScriptExecutor

  (JavascriptExecutor(webdriver)).executeScript("document.getElementsByClassName('post-tag')[0].click();");

Answer 3

If your application uses jQuery you can use it to specify a target element which will simplify your work. Eg

$('.targetClass')