量角器 - 使用css选择器查​​找元素

Question

我在一个有角度的页面上运行量角器e2e测试，我不想检查一些下拉框中的选定选项。我从angular：

生成了以下html代码

<select class="ng-pristine ng-valid ng-touched" id="idxyz" ng-model="model" ng-options="xxx">
    <option selected="selected" value="object:null"></option>
    <option label="Steuerung 1" value="number:1">Steuerung 1</option>
    <option selected="selected" label="Programme" value="number:2">Programme</option>
    <option label="Steuerung 2" value="number:3">Steuerung 2</option>
</select>

这是我用来获取所选选项的量角器代码。

expect(element(by.css("select[ng-model='model'] option[selected='selected']")).getAttribute("value")).toBe("Programme");

您可能已经注意到 - selected='selected'有两个选项。

仅在使用量角器运行测试时才会出现这种情况。手动执行相同操作时，只有真正选择的选项具有属性selected='selected'。

任何人都能解释为什么会这样吗？ css选择器应该只返回一个选项元素，因为只能选择一个。但是因为有两个选定的属性 - 量角器给了我以下警告：

  

警告 - 找到定位器By.cssSelector的多个元素（＆＃34;选择[ng-model =＆＃39; model＆＃39;]选项[selected =＆＃39; selected＆＃39;]＆＃ 34;） - 将使用第一个结果

第一个结果是空选项，实际上没有被选中。

运行测试的设置：

• angular：1.4.4
• grunt：0.4.5
• 量角器：2.5.1
• grunt-protractor-runner：2.1.0

Answer 1

要解决此问题，我另外检查value以number开头：

select[ng-model=model] option[selected=selected][value^=number]

或者，我们可能会检查value不等于object:null：

select[ng-model=model] option:not([value="object:null"])[selected=selected]

请注意，为了更轻松地处理select-option，请考虑使用自定义包装器，请参阅：

• Select -> option abstraction