I am not able to identify elements using protracto

Here is my html for angular 2 applications. I am executing my tests in chrome

<md-card-title _ngcontent-c10="" class="ra-card-title mat-card-title">
  <a _ngcontent-c10="">Massachusetts Division of Banks Issues Decision Establishing Limit on Maximum Allowable Fee for Dishonored Checks for State - Chartered Financial Institutions</a>
</md-card-title>
<div _ngcontent-c10="" class="ra-card-header__footer">
  <md-card-subtitle _ngcontent-c10="" class="ra-card-code mat-card-subtitle">BLN3594</md-card-subtitle>

  <div _ngcontent-c10="" class="ra-card-menu">
    <span _ngcontent-c10="" aria-haspopup="true" class="ra-card-menu-button">...</span>
    <md-menu _ngcontent-c10="" role="menu" xposition="before" yposition="below">
      <!---->
    </md-menu>
  </div>
</div>

<md-card-subtitle _ngcontent-c10="" class="ra-card-code mat-card-subtitle">BLN3594</md-card-subtitle>

I am not able to click on the menu button using

element(by.xpath("//span[@class='ra-card-menu-button'])[0]")).click();

But if I use below javascript executor , it is working fine.

var scrpt = "return document.getElementsByClassName('ra-card-menu-button')[0].click();";
browser.executeScript(scrpt).then(function(text) {
  logger.log('info', 'Script is: ' + scrpt);

});

protractor version is 5.1.1.

Could anyone please help me to identify the issue

回答1:

I think it should be like this (without extra right parenthesis, and the number points to the first element):

element(by.xpath("//span[@class='ra-card-menu-button'][1]")).click();

回答2:

What should work is this element(by.css('.ra-card-menu-button')).click();

Mind the . to identify the class. You can even use the shorthand notation of protractor, that would make the code look like this $(.ra-card-menu-button').click();, see also this and this

回答3:

I was able to solve this issue using the webdriver command

Yet to identify why my page says it is not angular page though it is deveoped in angular 2