5

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.

Community
  • 1
  • 1
awaken
  • 789
  • 1
  • 11
  • 22

1 Answers1

4

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]')
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • I tried button text but it has that strange x character and all those spaces that makes it not work. – awaken Mar 11 '15 at 01:32
  • @awaken well, that's why I've used `contains()`. It is strange that you still cannot locate it. Are there any `frame` or `iframe` elements on the page? Thanks. – alecxe Mar 11 '15 at 01:36
  • the page has tons of elements that meet those locating methods and I will get `WARNING - more than one element found for locator By.xpath("//button[contains(., \"Select None\")]") - the first result will be used` thats why I'm using ng-click – awaken Mar 11 '15 at 01:37
  • @awaken well, if there are many elements with `Select None` text inside - I suspect `ng-click` would also be the same for them. How do you know which one do you need? Thanks. – alecxe Mar 11 '15 at 01:40
  • xpath `//*[@id='-search-form']/div[1]/div[4]/div[1]/div[1]/div/span/div/form/div[1]/div[1]/button[2]` works but I try to stay away from xpaths because they can be brittle. – awaken Mar 11 '15 at 01:46
  • @awaken well, it depends on how you write it. The one you've presented looks very fragile and depends very much on the page structure. You need to identify key elements with unique attributes which you can rely on. Is there any chance to see the HTML code of the page? Thanks. – alecxe Mar 11 '15 at 01:50
  • there are multiple angular elements that basically reuse the same plugin. Each of those have a Select None button and their ng-click has the same function. I guess I'm stuck with using xpath. Thanks for your help regardless. – awaken Mar 11 '15 at 01:51
  • @awaken okay, but how these angular elements differ - could you show an example? – alecxe Mar 11 '15 at 01:54
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72716/discussion-between-awaken-and-alecxe). – awaken Mar 11 '15 at 01:55
  • @awaken could you remember if we solved this problem back in march? Thanks. – alecxe Jun 30 '15 at 16:53