How to make Selenium WebDriver click an element that is not currently displayed?

Question

I am using the Selenium 2 Java interface with FirefoxDriver. When I fill out a form, checkboxes are added to the page depending on the input of the forms.

I would like to simulate a click on these checkboxes using Selenium. The item is displayed and accessible in a regular browser, but selenium claims that the items are not visible.

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

Can I make selenium ignore the invisible state of elements? How to make Selenium interact with an invisible element?

Answer 1

Selenium determines whether an element is visible or not by the following criteria (use the DOM inspector to determine if css refers to your element, make sure you look at the computed style):

• visibility! = hidden
• display! = none (also checked for every parent element)
• opacity! = 0 (this is not tested to click an element)
• height and width:> 0
• for input, attribute type! = hidden

Your item meets one of these criteria. If you don’t have the ability to change the style of the element, here is how you can do it with javascript (assuming WebDriver, as you told Selenium2 API):

 ((JavascriptExecutor)driver).executeScript("arguments[0].checked = true;", inputElement); 

But this will not trigger the javascript event, if you depend on the change event for this input, you will have to run it as well (many ways to do this are easiest to use any javascript library loaded on this page).

Visibility Check Source -

https://github.com/SeleniumHQ/selenium/blob/master/javascript/atoms/dom.js#L577

The WebDriver specification that defines this is

https://dvcs.w3.org/hg/webdriver/raw-file/tip/webdriver-spec.html#widl-WebElement-isDisplayed-boolean

Answer 2

Sometimes this means that there are several elements on the page that have the same property as you, and you are "talking to the wrong one."

If your element cannot be uniquely identified with: id or: name (or: class), this can be tricky.

Sometimes finding an element by: xpath will help, and in some cases even this is not practical.

In these cases, you may need to get all the items that match your criteria and indicate the correct index. He is dirty, but he works.

I am using Selenium / Watir from a Ruby on Rails application, so in my case the example would be:

 browser = Watir::Browser.new(:firefox, :profile => "default") browser.goto("http://www.google.com/analytics") # login browser.divs(:text, "+ New Property").last.click 

Hope this helps.

Answer 3

I had a similar problem, but it was related to the fact that the item does not appear in the viewport. I took a screenshot and realized that the browser window is too narrow and the element is not visible. I made one of them and it worked:

 driver.maximize_window() 

See: WebDriver.maximize_window ()

Answer 4

Or you can use the Selenium Action Class to simulate user interaction - For example

  WebDriver = new FirefoxDriver(); WebElement menu = driver.findElement(By.xpath("")); // the triger event element Actions build = new Actions(driver); // heare you state ActionBuider build.moveToElement(menu).build().perform(); // Here you perform hover mouse over the needed elemnt to triger the visibility of the hidden WebElement m2m= driver.findElement(By.xpath(""));//the previous non visible element m2m.click(); 

Answer 5

There is also another case where the visible element will be recognized as invisible:

• When an element is converted to CSS
• When the parent element of an element is converted to CSS

To check if an element you aren’t interacting with has CSS converted, do the following on CHROME:

• open inspector
• Find an interesting element (or rather, its parent element, presumably a div element)
• Select the Calculate tab
• if there is a parameter: webkit-transform: matrix (...), this means that the CSS element is transformed and cannot be recognized by selenium 2 as a visible element

Answer 6

Invisibility can also be caused by synchronization, when the element should appear slowly. In this case, you may need to make the browser wait a bit.

See, for example, the question of letting WebDriver wait for an item to appear .

Answer 7

I had the same issue with selenium 2 in Internet Explorer 9, but my fix is ​​really weird. I was not able to click the inputs inside my form -> selenium repeats, they are not visible.

This happened when my shape had curved shadows → http://www.paulund.co.uk/creating-different-css3-box-shadows-effects : in a specific "Effect No. 2"

I have no idea why & how this pseudo-element solution stopped selenium tests, but it works for me.

Answer 8

