protractor testing angular 2 and click event

Question

I m building an angular 2 application and I need some informations concerning unit tests with protractor.

In fact, with angular 1, we were able to make some stuff like :

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

in our tests to validate the fact that we have an ng-click attribute on the current page.

I've tried the following with angular 2 :

element(by.css('[(click)="alert(\'test\')"]'))

But it doesn't seems to work.

Any body knows how can I test the fact that I have a clic event with angular 2 and protractor ?

EDIT : Here's the HTML I m using in my HomeComponent.html file :

<button (click)="alert('test')">Hello</button>

Thanks for your help

Community · Accepted Answer · 2017-05-23 12:17:36Z

1

You can locate all elements having (click) attribute and check the .count():

expect($$("[\(click\)]").count()).toBeGreaterThan(0);

where $$ is a shortcut to element.all(by.css()). [$click$] CSS selector would match all elements having (click) attribute. Note that you have to escape parenthesis since they have a special meaning in CSS selectors.

Another option would be to use .filter():

var elements = $$("*").filter(function (elm) {
    return elm.getAttribute("(click)").then(function (attributeValue) {
        return !!attributeValue;
    });
});
expect(elements.count()).toBeGreaterThan(0);

Or, use an XPath to match all elements having a (click) attribute:

var elements = element.all(by.xpath('//*[@*[name() = "(click)"]]'))
expect(elements.count()).toBeGreaterThan(0);

Another weird option would be to use the fresh by.js() locator:

var elements = element.all(by.js(function() {
    function getAllElementsWithAttribute(attribute)
    {
      var matchingElements = [];
      var allElements = document.getElementsByTagName('*');
      for (var i = 0, n = allElements.length; i < n; i++)
      {
        if (allElements[i].getAttribute(attribute) !== null)
        {
          // Element exists with attribute. Add to array.
          matchingElements.push(allElements[i]);
        }
      }
      return matchingElements;
    }
    return getAllElementsWithAttribute("(click)");
}));
expect(elements.count()).toBeGreaterThan(0);

getAllElementsWithAttribute() taken from here.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jun 15, 2016 at 14:24

alecxe

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

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

6 Comments

asdf_enel_hak Over a year ago

I think OP is asking for angular2

mfrachet Over a year ago

I confirm that I talk about angular 2

alecxe Over a year ago

Gotcha, let me improve the answer.

alecxe Over a year ago

@Skahrz updated the answer, could you test if it works for you? Thanks.

mfrachet Over a year ago

@alecxe actually not working, but the intention was great :)

|

Florent B. · Accepted Answer · 2016-06-16 04:27:13Z

1

Escape the parenthesis with a double backslash:

element(by.css('[\\(click\\)="alert(\'test\')"]')).click();

answered Jun 16, 2016 at 4:27

Florent B.

42.7k7 gold badges92 silver badges105 bronze badges

4 Comments

mfrachet Over a year ago

If I try expect(item.isPresent()).toBe(true); with your solution, I get a false. It seems to not be working :-/. Thanks for your help

Florent B. Over a year ago

I tested it with Chrome and Firefox with this example and the element is present. It could be another issue. Can you provide the exact HTML of the targeted element? Do you get a result in the console of the browser?

mfrachet Over a year ago

Nothing in the console, but the following test result : 1) Home page Button add board should have a validation button Message: Expected false to be true.

Florent B. Over a year ago

It could be a timing issue. Try the button in a static page and you'll see that the locator returns an element.

Collectives™ on Stack Overflow

protractor testing angular 2 and click event

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related