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

How can I find an element by CSS class with XPath?

提问by Strawberry

In my webpage, there's a divwith a classnamed Test.

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

How can I find it with XPath?

我怎样才能找到它XPath？

回答by meder omuraliev

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:

或者，因为我们知道所寻求的元素是 a 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:

但由于这也将匹配class="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.

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

回答by Olli Puljula

Most easy way..

最简单的方法..

//div[@class="Test"]

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

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

回答by John Slegers

The ONLYright way to do it with XPath :

使用 XPath 做到这一点的唯一正确方法：

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

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

该函数normalize-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~="Test"]and div.Testto get the same result.

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

Some libraries I've been able to find :

我已经能够找到一些图书馆：

• For JavaScript: css2xpath& css-to-xpath
• For PHP: CssSelector Component
• For Python: cssselect
• For C#: css2xpath Reloaded
• For GO: css2xpath

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

回答by Alex Lyman

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

我只是提供这个作为答案，因为托马拉克很久以前就作为对梅德答案的评论提供的

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

回答by Carcigenicate

A 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.

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

回答by Philip

Match against oneclass that has whitespace.

匹配一个有空格的类。

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

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

回答by Sergei Zhilinski

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

你可以找到像这个例子这样的元素（所有 css 元素）

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