量角器测试在第二次运行中失败 ng-reflect 属性

Question

我有一堆针对 Web 应用程序的 e2e 的量角器测试。有很多输入框，其中大部分都有ng-reflect-name属性，这是由于底层Angular4代码生成的。这是一个示例 HTML sn-p

  <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">

我的问题是关于在此使用定位器。如果我将此代码用于此特定输入框 -

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

并执行任何sendKeys()操作，它完全可以正常工作。

但是，如果我使用这个定位器

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

我的测试第一次成功运行，但在后续运行中给出NoSuchElementException 时出错。我已经搜索了 SO 和 Angular 文档，但我似乎无法解释为什么会发生这种情况。如果有人以前遇到过这个问题，你能解释一下这里发生了什么吗？

Answer 1

既然有ng-reflect-* 有for debugging purposes，我不会依赖它们的定位器。

我怀疑the function that adds ng-reflect-* attributes 不一定会在 Angular 确认 Protractor 的“准备就绪”之前执行（每个 Protractor“命令”都会与 Angular 同步）。换句话说，在您搜索输入时，ng-reflect-name 尚未在元素上设置。

如果您仍要继续使用ng-reflect-* 属性，请尝试添加Explicit Wait 以等待元素出现：

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

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