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

In my webpage, there's a div with a class named Test.

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

How can I find it with XPath?

如何使用XPath找到它?

6 个解决方案

#1

This selector should work but will be more efficient if you replace it with your suited markup:

这个选择器应该可以工作，但是如果您用合适的标记替换它，将会更有效:

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

Or, since we know the sought element is a div:

或者，因为我们知道搜索元素是div:

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

But since this will also match cases like class="Testvalue" or class="newTest", @Tomalak's version provided in the comments is better:

但由于这也将匹配类="Testvalue"或class="newTest"的情况，所以在注释中提供的@Tomalak版本更好:

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

If you wished to be really certain that it will match correctly, you could also use the normalize-space function to clean up stray whitespace characters around the class name (as mentioned by @Terry):

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

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

Note that in all these versions, the * should best be replaced by whatever element name you actually wish to match, unless you wish to search each and every element in the document for the given condition.

注意，在所有这些版本中，*应该被您实际希望匹配的任何元素名称所取代，除非您希望针对给定的条件搜索文档中的每个元素。

#2

Most easy way..

最简单的方法。

//div[@class="Test"]

Assuming you want to find <div class="Test"> as described.

假设您希望找到

，如前所述。

#3

I'm just providing this as an answer, as Tomalak provided as a comment to meder's answer a long time ago

我只是提供这个作为一个答案，就像托马拉克很久以前对meder的回答所做的评论一样

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

#4

The ONLY right way to do it with XPath :

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

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

The function normalize-space strips leading and trailing whitespace, and also replaces sequences of whitespace characters by a single space.

函数规范了空格带的前导和后导空格，并将空格字符序列替换为单个空格。

---

Note

If not need many of these Xpath queries, you might want to use a library that converts CSS selectors to XPath, as CSS selectors are usually a lot easier to both read and write than XPath queries. For example, in this case, you could use both div[class~="foo"] and div.foo to get the same result.

如果不需要这些Xpath查询中的许多查询，您可能希望使用将CSS选择器转换为Xpath的库，因为CSS选择器通常比Xpath查询更容易读和写。例如，在本例中，您可以使用div[class~="foo"]和div.foo来获得相同的结果。

Some libraries I've been able to find :

我能找到的一些图书馆:

• For JavaScript : css2xpath & css-to-xpath
• 对于JavaScript: css2xpath和cssto -xpath
• For PHP : CssSelector Component
• 对于PHP: CssSelector组件
• For Python : cssselect
• Python:cssselect
• For C# : css2xpath Reloaded
• 对于c#: css2xpath重载。
• For GO : css2xpath
• 去:css2xpath

#5

An helpful function can be made out of previous answers:

一个有用的功能可以从以前的答案中得到:

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

Then just concat the function call into your query.

然后将函数调用转换为查询。

#6

you can find elements like this example (all css elements)

您可以找到如下示例(所有css元素)

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