How can I match on an attribute that contains a certain string?

Question

I am having a problem selecting nodes by attribute when the attributes contains more than one word. For example:

<div class="atag btag" />

This is my xpath expression:

//*[@class='atag']

The expression works with

<div class="atag" />

but not for the previous example. How can I select the <div>?

Lanam

It's worth pointing out, I think, that "atag btag" is a single attribute, not two. You're trying to do substring matching in xpath. – Neumark

Yes you're right - thats what I want. – Lanam

Related: #8809421 and #1604971 – Ecbatana

This is why you should use a CSS selector... div.atag or div.btag. Super simple, not string matching, and WAY faster (and better supported in browsers). XPath (against HTML) should be relegated to what it's useful for... finding elements by contained text and for DOM navigation. – Watchband

Answer 1

Here's an example that finds div elements whose className contains atag:

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

Here's an example that finds div elements whose className contains atag and btag:

//div[contains(@class, 'atag') and contains(@class ,'btag')]

However, it will also find partial matches like class="catag bobtag".

If you don't want partial matches, see bobince's answer below.

Trapezoid

@Redbeard: It's a literal answer but not usually what a class-matching solution should aim for. In particular it would match <div class="Patagonia Halbtagsarbeit">, which contains the target strings but is not a div with the given classes. – Postrider

This will work for simple scenarios - but watch out if you want to use this answer in wider contexts with less or no control over the attribute values you are checking for. The correct answer is bobince's. – Neveda

Sorry, this does not match a class, it matches a substring – Ecbatana

it's plainly wrong as it finds also: <div class="annatag bobtag"> which it should not. – Aerify

The question was "contains a certain string" not "matches a certain class" – Scut

Answer 2

mjv's answer is a good start but will fail if atag is not the first classname listed.

The usual approach is the rather unwieldy:

//*[contains(concat(' ', @class, ' '), ' atag ')]

this works as long as classes are separated by spaces only, and not other forms of whitespace. This is almost always the case. If it might not be, you have to make it more unwieldy still:

//*[contains(concat(' ', normalize-space(@class), ' '), ' atag ')]

