protractor cannot locate element with css on ng-click element

Question

html:

<button class="helperButton ng-scope" ng-if="!isDisabled && displayHelper( 'none' )" ng-click="select( 'none', $event );" type="button">  ×  Select None</button>

trying to locate with:

element(by.css('button[ng-click="select( \'none\', $event );"]'));

get error:

Failed: No element found using locator: By.cssSelector("button[ng-click=\"select( 'none', $event );\"]")

this link provides a solution AngularJS Protractor - Finding an Element on a Page Using Ng-Click Binding but does not have details to the function its referencing. Any help would be appreciated.

Answer 1

Having your locator based on the ng-click is not quite reliable and readable.

Instead I would rely on the button text:

by.xpath('//button[contains(., "Select None")]')

or, on the class:

by.css('button.helperButton')

Or, if have a control over the application HTML templates - add an id attribute and use:

by.id('mybuttonid')

---

If you still want to use ng-click - try using starts-with CSS selector syntax to check ng-click attribute:

by.css('button[ng-click^=select]')