如何通过带有XPath的CSS类找到元素？

Question

在我的网页中,有div一个class名为Test.

我怎么能找到它XPath？

Answer 1

此选择器应该可以工作,但如果用适当的标记替换它会更有效:

//*[contains(@class, 'Test')]

或者,因为我们知道所寻找的元素是div:

//div[contains(@class, 'Test')]

但是,因为这也将匹配情况下,像class="Testvalue"或class="newTest"@中发表了托默勒格的版本是更好的:

//div[contains(concat(' ', @class, ' '), ' Test ')]

如果您希望确定它将正确匹配,您还可以使用normalize-space函数清除类名周围的杂散空格字符(如@Terry所述):

//div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')]

请注意,在所有这些版本中,*最好应替换为您实际希望匹配的任何元素名称,除非您希望搜索文档中的每个元素以获取给定条件.

@meder:更像是`// div [contains(concat('',@ class,''),'Test')]` - 你的也会出现部分匹配. (35认同)
因为类可以包含多个值 (9认同)
我很惊讶xpath没有一种快捷方式/更有效的方法来在空格分隔的令牌列表中定位令牌.在xpath的更高版本中有什么？ (7认同)
你为什么不这样做// div [@ class ='Test'] (5认同)
@meder所以为什么不更新你的答案是正确的？ (3认同)

Answer 2

最轻松的方式..

//div[@class="Test"]

假设你想<div class="Test">按照描述找到.

@JugalThakkar不,它没有.它需要完全匹配才能工作,但您可以尝试// div [contains(@class,"Test")]. (10认同)
它是否匹配`<div class ="测试其他类">？ (7认同)
这个答案可能会受益于进一步的澄清，因为它并没有真正回答OP的问题。OP 说“一个带有名为 Test 的类的 div”，但在任何时候都没有建议“Test”是 div 中的 _only_ 类，这就是这个答案所假设的。这个答案的简单性很吸引人，这可能会引诱读者陷入麻烦。 (6认同)
上面的语法更容易使用,并且不易出错.请记住,您需要在课堂上进行双重报价才能进行搜索.我建议使用上面列出的.// DIV [@类= "测试"] (2认同)

Answer 3

我只是提供这个作为答案,正如Tomalak在很久以前作为对meder的回答的评论

//div[contains(concat(' ', @class, ' '), ' Test ')]

Answer 4

使用XPath进行此操作的唯一正确方法:

//div[contains(concat(" ", normalize-space(@class), " "), " Test ")]

该函数normalize-space剥离前导和尾随空格,并且还用单个空格替换空白字符序列.

如果不需要许多这些Xpath查询,您可能希望使用将CSS选择器转换为XPath的库,因为CSS选择器通常比XPath查询更容易读取和写入.例如,在这种情况下,您可以使用两者div[class~="foo"]并div.foo获得相同的结果.

我能找到的一些图书馆:

Answer 5

XPath 有一个contains-token函数，专门针对这种情况而设计：

//div[contains-token(@class, 'Test')]

它仅在最新版本的 XPath (3.1) 中受支持，因此您需要最新的实现。

Answer 6

从 XPath 2.0 开始，您可以使用 tokenize 函数：

//div[tokenize(@class,'\s+')='Test']

在这里，它将对空白进行标记，然后将结果字符串与“Test”进行比较。

它是 XPath 3.1 函数 contains-token() 的替代方案

但目前（2021-04-30）没有浏览器支持 XPath 2.0 或更高版本。