title: Dealing with hidden elements
body: <p>I am trying to scrape a website and the problem is, I cannot interact with hidden elements present on the website. The code is as follows:</p>
  
  <p><strong>Before clicking</strong></p>
  
  <pre><code>li class="header-nav__item login header-item-is-hidden" data-toggle="dropdown" style="display:list-item"
  
  &lt;a class="header-nav__link" href="#login-panel" aria-controls="login-panel" aria-expanded="true" aria-haspopup="true"&gt;&lt;/a&gt;
  
  &lt;script src="../../../Scripts/Login/Login.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../../Scripts/Login/2FALogin.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../../Scripts/common/error-handing.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;div id="Login_pnlDownTime"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;&lt;/script&gt;
  li
  </code></pre>
  
  <p><strong>After clicking</strong></p>
  
  <pre><code>li class="header-nav__item jp-login header-item-is-hidden is-active" data-toggle="dropdown" style="display:list-item"
  
  &lt;a class="header-nav__link" href="#login-panel" aria-controls="login-panel" aria-expanded="true" aria-haspopup="true"&gt;&lt;/a&gt;
  
  &lt;script src="../../../Scripts/Login/Login.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../../Scripts/Login/2FALogin.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../../Scripts/common/error-handing.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;div id="Login_pnlDownTime"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;&lt;/script&gt;
  
  li
  </code></pre>
  
  <p><strong>My source code</strong></p>
  
  <pre><code>driver = webdriver.Firefox()
  driver.get("http://www.website.com/Home.aspx")
  print driver.page_source
  ele = driver.find_element_by_xpath("//ul[@class = 'header-nav']/li[3]") 
  #this is deon because the list element here is the third element in the list
  ele.click()
  </code></pre>
  
  <p>Here on clicking the element, the dropdown does not become visible. Also, <code>ele.click()</code> is emulating the behaviour of hovering on the element, and not clicking the element.</p>
  
  <p><strong>Source code of the element that'll drop down on the click</strong></p>
  
  <pre><code>div id="Login_pnlDownTime" /div
  div id="login-panel" class="js-header-panel header-nav__dropdown right" aria-hidden="true" /div
  ::before
  a class="privilege-promo form-section" href="/EN/enrol-now.aspx"&gt;/a
  div class="privilege-form form-section"
  fieldset class="frm frm--vertical"
  input id="Login_hddnInvalidEmail" type="hidden" value="Invalid Email Id" name="ctl00$Login$hddnInvalidEmail"&gt; /input
  input id="Login_hddnInvalidNumber" type="hidden" value="Invalid Number" name="ctl00$Login$hddnInvalidNumber"&gt; /input
  input id="Login_hddnInvalidMobileNumber" type="hidden" value="Invalid Mobile Number" name="ctl00$Login$hddnInvalidMobileNumber"&gt; /input
  input id="Login_hddnFlashMessageDelay" type="hidden" value="10000" name="ctl00$Login$hddnFlashMessageDelay"&gt; /input
  button id="Login_btnSubmitLogin" class="btn btn-primary align-right" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBac…n$btnSubmitLogin", "", true, "LoginPage", "", false, false))" value="Continue" name="ctl00$Login$btnSubmitLogin" type="submit"&gt; /button
  </code></pre>
  
  <p>How to perform the click on the element?  </p>