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.

alecxe · Accepted Answer · 2015-03-11 01:31:40Z

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]')

edited Mar 11, 2015 at 1:31

answered Mar 11, 2015 at 1:26

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

awaken Over a year ago

I tried button text but it has that strange x character and all those spaces that makes it not work.

alecxe Over a year ago

@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.

awaken Over a year ago

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

alecxe Over a year ago

@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.

awaken Over a year ago

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.

|

Collectives™ on Stack Overflow

protractor cannot locate element with css on ng-click element

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related