量角器 - 使用 CSS 选择器查找元素答案

【问题标题】：Protractor - Find an element with css selector量角器 - 使用 CSS 选择器查找元素
【发布时间】：2016-03-04 08:08:02
【问题描述】：

我正在一个角度页面上运行量角器 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 选择器应该只返回一个选项元素，因为只能选择一个。但是由于有两个具有 selected 属性 - protractor 给了我以下警告：

警告 - 为定位器找到多个元素 By.cssSelector("select[ng-model='model'] option[selected='selected']") - 将使用第一个结果

第一个结果是实际没有选中的空选项。

设置运行测试：

角度：1.4.4
咕噜声：0.4.5
量角器：2.5.1
grunt-protractor-runner: 2.1.0

【问题讨论】：

我从未使用过量角器，但 CSS 将返回的不仅仅是元素，因为正如您自己所指出的，有两个元素与之匹配。您可能必须检查错误的代码部分（？）使用selected='selected' 更新两个元素。我很确定这不是因为 CSS。
如果您单击select 元素然后在测试中获得选定的选项会怎样？
选择该选项的代码在哪里？我会假设那里发生了一些奇怪的事情，最终选择了两个选项。
也许这可以给你一个线索为什么会发生这种情况：stackoverflow.com/questions/23643712/…
我会检查空/默认绑定@alecxe。但问题似乎在量角器内，因为没有它我无法重现它。

标签： html css angularjs css-selectors protractor

【解决方案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 abstraction

【讨论】：

问题是如果选择了空选项，附加属性检查[value^=number]将不起作用。目前我正在解决以下元素选择的问题：element.all(by.css("select[ng-model='model'] option[selected='selected']")).last() 但我想这是有原因的？？
感谢您提供有关包装器的信息链接！
@DominikMohr 好的，更新了答案，我们还可以检查不等于 object:null 的值 - 已更新。这是为了解决症状，我理解。谢谢。