(Selecting by classname-like space-separated strings is such a common case it's surprising there isn't a specific XPath function for it, like CSS3's '[class~="atag"]'.)

Postrider

bah, xpath needs some fixes – Demography

The answer by surupa123 below is much better, used contains() just with the class you're interested in, no need for concats as far as I can see. – Flag

Couldn't tokenize, exists, and index-of be combined to solve this in a rather ugly yet very concise way? – Quickie

@Flag supra123's answer is problematic if there is a css class like "atagnumbertwo" that you don't want to select, though I'll admit this may not be likely (: – Victoriavictorian

@crazyrails: Could you please accept this answer as the correct answer? That will help future searchers identify the correct solution to the problem described by your question. Thank you! – Neveda

didn't try it yet. But wouldn't concat just append spaces on both sides of class attribute like 'atag btag' would become ' atag btag ' or would it just append space before and after each class like ' atag btag ' – Dice

Is this still the best way to select an element with multiple classes, or have improvements been made? – Vitriolic

@cha0site: Yes they could, in XPath 2.0 and following. This answer was written before XPath 2.0 became official. See https://mcmap.net/q/79807/-how-can-i-match-on-an-attribute-that-contains-a-certain-string or https://mcmap.net/q/79807/-how-can-i-match-on-an-attribute-that-contains-a-certain-string – Polychrome

I want to select an element if it has all the classes in a "list", i.e. should have both atag and btag only. How do I do this ? – Leonor

@testerjoe2: with an and operator? eg for the XPath 1 version, [contains(..., ' atag ') and contains(..., ' btag ')] – Postrider

Don't be like me and remove the spaces around the class you're looking for in this example; they're actually important. Otherwise it may look to work but defeats the purpose. – Jungly

The comments here saying that XPath "needs an improvement" for this don't really understand what XPath is. It's supposed to be able to operate on any XML. It doesn't know what HTML even is, so it doesn't know that HTML has a special attribute that's named class that contains a space-separated list of values that mean something special to HTML. Some other format might put, say, comma-separated values in a blub attribute that controls the blub setting in that language and XPath wouldn't know about that, either, because it's a generic XML query language. – Mallette

Answer 3

try this: //*[contains(@class, 'atag')]

Schock

What if the class name is grabatagonabag? (Hint: it'll still match.) – Mallette

Answer 4

EDIT: see bobince's solution which uses contains rather than start-with, along with a trick to ensure the comparison is done at the level of a complete token (lest the 'atag' pattern be found as part of another 'tag').

"atag btag" is an odd value for the class attribute, but never the less, try:

//*[starts-with(@class,"atag")]

Flocculant

you can use this if your XPath engine supports the starts-with command, for example JVM 6 doesn't support it as far as i remember – Dropper

@mjv: It's common for a CSS class attribute to specify multiple values. That's how CSS is done. – Neumark

@Flocculant You cannot guarantee that that name will appear at the start of the class attribute. – Blinker

@thuktun @skaffman. Thanks, great comments. I 'redirected' to bobince solution accordingly. – Flocculant

Doesn't work for <div class="btag atag"> which is equivalent of above – Aerify

Answer 5

A 2.0 XPath that works:

//*[tokenize(@class,'\s+')='atag']

or with a variable:

//*[tokenize(@class,'\s+')=$classname]

Sleepyhead

How can this work if @class has more than one element? Because it is going to return a list of words and comparing that to a string fails with wrong cardinality. – Rossie

@AlexisWilke - From the spec (w3.org/TR/xpath20/#id-general-comparisons): General comparisons are existentially quantified comparisons that may be applied to operand sequences of any length. It's worked in every 2.0 processor that I've tried. – Sleepyhead

Note also, in XPath 3.1 this can be simplified to //*[tokenize(@class)=$classname] – Bertsche

And for completeness, if you are fortunate enough to be using a schema-aware XPath processor, and if @class has a list-valued type, then you can simply write //*[@class=$classname] – Bertsche

Answer 6

Be aware that bobince's answer might be overly complicated if you can assume that the class name you are interested in is not a substring of another possible class name. If this is true, you can simply use substring matching via the contains function. The following will match any element whose class contains the substring 'atag':

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

If the assumption above does not hold, a substring match will match elements you don't intend. In this case, you have to find the word boundaries. By using the space delimiters to find the class name boundaries, bobince's second answer finds the exact matches:

//*[contains(concat(' ', normalize-space(@class), ' '), ' atag ')]

This will match atag and not matag.

Priscillaprise

This is the solution I was looking for. It clearly find 'test' in class='hello test world' and does not match 'hello test-test world'. Since I use only XPath 1.0 and have no RegEx this is only solution which works. – Turkoman

How different is this from the answer by @Postrider ? – Jahdiel

@Jahdiel the most complete solution is the second one I presented here, which is the same as bobince's second answer. However, the first solution is far simpler to understand and to read, but will only be correct if your class names can not be substrings of each other. The second is more general purpose, but the first is preferable if the assumptions are reasonable for your particular application. – Priscillaprise

Answer 7

To add onto bobince's answer... If whatever tool/library you using uses Xpath 2.0, you can also do this:

//*[count(index-of(tokenize(@class, '\s+' ), $classname)) = 1]

count() is apparently needed because index-of() returns a sequence of each index it has a match at in the string.

Squarerigged

I suppose you meant to NOT put the $classname variable between quotes? Because as it is, that's a string. – Rossie

Finally, a correct (JavasScript compatible) implementation of getElementsByClassName...aside from the string literal '$classname' of course. – Roup

This is grossly over-complicated. See @DanielHaley's response for the correct XPath 2.0 answer. – Bertsche

Answer 8

You can try the following

By.CssSelector("div.atag.btag")

Sinkhole

Answer 9

I came here searching solution for Ranorex Studio 9.0.1. There is no contains() there yet. Instead we can use regex like:

div[@class~'atag']

Gelignite

Answer 10

For the links which contains common url have to console in a variable. Then attempt it sequentially.

webelements allLinks=driver.findelements(By.xpath("//a[contains(@href,'http://122.11.38.214/dl/appdl/application/apk')]"));
int linkCount=allLinks.length();
for(int i=0; <linkCount;i++)
{
    driver.findelement(allLinks[i]).click();
}

Poachy