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?

Answer 1

Just tested this and it works:

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

Answer 2

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.

Answer 3

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

Answer 4

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