selenium: element is not visible using cssSelector while visible using xpath

Question

I tried the java code:

driver.findElement(By.cssSelector("input.only-numbers.ltr")).sendKeys("111");

I get an error:

Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: element not visible

but when i change the code to xpath this work prefectly

driver.findElement(By.xpath("html/body/section[10]/div/div[2]/form/div[1]/input")).sendKeys("111");

the html code:

<section id="forgot-password-layer" class="modal-layer old-modal animate-in" data-top="120" role="dialog">
<div class="modal-inner">
<a class="modal-close" title="" href="#">
<div class="modal-title">איפוס סיסמה</div>
<div class="form-wrapper">
<form id="form-resetpass" method="post" action="">
<div class="input-wrapper icon wupid">
<label for="wupid">תעודת זהות</label>
<input class="only-numbers ltr" type="text" value="" maxlength="9" name="wupid" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: left center;">
</div>
<input class="sprite form-resetpass" type="submit" value="" name="">
<div class="form-error"> </div>
</form>
<div class="new-user-message">
</div>
</div>
</section>

why its happen and how can I fixed by using cssSelector ?

Answer 1

It's looks like you have more than one element using cssSelector and unfortunately you are locating hidden element, need to verify your cssSelector that it is unique and locating correct element.

Try as below, may be it helps :-

driver.findElement(By.cssSelector("form#form-resetpass input[name = 'wupid']")).sendKeys("111");

Or try using WebDriverWait to wait until this element getting visible as below :-

new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("form#form-resetpass input[name = 'wupid']"))).sendKeys("111");

If you're still unable to interact with element, try using JavascriptExecutor as below :-

((JavascriptExecutor)driver).executeScript("arguments[0].value = arguments[1]", driver.findElement(By.cssSelector("form#form-resetpass input[name = 'wupid']")), "111")