CODEWITHSUNDEEP
htmlcssxmlxpath
Strawberry
Strawberry

Reputation: 67968

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

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

How can I find it with XPath?

Upvotes: 459

Views: 604100

Answers (8)

John Slegers
John Slegers

Reputation: 47111

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 you 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 the selector div.Test to get the exact same result.

Some libraries I've been able to find :

Upvotes: 70

user31782
user31782

Reputation: 7587

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

This is what I am using in my current project and it works smooth as.

The dot . in the expression represents the value of class attribute of any div element. So you don't need to use normalize-space and concat. Note this might also select divs with classnames XXXTestXXX. I happen to have my searchable class as infobox-header and the page doesn't have anything like XXinfobox-headerXXXX.

Upvotes: 4

Siebe Jongebloed
Siebe Jongebloed

Reputation: 4870

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.

Upvotes: 5

Bennett McElwee
Bennett McElwee

Reputation: 25810

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.

Upvotes: 12

Philip
Philip

Reputation: 7166

Match against one class that has whitespace.

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

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

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186742

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.

Upvotes: 700

Olli Puljula
Olli Puljula

Reputation: 2549

Most easy way..

//div[@class="Test"]

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

Upvotes: 226

Alex Lyman
Alex Lyman

Reputation: 15975

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

Upvotes: 27

Related Questions