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

Posted 2021-04-11

我为Web应用程序的e2e进行了一系列的Protractor测试。有很多输入框，其中大部分都有由于底层Angular4代码而生成的ng-reflect-name属性。这是一个示例html片段

  <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()operation，它完全没问题。

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

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

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

答案

由于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("[e-mail]")