查找具有许多参数的元素的最简单方法是什么？

Question

我正在尝试找到所有可以帮助我找到具有多个属性的元素的方法。例如我有这样的观点：

<span class="n-check ng-isolate-scope ng-pristine ng-valid" ng-model="my_model" my_sp_at="1" my_attribute="my_attribute_value" tabindex="0">...</span>

我想找到属性为 "my_sp_at" 和 "my_attribute" 的元素。而且我不确定找到它的最简单方法是否是使用 by.xPath().

element(by.xpath("//span[@my_sp_at='1' and @my_attribute='my_attribute_value']

我想知道我是否可以使用带有许多参数的 by.css() 或类似的东西？

我的目标是尽量避免读取标记、标签名称等。

Answer 1

您可以使用所谓的 Attribute selectors 来查找使用 by.css() 的元素。因此将其应用于您的要求，结果如下：

var el = element(by.css('span[my_sp_at="1"][my_attribute="my_attribute_value"]'));

或使用 element(by.css()) 的快捷方式 - $:

var el = $('span[my_sp_at="1"][my_attribute="my_attribute_value"]');

它允许使用与 jQuery 或 document.querySelector[All] 完全相同的语法。基本上一个属性选择器应该被包裹在方括号中，如果你想使用多个属性选择器来定位同一个元素，那么你应该把它们一个接一个地放在一起，不要有空格：

div.some-class[name="phone"][title="Phone number"]
 ^      ^           ^                  ^
tag   class   attr selector #1    attr selector #2

对于您 HTML 中的标签：

<div class="some-class" name="phone" title="Phone number"></div>

查找具有许多参数的元素的最简单方法是什么？

What the easiest way to find element with many parameters?

xpath

css-selectors

angularjs

protractor