Why is an element only clickable with javascript or actions in selenium?

Question

In the page below, I want to click the housing types menu so that I can select apartments and such. The menu is not revealed, but the code does not fail. It fails in the last line with the exception.

org.openqa.selenium.ElementNotVisibleException: element not visible

When I run the code in debug mode & click the menu manually, it passes. What is happening & why ?

public void dummy() {
    String url = "https://sfbay.craigslist.org/search/pen/apa?hasPic=1&search_distance=25&" +
            "postal=94014&nh=75&nh=80&min_price=1500&max_price=2500&bedrooms=1&bathrooms=1";
    browser.get(url);
    WebElement expand = browser.findElement(By.id("plusminus_housing_type"));
    Actions actions = new Actions(browser);
    actions.moveToElement(expand).click().perform();//ERROR ! Does not reveal housing types.
    WebElement house = browser.findElement(By.id("ul_housing_type"));
    WebElement apartment = house.findElement(By.xpath("//li[contains(., 'apartment')]//input"));
    apartment.click();
}

When I use javascript instead of actions, the menu is revealed, but I get an exception that the "apartment" element is not clickable. To fix that, I have to click it with javascript as well as shown below:

((JavascriptExecutor) browser).executeScript("arguments[0].click();", anyElement);

Surprisingly, actions or javascript is not needed to reveal the "neighborhoods" menu.

I don't want to just make the code work. I need to understand what is happening.

score 2 · Accepted Answer · answered Aug 12 '16 at 05:22

Actually Expand button with id plusminus_housing_type is hiding inside scroll bar, selenium do click on element as well as user do click on the page.

Suppose you are the user, and you are going to click on Expand button, you can not click on this button without scrolling down to reach this button.

According to same behavior selenium click() method works while JavaScript click just only trigger the event internally which is not correct with user's point.

So in this reason you are unable to click by using simple selenium click, Here you need to implement WebDriverWait and provide appropriate wait ExpectedConditions for interacting to these elements after scrolling down as below :-

browser.get(url);

WebDriverWait wait = new WebDriverWait(browser, 10);

//Now find the expand button first
WebElement expand = wait.until(ExpectedConditions.elementToBeClickable(By.id("plusminus_housing_type")));

//Now scroll down and reach to the button
((JavascriptExecutor) browser).executeScript("arguments[0].scrollIntoView();", expand);
//Now click on expand button
expand.click();

//Now wait until apartment checkbox visible and then find 
WebElement apartment = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("apartment_1")));
//Now click on apartment check box      
apartment.click();

What does visibilityOfElementLocated really do ? The API doc is not clear. "An expectation for checking that an element is present on the DOM of a page and visible. Visibility means that the element is not only displayed but also has a height and width that is greater than 0." What does it mean by "displayed" ? Can the element be seen in the viewport or screen ? OR, the element can be seen only if you scroll to it ? — MasterJoe, Aug 15 '16 at 00:51
Looks like javascript does not work sometimes. Here is a new question about it: http://stackoverflow.com/questions/38948096/why-cant-i-clear-an-input-field-with-javascript — MasterJoe, Aug 15 '16 at 01:31
Here Visibility means element can be viewable on screen and could be receive the event. So in your case it would be possible by scrolling and then expanding... — Saurabh Gaur, Aug 16 '16 at 04:58

Why is an element only clickable with javascript or actions in selenium?

1 Answers1