量角器 .sendKeys() 不适用于 ngModel 的输入

Question

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

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

我当前的代码。

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

上面引用了这个class和方法

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)] 绑定上。不适用于我的自定义十进制格式指令。

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

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

Answer 1

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

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

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

希望这对某人有所帮助。

Answer 2

我也遇到了同样的问题。我解决如下。

element(by.css('[name="firstName"]')).sendKeys('Protector User');

量角器 .sendKeys() 不适用于 ngModel 的输入

Protractor .sendKeys() not working on inputs with ngModel

protractor

e2e-testing

angular

two-way-binding

angular5