量角器如何使用反应式表单验证下拉选定值

Question

如何使用响应式表单验证下拉列表的 selected 值，当下拉列表中有任何值 selected 时，我在 HTML 页面上看不到任何特定属性：

<span class="content">
  <select formcontrolname="template" id="template" required="" ng-reflect-required="" ng-reflect-name="template" class="ng-pristine ng-valid ng-touched">
<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
    <option value="81ef59b7-fadb-4bfa-b521-e88819469988" ng-reflect-value="81ef59b7-fadb-4bfa-b521-e88819" class="ng-star-inserted">
 test 
    </option>
    <option value="logo_Header" ng-reflect-value="logo_Header" class="ng-star-inserted">
 Logo Header 
    </option>
  </select>
  <a class="manage-reports" tabindex="0">
    <i class="icon edit-icon icon-sm">
    </i>manage 
  </a>
</span>

我想验证如果我 select

<option value="81ef59b7-fadb-4bfa-b521-e88819469988" ng-reflect-value="81ef59b7-fadb-4bfa-b521-e88819" class="ng-star-inserted"> test </option>

selected value/text 的下拉菜单应该是 "test"

Answer 1

您可以尝试选择该选项，然后在 <select> 元素上执行 getText()

expect(select.getText()).toEqual('Test');

Answer 2

我不熟悉 Reactive Forms，但类似这样的逻辑对我来说仍然是一样的——只要打开开发工具并探索当你 select 一个选项时会发生什么变化。

有时属性变化如 value="selected_value"，您需要 .getAttribute("value") 元素然后断言它

有时，select 包装的文本会发生变化，您需要 .getText()

量角器如何使用反应式表单验证下拉选定值

Protractor how to validate Drop Down Selected Value with Reactive Forms

protractor