AngularJS Protractor - Finding an Element on a Page Using Ng-Click Binding

Question

I have a button on a page that looks like:

<button ng-click="myFunction()" ng-show="flag">
    Submit
</button>

The element has no ID.

Is there a way to find this element using the function bound to Ng-Click? Or do I have to assign an ID to this element to locate it using Jasmine / Protractor?

Ted Warner · Accepted Answer · 2014-09-03 15:13:59Z

71

Just tested this and it works:

element(by.css('[ng-click="myFunction()"]'))

answered Sep 3, 2014 at 15:13

Ted Warner

7111 gold badge4 silver badges3 bronze badges

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

8 Comments

mojjj Over a year ago

confirm this. escape quotes (\") might be necessary.

matewka Over a year ago

IMHO, I think Lloyd Banks anwser is better. E2E tests are meant to test UI. They should rely on things visible to user, like button label "Submit", not the logic hidden in HTML attributes.

Jens Over a year ago

@matewka I would disagree, making it rely on text in the UI will be very fragile... And weather the user sees Submit, SUBMIT should not matter, and a simple uppercase can then break all your tests in a single go... Not to mention localisation... Ofc. on the flipside we need to ensure ng-click="submit()" isn't bound to our Cancel button...

Jake Brewer Over a year ago

I find the click then test that it has the text I expect to be displayed to the user. That way I fewer fragile UI-text based tests and get the back-end wiring validated.

Erik Over a year ago

If the function has parameters in the code, does my protractor test need to include those as well?

|

Lloyd Banks · Accepted Answer · 2014-07-17 16:44:10Z

33

I went through the Protractor API and didn't find anything related to finding an element through ng-click. I did find

element(by.buttonText("Submit"));

Not quite the same, but does the job in my environment.

answered Jul 17, 2014 at 16:44

Lloyd Banks

36.9k58 gold badges172 silver badges264 bronze badges

4 Comments

Tom Spencer Over a year ago

Although this works, it's worth noting that this isn't recommended by the protractor style guide. I think I would assign an ID to it so that it can be found easily.

Ethan Chen Over a year ago

It won't work if your button is a div or any non-button-type button.

Lloyd Banks Over a year ago

@YuxuanChen Who said anything about a <div> or any other non <button> element? I like your enthusiasm for StackOverflow though. Keep up the hard work.

jgritten Over a year ago

Exactly what I needed. I had a list of dynamic buttons being generated from a DB and my case required clicking a button by specific text as the text in question was not unique. i.e. [Admin] button vs [Administrator]. Finding a button by 'Admin' was troublesome. thank you

alecxe · Accepted Answer · 2015-01-04 06:46:41Z

1

If you want to use ng-show, you could try this:

element(by.Css("button[ng-show]")); // Get element with tag < button > and has ng-show attribute

or:

element(by.Css("button[ng-show*=flag]")); // Get element with tag < button > and has ng-show attribute which contains word flag

edited Jan 4, 2015 at 6:46

alecxe

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

answered Jul 22, 2014 at 4:23

Nguyen Vu Hoang

1,58014 silver badges19 bronze badges

Comments

redOctober13 · Accepted Answer · 2018-01-25 16:16:44Z

0

Rather than adding an ID, which I don't like to do just to provide a test hook, I would add type="submit" to the button and then you can search By.css('[type="submit"]')

answered Jan 25, 2018 at 16:16

redOctober13

4,0667 gold badges41 silver badges68 bronze badges

Collectives™ on Stack Overflow

AngularJS Protractor - Finding an Element on a Page Using Ng-Click Binding

4 Answers 4

8 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related