Xpath to Match @Class Value and Element Value

HTML XPath Searching by class and text

//span[contains(@class, 'myclass') and text() = 'qwerty']

or

//span[contains(@class, 'myclass') and normalize-space(text()) = 'qwerty']

XPath for class and other attribute values together?

This XPath illustrates all of the concepts of your three-part question:

//a[contains(concat(' ',@class,' '), ' classA ')]
[contains(concat(' ',@class,' '), ' classB ')]
[contains(concat(' ',@class,' '), ' classC ')]
[@href='https://twitter.com/JSTOR']
[@target='_blank']

Notes:

  • The @class tests prevent classA from matching classAnt.
  • You can use and to join your conditions in a single predicate rather than compound predicates.

Xpath: select div that contains class AND whose specific child element contains text

To find a div of a certain class that contains a span at any depth containing certain text, try:

//div[contains(@class, 'measure-tab') and contains(.//span, 'someText')]

That said, this solution looks extremely fragile. If the table happens to contain a span with the text you're looking for, the div containing the table will be matched, too. I'd suggest to find a more robust way of filtering the elements. For example by using IDs or top-level document structure.

XPath for two different classes?

This XPath,

//div[@class="one" or @class="two"]

will select all div elements with @class attribute values of "one" or "two".

For a more robust matching of @class that takes into account that @class attribute values can be space-separate lists, see this approach.

XPath using classname and contains text

For a demonstration consider the following HTML:

<div class="credit_summary_item">Professor</div>

There is:

  • Only one value of the class attribute i.e. credit_summary_item.
  • And the innerText i.e. Professor contains no leading and trailing spaces.

So, to locate this element you can use either of the following solutions:

  • Using text():

    //div[@class='credit_summary_item' and text()='Professor']
  • Using contains():

    //div[@class='credit_summary_item' and contains(., 'Professor')]


This usecase

But in your usecase it seems contains(@class, 'credit_summary_item') worked which implies the element have multiple classes. So apart from credit_summary_item there are some other values present as class attributes.

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

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.



Related Topics



Leave a reply



Submit