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

355
votes

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

How can I find it with XPath?

7
htmlcssxmlxpath
Related stackoverflow.com/questions/8808921/… and stackoverflow.com/questions/1390568/… – Timo Huovinen
The more general related XPath,CSS, DOM and Selenium Solutions can be found in document XPath, CSS, DOM and Selenium: The Rosetta Stone. Specifically, your answer can be found in the item Id & Name. – Terence Xie

7 Answers

563
votes

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[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: 

//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): 

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

177
votes

Most easy way..

//div[@class="Test"]

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

40
votes

The ONLY right way to do it with 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~="Test"] and div.Test to get the same result.

Some libraries I've been able to find :

26
votes

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 ')]
3
votes

XPath has a contains-token function, specifically designed for this situation:

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

It's only supported in the latest version of XPath (3.1) so you'll need an up-to-date implementation.

0
votes

Match against one class that has whitespace.

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

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

Since XPath 2.0 there is a tokenize-function you can use:

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

Here it will tokenize on white-space and then compares the resulting strings with 'Test'.

It's an alternative of the XPath 3.1 function contains-token()

But at this moment (2021-04-30) no browser support XPath 2.0 or more.