selenium.ElementNotVisibleException: Element is not currently visible

Question

I am working on selenium, while running Java code I tried to access a text box from the web page but selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with Command duration or timeout error.

HTML code for text field :

 <input style="width: calc(99% - 20px);" class="edit-box eb-big" id="edit-box-big" name="title" placeholder="Job Title *" type="text">

JAVA Code to access text field :

driver.findElement(By.name("title")).click();
driver.findElement(By.name("title")).clear();
driver.findElement(By.name("title")).sendKeys("Job Title");

Error Tree :

org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
Command duration or timeout: 30.04 seconds
Build info: version: '2.44.0', revision: '76d78cf', time: '2014-10-23 20:03:00'
System info: host: 'Rajesh-PC', ip: '192.168.0.149', os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.8.0_31'
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{applicationCacheEnabled=true, rotatable=false, handlesAlerts=true, databaseEnabled=true, version=35.0.1, platform=WINDOWS, nativeEvents=false, acceptSslCerts=true, webStorageEnabled=true, locationContextEnabled=true, browserName=firefox, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true}]

I also tried accessing element using xpath, name and css selector but every time I am getting same message.

Additional html code.

<!-- card body -->
<div class="card-body inl-blck"></div>

<div class="logo-card-content" name="logo-card-content">

</div>

<div class="body-content" name="body-content"></div>

<input class="edit-box eb-big" id="edit-box-big" name="input-name" type="text" placeholder="Text Box" />

<input class="edit-box" id="empty-edit-box" type="text" placeholder="Text Box" />

<a class="expand-but more-but" id="job-desc-more" name="more-button">More</a>
<a class="expand-but less-but" id="job-desc-less" name="less-button">Less</a>

<div class="key-value" id="key-val-card">
    <div class="card-col-1" name="key"></div>
    <div class="card-col-2" name="value"></div>
</div>

<div class="tags" name="tags"></div>

<div class="slider" id="slider">
    <div class="slider-name" name="slider-name"></div>
    <div class="slider-align">
        <div class="slider-value"></div>
        <div id="slider-type" name="slider-type"></div>
        <div class="slider-value" id="experience-max"></div>
    </div>
</div>

<div class="card-body-title"></div>

<div class="title-card-body" name="title-card-body"></div>

<div class="expandable-list" id="expandable_list">
    <ul class="el-ul">
        <li>
            <div class="el-item" name="el-item">
                <h4 class="el-title" name="card-title"></h4> <h4 class="el-title" name="card-title2"></h4>
                <!-- <span class="el-date light-font" name="card-title-right"></span> 
                <span class="el-date light-font" name="card-title-right_2"></span> -->

Inner Section on Div.

//here's code for textbox which i would like to access.

Answer 1

This often happens when there are multiple elements that match your search and one of them is hidden and the other is not. If it finds the element that is hidden, you will get this error. I would search through the DOM for any other element with the name "title". You may need to provide additional information to ensure the identifier is unique and finds only a single element, or use findElements and then select the correct one from the collection.

An easy way to check if there are multiple elements is to use this in the console tab of the developer tools for your browser, this is the CSS selector for name=title:

$("[name='title']")

If it returns multiple elements, you know this is the problem. If not, let me know and maybe provide the entire (or more) html and I can help figure out what is going on.

Answer 2

Check if:

• element is visible in your viewport, if not, try calling maximize_window() in order to maximize the current window that webdriver is using,
• your element is not appearing twice (under the same selector), and you're selecting the wrong one,
• if your element is hidden, then consider making it visible,
• if you'd like to change value of hidden element, then use driver.execute_script() to achieve that.

This basically happens, because Selenium is designed to imitate user interaction, so you can't access/change element that normally the user cannot interact with.

Answer 3

If it is available, id should always be your preferred method of location of elements. It is the fastest and most reliable lookup.

driver.findElement(By.Id("edit-box-big"))

Answer 4

Your element is not visible. Thats the reason Selenium couldn't able to click on it.

Are you sure the element is visible? According to Selenium an element is visible if:

visibility != hidden display != none (is also checked against every parent element) opacity != 0 (this is not checked for clicking an element) height and width are both > 0 for an input, the attribute type != hidden

Answer 5

This code worked for me as I used following code to locate element.

driver.findElement(By.xpath("//input[@id='edit-box-big' and @placeholder='Job Title *']")).click()

  driver.findElement(By.xpath("//input[contains(@placeholder,'Job Title']")).click();