You cannot force access to / modify an element that the user usually does not have access to, since Selenium is designed to simulate user interaction.

If this error occurs, check to see if:

• Element
• displayed in your viewport, try to maximize the current window that the web editor uses (e.g. maximize() in node.js, maximize_window() in Python),
• your element does not appear twice (under the same selector), and you select the wrong one,
• if your element is hidden, then consider making it visible
• if you want to access / change the value of a hidden element, despite the restriction, then use Javascript for this (e.g. executeScript() in node. js, execute_script() in Python).

Answer 9

I just solve this error when using capybara in the ror project by adding:

 Capybara.ignore_elements = true 

to features/support/env.rb

Answer 10

I just solve this error by expecting the display property of an element

 waitFor() { element.displayed } 

Answer 11

I get an ElementNotVisibleException using selenium for functional tests on the django site with initial glyphics as links in the templates:

 <a href="{% url 'item-add' %}"><span class="glyphicon glyphicon-plus text-danger"></span></a> 

During my functional tests, the bootstrap style does not load, so trying to click on such links will throw an ElementNotVisibleException. I manage to make them clickable by simply adding a space in the tag, like this:

 <a href="{% url 'item-add' %}"><span class="glyphicon glyphicon-plus text-danger">&nbsp;</span></a> 

Answer 12

The accepted answer worked for me. Below is some code to find the parent that makes Selenium consider it invisible.

 function getStyles(element){ computedStyle = window.getComputedStyle(element); if(computedStyle.opacity === 0 || computedStyle.display === "none" || computedStyle.visibility === "hidden" || (computedStyle.height < 0 && computedStyle.height < 0) || element.type === "hidden") { console.log("Found an element that Selenium will consider to not be visible") console.log(element); console.log("opacity: " + computedStyle.opacity); console.log("display: " + computedStyle.display); console.log("visibility: " + computedStyle.visibility); console.log("height: " + computedStyle.height); console.log("width: " + computedStyle.width); } if(element.parentElement){ getStyles(element.parentElement); } } getStyles(document.getElementById('REPLACE WITH THE ID OF THE ELEMENT YOU THINK IS VISIBLE BUT SELENIUM CAN NOT FIND')); 

Answer 13

To add my grit here: if an element is behind a fixed div tag, it will be considered invisible, and you will not be able to click on it; this happened to me recently, and I solved it by running the script as recommended above, which does:

 document.evaluate("<xpath locator for element to be clicked>", document, null, XPathResult.ANY_TYPE, null).iterateNext().click()", locator); 

Answer 14

There are many good answers on this page.

1. I usually start with maximize.window (), in fact I do this in the driver factory or wherever you initialize the driver. This is what is done by default - always.
2. This is usually an expectation of an element due to some JavaScript delay.

Both are discussed in various details above. The answer I did not see was ScrollToElement. It looks like you are processing a list of items, and when processing you create more items, check boxes. This can cause items in your list to move from the visible page. Sometimes you can see an element with the naked eye, but you just can’t click on it. When processing lists, sometimes you have to interrupt scrolling.

• Set a breakpoint and check if the item you are using is on the edge of the window, top / bottom right / left. Sometimes, when this is the case, you cannot reach it with selenium, but you can manually click the mouse.

Since I came across this, I created PageScroll.java and put my scroll scripts there. Here are a few methods from this class:

 public static void scrollToTop(WebDriver driver) { ((JavascriptExecutor) driver) .executeScript("window.scrollTo(0,0)"); } public static void scrollToBottom(WebDriver driver) { ((JavascriptExecutor) driver) .executeScript("window.scrollTo(0, document.body.scrollHeight)"); } public static void scrollToElementTop(WebDriver driver, WebElement element) { ((JavascriptExecutor) driver).executeScript( "arguments[0].scrollIntoView(true);", element); } public static void scrollToElementBottom(WebDriver driver, WebElement element) { ((JavascriptExecutor) driver).executeScript( "arguments[0].scrollIntoView(false);", element); } 

see Scroll Element to View with Selenium for more examples