How to click an angular element with selenium webdriver?

Question

Need help on below to click() i can't click on the Button 'Connexion'. I can locate element in Chrome devtool but my program still fails.

Button HTML :

<button class="btn btn-lg hoverableButton ng-scope" translate="LOGIN" ng-disabled="authenticationCtrl.disableMageConnectButton()" ng-click="onSubmit()">Connexion</button>

I have tried with below code

By button = By.xpath("//button[@class='btn btn-lg hoverableButton ng-scope' and contains(@ng-click, 'authenticationCtrl.onSubmitMage()')]");

WebDriverWait wait = new WebDriverWait(webdriver, 15);
    wait.until(ExpectedConditions.elementToBeClickable(button));
    webdriver.findElement(button).click();

The error Message :

Expected condition failed: waiting for element to be clickable: By.xpath: //button[@class='btn btn-lg hoverableButton ng-scope' and contains(@ng-click, 'authenticationCtrl.onSubmitMage()')] (tried for 15 second(s) with 500 milliseconds interval)

and

no such element: Unable to locate element: {"method":"xpath","selector":"//button[@class='btn btn-lg hoverableButton ng-scope' and contains(@ng-click, 'authenticationCtrl.onSubmitMage()')]"}

I tested the xpath on devtools and xpath and it found the button.

Thanks.

Answer 1

If

webdriver.findElement(button).click();

throws

no such element: Unable to locate element: {"method":"xpath","selector":"//button[@class='btn btn-lg hoverableButton ng-scope' and contains(@ng-click, 'authenticationCtrl.onSubmitMage()'

It could be cause of element is in iframe or locator could not found in DOM.

Since you are saying that it is present in DOM, I would probably say, we may have an iframe issue here.

Iframe :

The tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

In Selenium, we need to switch the driver focus to particular iframe in order to interact with the elements which are inside of the iframe :

driver.switchTo.frame("Frame_ID");

and then you should be able to do :

webdriver.findElement(By.xpath("//button[text()='Connexion']")).click();

Update 1 :

There are two button with same name, I am pretty much sure that xpath index will work

for first button :

(//button[text()='Connexion'])[1]

second button :

(//button[text()='Connexion'])[2]

Update 2 :

WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("(//button[text()='Connexion'])[2]"))).click();

Answer 2

单击按钮之前，请使用 isEnabled 检查按钮是否已启用