Search code examples
jqueryangularjselementprotractorangularjs-e2e

AngularJS E2E : Find element by tag name

According to this link : https://docs.angularjs.org/api/ng/function/angular.element, the method "find()" allows to find an HTML element by tag name.

I tried this in my code :

element.find('button').click();

And my HTML code is :

<button ng-click="getMessage()">Request service as {{name}}</button>

But the button is never clicked. I don't want to use classes, ids, or weird selectors. I think I'm just missing something but I'm unable to find exchaustive docuementation (about "finders").

Thank you for your help,

Solution

  • You are confusing AngularJS's angular.element class with Protractor's global function element of the same name.

    Protractor creates a few global functions such as browser, element, by and protractor.

    element is a function and not an object. As such, they have no property methods like find(..). The element function takes a selector object as an argument. To create a selector object you have to use the global by object. This object contains a number of handy selector functions such as id, model, binding, etc.. etc..

    If you want to use jQuery/CSS selector syntax. You can use the by.css() function.

    Example;

     element(by.css('button')).click();

    This will find the first button tag and click it. Use element.all(...) to find all of them.

    You can also narrow this to only buttons that bind the scope variable name

     element(by.css('button')).element(by.binding('name')).click()

    More on locators:

    https://github.com/angular/protractor/blob/master/docs/locators.md