“The element is not currently visible and therefore cannot interact with it,” and the other?

Question

I created another question, which, in my opinion, is the cause of this error: Why does the Selenium Firefox Driver consider my modal not visible when the parent has an overflow: hidden?

Selenium version 2.33.0
Firefox driver

Error code:

System.Threading.Thread.Sleep(5000); var dimentions = driver.Manage().Window.Size; var field = driver.FindElement(By.Id("addEmployees-password")); //displayed is true field.Click(); //works fine var element = driver.FindElement(By.Id(buttonName)); //displayed is false element.Click(); //errors out 

The button that is trying to click:

 <div id="addEmployees" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addEmployeesLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Add Employee</h3> </div> <div class="modal-body"> <p class="alert alert-info"> <input name="addEmployees-username" id="addEmployees-username" /> <input name="addEmployees-password" id="addEmployees-password" type="password" /> <input name="addEmployees-employee" id="addEmployees-employee" /> </p> </div> <div class="modal-footer"> <button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button> </div> </div> 

• If I change the call to FindElements , then I will get ONE element, so there is nothing on the page.
• If I FindElement in the field that occurs immediately before the button, say addEmployees-employee , then addEmployees-employee is displayed
• In the browser itself, it displays well, all I have to do is actually click a button and execute the desired behavior, but the webdriver refuses to consider the displayed element

How can one field be displayed and the other not?

Modal with the add button in the lower right corner all other elements are displayed = true

The window size is 1200x645 on driver.Manage().Window.Size;
Item location: 800x355y on driver.FindElement(By.Id(buttonName)).Location
Elements sizes: 51x30 on driver.FindElement(By.Id(buttonName)).Size
Password item location: 552x233y on driver.FindElement(By.Id("addEmployees-password")).Size

Answer 1

Selenium WebDriver not only checks for transparency! = 0, visibility = true, height> 0 and displays! = None in the current element, but it also looks for a chain of DOM ancestors to ensure that there are no parent elements that also match these checkers. ( UPDATE . By looking at the JSON posting code referenced by all the bindings, SWD also requires overflow! = Hidden , as, and a few other cases .)

I would do two things before restructuring the code, as @Brian suggests.

• Make sure the div.modal_footer element does not have any reason for the SWD to render it invisible.

• Add some Javascript to highlight this element in your browser so that you know you have selected the right element. You can use this meaning as a starting point. If the button is highlighted in yellow, then you know that you have selected the correct item. If not, it means the selected item is located in a different DOM location. If so, you probably do not have unique identifiers, as you would expect, which makes manipulating the DOM very confusing.

If I were to guess, I would say that number two is what you are facing. This happened to me when Dev reused the identifier of the element, causing the discord in which you should find the element.

Answer 2

Brian's answer was right: use explicit expectation against Thread.Sleep (). Sleep () is usually fragile, you lose five seconds unnecessarily, and besides, it's just a very rotten practice for automatic testing. (It took me a long time to find out, so you are not alone there.)

Avoid implicit expectations. They usually work on adding new objects to the DOM, and not for transitions for things like modal to become active.

Explicit expectations include a large set of ExpectedConditions ( detailed in Javadox ) that can help you overcome these problems. Use an ExpectedCondition that matches the state you need for the next action.

Also see Ian Rose's great blog poster .

Answer 3

Having discussed this with you in the chat, I think that the best solution (at the moment, at least) is to move the button from the footer for your modal and to its body.

This is what you want (for now):

 <div class="modal-body"> <p class="alert alert-info"> <input name="addEmployees-username" id="addEmployees-username" /> <input name="addEmployees-password" id="addEmployees-password" type="password" /> <input name="addEmployees-employee" id="addEmployees-employee" /> <button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button> </p> </div> 

And not that:

 <div class="modal-body"> <p class="alert alert-info"> <input name="addEmployees-username" id="addEmployees-username" /> <input name="addEmployees-password" id="addEmployees-password" type="password" /> <input name="addEmployees-employee" id="addEmployees-employee" /> </p> </div> <div class="modal-footer"> <button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button> </div> 

Answer 4

I had the same problem with an item that is not showing, so you cannot interact with it. he just decided. I updated my standalone selenium server. the previous version was 2.33.0 and now it is 2.35.0

Answer 5

In my case, the element was already present on the page, but it was disabled, so this did not work (python):

 wait.until(lambda driver: driver.find_element_by_id("myBtn")) driver.find_element_by_id("myBtn").click() 

Error with error:

 "Element is not currently visible and so may not be interacted with" 

To solve my problem, I had to wait a couple of seconds ( time.sleep(5) ) until the element became visible.

You can also include an element using JavaScript, python example:

 driver.execute_script("document.getElementById('myBtn').disabled='' ") driver.execute_script("document.getElementById('myBtn').click() ")