ElementNotVisibleException due to css style "display:none;"

Question

When executing the following test in Firefox an "org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with" is thrown. The reason seems to be a pop-up window which appears just before the Select field (variable selectMarke) is being used (and strangely not when manually clicking through that site). I tried several possibilities which are listed in different threads but they didn't work. The cause seems to be the pop-up window.

How can I solve that problem?

    FirefoxProfile profile = new FirefoxProfile();
    profile.setEnableNativeEvents(true);
    WebDriver driver = new FirefoxDriver(profile);
    driver.manage().timeouts().implicitlyWait(16, TimeUnit.SECONDS);

    driver.get("http://www.autoscout24.de/");
    System.out.println("Page title is: " + driver.getTitle());
    WebElement pageWSuche = driver.findElement(By.linkText("Werkstattsuche"));
    pageWSuche.click();

    WebElement plzField = driver.findElement(By.id("cms-plz"));
    plzField.sendKeys("81243");

    WebElement findGarField = driver.findElement(By.cssSelector("span.buttonBob span input[value='Werkstätten finden']"));
    findGarField.click();

    WebElement navInspect = driver.findElement(By.linkText("Inspektion (mit Preis)"));
    navInspect.click();

    Select selectMarke = new Select(driver.findElement(By.cssSelector("select.inputL[name='MakeId']")));
    selectMarke.selectByVisibleText("BMW");

    driver.quit();

When executing the following class on the same domain but in a different page everything is fine since no pop-up window does appear.

    FirefoxProfile profile = new FirefoxProfile();
    profile.setEnableNativeEvents(true);
    WebDriver driver = new FirefoxDriver(profile);
    driver.manage().timeouts().implicitlyWait(16, TimeUnit.SECONDS);

    driver.get("http://www.autoscout24.de/");
    WebElement element = driver.findElement(By.linkText("Fahrzeugsuche"));
    element.click();

    Select selectMarke = new Select(driver.findElement(By.cssSelector("select.inputFullWidth[name='make1']")));
    selectMarke.selectByVisibleText("BMW");
    Select selectModell = new Select(driver.findElement(By.cssSelector("select.inputFullWidth[name='model1']")));
    selectModell.selectByValue("15779");
    Select selectPriceTo = new Select(driver.findElement(By.cssSelector("select.inputFullWidth[name='priceto']")));
    selectPriceTo.selectByVisibleText("100.000");
    Select selectYearFrom = new Select(driver.findElement(By.cssSelector("select.inputFullWidth[name='yearfrom']")));
    selectYearFrom.selectByVisibleText("2006");
    Select selectKM = new Select(driver.findElement(By.cssSelector("select.inputFullWidth[name='mileageto']")));
    selectKM.selectByVisibleText("200.000");
    Select selectFuel = new Select(driver.findElement(By.cssSelector("select.inputFullWidth[name='fuel']")));
    selectFuel.selectByVisibleText("Diesel");
    WebElement location = driver.findElement(By.id("zipcode"));
    location.sendKeys("München");
    Select selectRadius = new Select(driver.findElement(By.cssSelector("select.inputFullWidth[name='zipradius']")));
    selectRadius.selectByVisibleText("200 km");

    WebElement searchBtn = driver.findElement(By.cssSelector("input[value$='Fahrzeuge']"));
    searchBtn.click();

    driver.quit();

I re-checked against [http://stackoverflow.com/questions/6101461/selenium-2-0-element-is-not-currently-visible] and the problem is not the pop-up (which I "eliminated" by using the local firefox profile) but a css "display:none;" in one of the parent elements. Is there any possibility of working around that problem? Strange thing: despite that setting the user can click and select fields in that section. So that should be testable. — Mike, Sep 29 '12 at 11:27

score 0 · Answer 1 · answered Oct 05 '12 at 20:06

This should really not happen. Actually, selenium is pretty clever in finding out wether an element is visible or not. The following code is copied directly from the Selenium atoms:

 // Any element with a display style equal to 'none' or that has an ancestor  
 // with display style equal to 'none' is not shown.  
 function displayed(e) {    
     if (bot.dom.getEffectiveStyle(e, 'display') == 'none') {      
         return false;    
     }        
     var parent = bot.dom.getParentElement(e);   
     return !parent || displayed(parent);  
 }

This allows for child elements to override a parent's display:none. Maybe there is something else going wrong?

One alternative would be to use jquery to sort of manually click on the submit. Autoscout24 has some mention of jquery so it should already be embedded in the page. Then you could use something along the lines of

//searchBtn.click();
((JavascriptExecutor) driver).executeScript("$(arguments[0]).click();", searchBtn);

This way, you can circumvent selenium's checking of whether the element is visible or not. I hope that helps.

score 0 · Answer 2 · answered Nov 12 '13 at 17:25

I would do it with a method like this, tailored to look for the display:none flag on a element:

public Boolean elementIsDisplayed( By locator ) {   
    Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
        .withTimeout(30, TimeUnit.SECONDS)
        .pollingEvery(5, TimeUnit.SECONDS)
        .ignoring(NoSuchElementException.class, StaleElementReferenceException.class);
    WebElement foo = wait.until( 
         ExpectedConditions.visibilityOfElementLocated( locator );
    if ( foo == null ) return false;
    return true;
}

ElementNotVisibleException due to css style "display:none;"

2 Answers2