angular - formControlName 的 Protractor 定位器

Question

我正在使用基于模型的表单，我的表单如下所示:

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

我想写一个 Protractor 规范来测试登录。我喜欢在我的规范中做类似下面的事情:

    element(by.formControlName('username')).sendKeys('test@example.com');

这显然行不通，那么有没有一种方法可以通过表单控件进行定位，或者我是否不得不接受必须在输入字段上放置类或 ID 的事实？

Answer 1

您可以编写一个相当简单的 CSS 选择器:

element(by.css("input[formControlName=username]")).sendKeys('test@example.com');

---

请注意，如果您需要经常这样做，您总是可以定义一个可重用的 custom locator :

by.addLocator('formControlName', function(value, opt_parentElement, opt_rootSelector) {
  var using = opt_parentElement || document;

  return using.querySelectorAll('[formControlName="' + value +'"]');
});

用法:

element(by.formControlName('username')).sendKeys('test@example.com');