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

【问题标题】：What the easiest way to find element with many parameters?查找具有许多参数的元素的最简单方法是什么？
【发布时间】：2015-07-14 21:55:44
【问题描述】：

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

<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() 或类似的东西？

我的目标是最大限度地避免阅读标记、标签名称等。

【问题讨论】：

标签： angularjs xpath css-selectors protractor

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

【讨论】：

tl;dr 除了 @ 和它们的链接方式之外，它与 XPath 属性谓词并没有什么不同。