I am not able to click on element using any of the locators only javascript executor works for me in angular 2 pages

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

[wswebcreation]

Because by CSS means that you need to provide a . for classes and a # for ID’s. Now you are looking for the TAG ra-card-menu-button, you should use element(by.css('.ra-card-menu-button')).click();

Don’t then() here

[stemkar123]

@Shobysukumaran Actually we have 400+ tests in out framework & it is extremly difficult to go & change each & every script to update the click(). 😦 Is there anything that I should update apart from Script.