2

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?

CodeWarrior
  • 2,721
  • 3
  • 18
  • 18
demouser123
  • 4,108
  • 9
  • 50
  • 82

1 Answers1

4

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")
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • Hmm. the debugging point that you made is new to me, so I'll keep that in mind. I'm not sure about the wait part, because I have used explicit wait to wait for almost 20 seconds and it fails even though. Also other locators that I have used using `ng-reflect-* don't have this issue. – demouser123 Jun 10 '17 at 05:50
  • @demouser123 hm, thanks, than my hypothesis is not correct..it was so beautiful though :)..are you sure the element is actually there? Recheck if you are on the page you think you are.. – alecxe Jun 10 '17 at 21:09
  • Yeah. I'm pretty sure that I'm on the page that I would want it to be. – demouser123 Jun 13 '17 at 17:07
  • this should be the accepted answer. Thanks – VnC Jan 27 '22 at 12:19