Protractor tests failing in second run for ng-reflect attribute

Question

I have a bunch of Protractor tests for for e2e of a web application. There are a lot of input boxes , and a majority of them have ng-reflect-name attribute generated due to the underlying Angular4 code. Here is an example HTML snippet

  <input _ngcontent-c6="" class="input ng-untouched ng-pristine ng-invalid ui-inputtext 
  ui-corner-all ui-state-default ui-widget" formcontrolname="email" pinputtext="" 
  placeholder="Enter Email Address" spellcheck="false" type="text" ng-reflect-name="email">

My issue is regarding the use of locator in this. If I use this code for this specific input box -

 element(by.css('[formcontrolname='email']'))

and perform any sendKeys()operation, it works out completely fine.

However, if I use this locator

 element(by.css('[ng-reflect-name="email"]'))

my tests run for the successfully for the first time, but errors out giving a NoSuchElementException for the subsequent runs. I have searched on SO and the Angular docs, but I can't seem to explain why this happens. If anyone has faced this issue before, can you explain what is happening here?

Answer 1

Since ng-reflect-* are there for debugging purposes, I would not rely locators on them.

I suspect the function that adds ng-reflect-* attributes does not necessarily perform before Angular confirms "readiness" to Protractor (every Protractor "command" goes through a sync with Angular). In other words, at the time you search for your input, ng-reflect-name is not yet set on the element.

If you are still going to continue using ng-reflect-* attributes, try adding an Explicit Wait to wait for the element to become present:

var EC = protractor.ExpectedConditions;
var emailInput = element(by.css('[ng-reflect-name=email]'));
browser.wait(EC.presenceOf(emailInput), 5000);

emailInput.sendKeys("test@test.com")