angular - Protractor .sendKeys() 不适用于 ngModel 的输入

Question

我找不到关于这个主题的任何内容，所以我想问一下。

我目前正在为我的 Angular 5 应用程序编写 E2E 测试。E2E 由 Protractor 执行，正如在默认的 Angular CLI 生成器项目中配置的那样。我需要能够在我的 E2E 测试中更改文本输入字段的值。

我当前的代码。

...
it('should submit report.',() => {
    page.setField("100");
...

上面引用了这个类和方法

import { browser, by, element } from 'protractor';

export class Page {

setField(text: string): Page {
    let field = element(by.id('myField'));
    field.sendKeys(text);
    return this;
}    
...

和我的 html。

<input id="myField" decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField" class="form-control input-sm">

非常简单。显然，我已经将其概括为消费……但希望它仍然能说明问题。

注意事项:

• 如果我从 html 输入字段中删除以下内容，.sendKeys() 会起作用

  decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField"
  

• 如果我只是删除

  decimal="16" dataLoadedEvent="{{formatData}}" 
  

  sendKeys() 仍然不起作用。这意味着问题出在字段上的 [(ngModel)] 绑定(bind)上。不适用于我的自定义十进制格式指令。

所以，我的问题是，我需要做什么才能使 .sendKeys() 与使用 [(ngModel)] 绑定(bind)的字段一起工作？

如有任何帮助，我们将不胜感激。

Answer 1

我通过执行以下操作解决了这个问题:

field.clear().then(() => {
    field.sendKeys(text);
});

我在谷歌搜索时看到了这个解决方案，但我害怕在 E2E 测试中引入额外的异步进程(因为 Protractor 通常对此 react 不佳)。但是，一旦我执行了上述操作，我的字段就开始更新了。

希望这对某人有所帮助。