Cannot click on Angular-JS button with selenium web-driver: ElementNotVisibleException

Question

I trying to click on this button (it is clearly on the page and in view):

<button class="ui tertiary button" data-ng-click="addRoom()" data-ng-disabled="pendingRequests >= 1">ADD ROOM TO CRUISE CART</button>

Here is my code:

driver.FindElement(By.CssSelector("button[data-ng-click^='addRoom']")).Click();

It always throws this error:

OpenQA.Selenium.ElementNotVisibleException : Element is not currently visible and so may not be interacted with

Is Selenium WebDriver compatible with angular JS?

Answer 1

Change your code to the following:

driver.findElement(By.xpath("//button[contains(text(),'ADD ROOM TO CRUISE CART')]")).click();

Answer 2

I have managed to identify the problem, There are multiple buttons with the exact same XPath one is visible at given time the other are not visible. I

   var list = driver.FindElements(By.CssSelector("a[data-ng-click='addRoom()']")).ToList();

        foreach (var item in list)
        {
            Console.WriteLine(item.Displayed);

            if(item.Displayed)
            {
                item.Click();
            }
        }

This got the active button, Thank you for all your help. I can move forward now

Answer 3

Had the same issue, you can do this (using linq)

driver.FindElement(By.CssSelector("button[data-ng-click^='addRoom']")).First(x=>x.Displayed()).Click();