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.

did you try with JavascriptExecutor. try with it or share the button unique id or xpath it will help — Shubham Jain, Sep 10 '15 at 10:34

Shubham Jain · Answer 1 · 2015-09-17T06:49:56.003

12

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 :)

edited Sep 17 '15 at 06:49

answered Sep 10 '15 at 10:35

Shubham Jain

16,610
15
78
125

1

Thanks for the reply. Tried out this one. It was not working. – manutd Sep 10 '15 at 10:50
I have updated by answer. try with 2nd option JavascriptLibrary – Shubham Jain Sep 10 '15 at 11:19
It didn't work out :( Coordinates is respective to the web element right?. Not to the web page? – manutd Sep 10 '15 at 11:52
have to try to give focus? In my first code add this code before click event executor.executeScript("arguments[0].focus();", element); – Shubham Jain Sep 10 '15 at 11:59
It is focusing and clicking . But still it is not saved. There are more than 1 text boxes with save button attached to it. Can it cause any issue. Same saveTextValue being called? – manutd Sep 10 '15 at 12:20
I have added the completed HTML for that control. Can you check it? – manutd Sep 17 '15 at 05:59
Sorry about it. Added – manutd Sep 17 '15 at 06:04
did you try action class. I have updated my answer. please try – Shubham Jain Sep 17 '15 at 06:44
third option work for me, like this: WebElement element= driver.findElement(By.xpath("XPath")); Actions action = new Actions(driver); action.moveToElement(element).click().perform(); – Shaiful Nov 05 '15 at 17:28

score 4 · Answer 2 · edited Jul 12 '16 at 14:07

4

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

edited Jul 12 '16 at 14:07

answered Jun 17 '16 at 10:43

ayoub laaziz

1,196
9
12

score 2 · Answer 3 · edited May 23 '17 at 11:46

2

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.

edited May 23 '17 at 11:46

Community

1
1

answered Sep 10 '15 at 11:17

giri-sh

6,934
2
25
50

+1 for this answer. I didn't go for the Javascript solution, as that doesn't replicate actual user input. Also, I couldn't use the css selector `'button[ng-click="func()"]'` since that would've given me more than 1 result. Explicit waits weren't enough either. My current solution is adding an implicity wait of 1 second. However I am wondering if that could be reduced to a minimum. – Thibstars Sep 21 '16 at 09:54

Sirim · Answer 4 · 2015-09-15T12:54:07.170

2

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);

edited Sep 15 '15 at 12:54

answered Sep 15 '15 at 12:47

Sirim

182
2
18

Brilliant! Sending the actual key to the element solved it . – Maritim Jun 23 '17 at 15:51

score 0 · Answer 5 · answered Jun 01 '18 at 08:37

0

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();

answered Jun 01 '18 at 08:37

Guy Stevens

1

score -1 · Answer 6 · answered Jun 24 '20 at 13:38

-1

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)

answered Jun 24 '20 at 13:38

user151016

1
1

1

From reading the question, I don't think this is about the selector. Also, what you describe usually leads to very brittle selectors, so it's not generally recommended. – Thomas Hirsch Jun 24 '20 at 14:34
So can you please tell the correct way to solve the issue? Because from what I find, the method I described solves the problem . – user151016 Jun 26 '20 at 04:25

Selenium click event does not trigger angularjs ng-click

6 Answers6

Linked