量角器 .sendKeys() 无法使用 ngModel 处理输入

Posted 2023-03-13

【中文标题】量角器 .sendKeys() 无法使用 ngModel 处理输入

【英文标题】：Protractor .sendKeys() not working on inputs with ngModel

【发布时间】：2018-12-04 09:28:45

【问题描述】：

我找不到关于这个主题的任何东西，所以我想我会问。

我目前正在我的 Angular 5 应用程序上编写 E2E 测试。Protractor 正在按照默认 Angular CLI 生成器项目中的配置执行 E2E。我需要能够在我的 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)] 绑定。不是我的自定义十进制格式指令。

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

任何帮助将不胜感激。

【参考方案1】：

我能够通过执行以下操作来解决此问题：

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

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

希望这对某人有所帮助。

【参考方案2】：

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

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