如何使用XPath通过CSS类查找元素？

在我的网页中，有div一个class名为的Test。

我如何找到它XPath？

该选择器应该可以工作，但是如果您用合适的标记替换它，效率会更高：

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

或者，由于我们知道所搜索的元素是div：

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

但是，由于这也将匹配诸如class="Testvalue"或的情况class="newTest"，因此注释中提供的@Tomalak版本更好：

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

如果您真的希望确定它可以正确匹配，则还可以使用normalize-space函数清除类名周围的杂散空格字符（如@Terry所述）：

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

请注意，在所有这些版本中，*最好用您实际上希望匹配的任何元素名称代替，除非您希望在文档中搜索给定条件的每个元素。

最简单的方法

//div[@class="Test"]

假设您要<div class="Test">按照描述查找。

使用XPath 的唯一正确方法是：

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

该函数将normalize-space去除前导和尾随空格，并且还将空格字符序列替换为一个空格。

注意

如果不需要许多这些Xpath查询，则可能需要使用一个将CSS选择器转换为XPath的库，因为CSS选择器通常比XPath查询更容易读写。例如，在这种情况下，您可以同时使用div[class~="Test"]和div.Test获得相同的结果。

我已经找到了一些库：

• 对于JavaScript：css2xpath和css至xpath
• 对于PHP：CssSelector组件
• 对于Python：cssselect
• 对于C＃：css2xpath重新加载
• 对于GO：css2xpath

我只是提供此为答案，因为Tomalak很久以前就作为对meder答案的评论

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

可以从以前的答案中得出有用的功能：

function matchClass($className) {
    return "[contains(concat(' ', normalize-space(@class), ' '), ' $className ')]";
}

然后只需将函数调用连接到查询中即可。

匹配具有空格的一类。

<div class="hello "></div>

//div[normalize-space(@class)="hello"]

您可以找到类似此示例的元素（所有CSS元素）

private By 
allElementsCss = By.xpath(".//div[@class]");