selenium webdriver unable to locate element hidden in div

Question

I am using the selenium firefox webdriver in my java program. I am trying to type a string into a textbox and click submit. However, the textbox is nested in a hidden element so I can't access it using driver.findElement with id, xpath or css. (It is visible on the webpage, however). I get the NoSuchElementException

Here is the html of the webpage:

<div id="mainContent" style="overflow:hidden;">
<!-- content left here -->
<div id="contentLeft">
<script type="text/javascript" src="/enterprisesolutions/staticcontent/includes/scripts/QuickTask.js"/>
<script type="text/javascript" src="/enterprisesolutions/Includes/Javascript/date-picker.js"/>
<div id="quickTask">
<h2 class="boxContentHead">
<div id="qtBoxContent" class="boxContent quickTaskBack">
<!-- Accounts and Maintenance -->
<div id="qt_accounts_and_maintenance" class="qtStack" style="display:block">
<!-- Orders -->
<div id="qt_orders" class="qtStack" style="display:block">
<!-- Invoice -->
<div id="qt_invoices" class="qtStack" style="display:block">
<div class="qtIcon invoices"/>
<div class="qtContent">
<div class="qtTitle">Invoices</div>
<div class="qtForm">
<div class="qtLabel qtLabelInvoices">
<div class="qtLeftInvoices">
<div class="firstField">
<div class="qtFormLabel">Account/Phone/Circuit</div>
<div>
<input id="qt_invoices_text1" type="text" value=""/>
</div>
</div>
<div class="secondField">
</div>
<div class="qtRight">
</div>
</div>
</div>
<!-- Repairs -->
<div id="qt_repairs" class="qtStack" style="display:block">
<!-- Lottery Reporting -->
<!-- Reporting -->
<form id="quickTaskForm" name="quickTaskForm" action="/enterprisesolutions/global/quickTaskAction.do" method="post">
<!-- QT No Access -->
<!-- QT Request Access -->
<div id="qt_request_access" class="qtStackAccess" style="display:block">
</div>
<div id="qtBottom" class="quickTaskBack" style="background: none repeat scroll 0% 0% transparent;">
</div>
<!-- start promo and customized pod -->
<div id="promo_msg">
<!-- end promo and customized pod -->
</div>
<!-- end content left-->
<div id="contentRight" style="height: 845px;">
<!-- end content right -->
</div>

The div with id = mainContent has style of "overflow:hidden" which im guessing is causing the webdriver not find my element.

I have tried the following but they don't work since the field is hidden driver.findElement(By.cssSelector("#qt_invoices_text1")).sendKeys("hi"); driver.findElement(By.id("qt_invoices_text1")).sendKeys("hi"); (and with the correct xpath.)

I have heard there is a way around this using JavascriptExecutor but I haven't found one yet.

EDIT: Here is the stacktrace:

Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"css selector","selector":"#qt_invoices_text1"}
Command duration or timeout: 20.18 seconds
For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html
Build info: version: '2.33.0', revision: '4e90c97', time: '2013-05-22 15:33:32'
System info: os.name: 'Windows 8', os.arch: 'amd64', os.version: '6.2', java.version: '1.7.0_21'
Session ID: 334122ae-6eab-4036-96ca-1183c9129b51
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{platform=XP, databaseEnabled=true, cssSelectorsEnabled=true, javascriptEnabled=true, acceptSslCerts=true, handlesAlerts=true, browserName=firefox, browserConnectionEnabled=true, nativeEvents=true, webStorageEnabled=true, rotatable=false, locationContextEnabled=true, applicationCacheEnabled=true, takesScreenshot=true, version=21.0}]
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:57)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:525)
    at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:191)
    at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:145)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:554)
    at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:307)
    at org.openqa.selenium.remote.RemoteWebDriver.findElementByCssSelector(RemoteWebDriver.java:396)
    at org.openqa.selenium.By$ByCssSelector.findElement(By.java:407)
    at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:299)
    at DownloadInvoice.read(DownloadInvoice.java:282)
    at DownloadInvoice.main(DownloadInvoice.java:406)
Caused by: org.openqa.selenium.remote.ErrorHandler$UnknownServerException: Unable to locate element: {"method":"css selector","selector":"#qt_invoices_text1"}
Build info: version: '2.33.0', revision: '4e90c97', time: '2013-05-22 15:33:32'
System info: os.name: 'Windows 8', os.arch: 'amd64', os.version: '6.2', java.version: '1.7.0_21'
Driver info: driver.version: unknown

And here is my java code (irrelevant kind of but people kept asking) (part of a bigger project this is the only relevant code):

driver.get(sheet.getCell(j+1,i).getContents());
                driver.findElement(By.id("UserId")).click();
                driver.findElement(By.id("UserId")).clear();
                driver.findElement(By.id("UserId")).sendKeys(sheet.getCell(j+2,i).getContents());
                Thread.sleep(1000);
                driver.findElement(By.id("PASSWORD")).click();
                driver.findElement(By.id("PASSWORD")).clear();                                
                driver.findElement(By.id("PASSWORD")).sendKeys(sheet.getCell(j+3,i).getContents());
                Thread.sleep(5000);
                driver.findElement(By.id("submit")).click();
                Thread.sleep(2000);
            driver.findElement(By.cssSelector("#qt_invoices_text1")).sendKeys("hi");
driver.findElement(By.id("submit")).click();

EDIT: I played around with Selenium IDE and it selects the frame before typing with the command SelectFrame _shellbody but when I export it shows this as a comment in the code: // ERROR: Caught exception [ERROR: Unsupported command [selectFrame | _shellbody | ]]

Any help is appreciated!

Answer 1

Even after sufficient wait, if it doesn't work then try JSExecutor.

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript("document.getElementById(div element id).click()");

This should work.....

Answer 2

Need some wait, while executing the script your application takes some time to load the hidden element meanwhile selenium goes one step ahead & try to find the element but element not found because this element not yet loaded so, it check once and thrown an exception. use WebDriverWait take advantage over Thread.Sleep().

Answer 3

Try use WebDriverWait, it makes no sense talking about visibility now, because the exception is NoSuchElementException, which means the element is not there. After resolve this exception, then we can move through talking about visibility.

driver.switchTo().frame(0); // use this if it's in frame and you don't know how to locate it
WebElement input = (new WebDriverWait(driver, 15)).until(ExpectedConditions.presenceOfElementLocated(By.id("qt_invoices_text1")));

Also just a heads up, don't use Thread.Sleep(), use WebDriverWait please.