Selenium click event does not trigger angularjs ng-click

Question

I have this page where there is a textbox and there is save button associated with each text box. I need to click on the save button so that it will save the value in text box. It is working manually and using selenium. But when running through Selenium WebDriver it's not saving the text box value. But there is no error exception being thrown. Input, Click is working. savetextvalue() is not triggered in short. There is similar issue Selenium click event does not trigger angularjs event

<pp-save-control fn-save-text="saveText();" btn-class="btn btn-default btn-mtl" button-id="btnkbaemailauthsub" place-holder-text="" input-class="tb-mtl" input-id="txtkbaemailauthsub" config-name="40" title-text="KBA email authentication subject" outer-container-class="div-mtl-header" class="ng-isolate-scope"><div class="div-mtl-header">
    <span class="label-mtl ng-binding">KBA email authentication subject</span><img ng-hide="(isHelpHidden != null &amp;&amp; isHelpHidden != 'true') ? false : true" class="help-mtl ng-hide" src="/Images/help.png">
    <div class="div-mtl-tb-holder">
        <input type="text" placeholder="" class="tb-mtl" name="txtkbaemailauthsub" id="txtkbaemailauthsub">
        <button ng-click="saveTextValue();" ng-hide="false" class="btn btn-default btn-mtl btn-mtl-alignment" name="btnkbaemailauthsub" id="btnkbaemailauthsub" type="button">save</button>
    </div>
</div>
</pp-save-control>

There are multiple text box and associated save button. Depending on the 'config-value'(You can see at top) value is getting saved.

Answer 1

Replace the locator according to your convenience

WebElement element= driver.findElement(By.id("btnkbaemailauthsub"));

JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);

OR

JavascriptLibrary jsLib = new JavascriptLibrary();
jsLib.callEmbeddedSelenium(driver,"triggerMouseEventAt", element,"click", "0,0");

OR

WebElement element= driver.findElement(By.id("btnkbaemailauthsub"));
// Configure the Action
Actions action = new Actions(driver);

//Focus to element
action.moveToElement(element).perform();

// To click on the element
action.moveToElement(element).click().perform();

Hope it will help you :)

Get back to me if still facing issue :)

Answer 2

driver = webdriver.Chrome('/path to /webdriver 22');
driver.find_element_by_css_selector('button[ng-click="func()"]');

Answer 3

Try putting in wait's in between your actions because Selenium doesn't know how angular loads and works. Protractor was created right for the purpose of handling angular web pages, which is a wrapper over selenium webdriver. However if you still want to test angularjs with Selenium then waiting for few seconds implicitly or fluent wait's between each action should help you with your need and accomplish what you intend to. Hope it helps.

Answer 4

In Selenium IDE try:

 <td>sendKeysAndWait</td>
 <td>id=mybutton</td>
 <td>${KEY_ENTER}</td>

same with Webdriver:

WebElement element_p = (new WebDriverWait(_driver, 3))
            .until(ExpectedConditions.visibilityOfElementLocated(By
                    .id("myButton")));
element_p.sendKeys(Keys.RETURN);

Answer 5

The same issue happens when using Selenide over Selenium. I found a workaround using Selenide, if that is an option for you:

After finding the clickable element, use Selenide's pressEnter() instead of click().

element.should(exist).pressEnter();

Answer 6

I faced this issue myself before. Here is how I solved it. Right click on the button -> Go to inspect element -> Copy css selector and store it in a variable

The code to click the button :

your_element = your_driver.find_element_by_css_selector(css_selector_variable)
your_driver.execute_script('arguments[0].click()',your_element)