Failed: element not visible (Protractor AngularJS)

Question

Apparently Protractor cannot find this element in a menu on my application, elements above are ok. My code is:

this.openMenu("toogleMenuButton")
let prodLink = element(by.id("menu12"));

if (prodLink.isPresent()) {
  prodLink.click();
  browser.sleep(500);
} else {
  return false;
}

The HTML code is:

<a _ngcontent-c13="" 
   appaccordiontoggle="" 
   class="relative mat-ripple" 
   md-ripple="" 
   routerlinkactive="open" 
   style="margin-left: 47px" 
   ng-reflect-class-base="relative" 
   ng-reflect-router-link-active="open" 
   id="menu12">
   <span _ngcontent-c13="">Produtos</span>
</a>

Could someone help me please?

Answer 1

You need code to wait element to be visible (present in DOM and also visible - have height and width greater that 0). I put wait of 30s:

var EC = protractor.ExpectedConditions;
var prodlink = element(by.id('menu12'));
browser.wait(EC.visibilityOf(element(by.id('menu12'))), 30000, "prod link element is not visible").then(function() {
   prodlink.click();
}

Answer 2

Analysis:
Your code has wrong at

if (prodLink.isPresent())

As we know all Protractor APIs are Async and return promise. When Javascript Enginee executing this line, Javascript get a promise object not a boolean value, Actually this IF statement will always true, because promise object not null, and it's very possible protractor have not to detect the link present from page, because all communication with page are Async.

Solution:
The correct code as below:

this.openMenu("toogleMenuButton")
let prodLink = element(by.id("menu12"));

prodLink.isPresent().then(function(present){
  if(present) {
     prodLink.click();
     return true;
  }
  return false;
});

My code just to point out your mistake, the correct way in coding to click the link should be as 'Sanja Paskova' way.