I am trying to identify the elements containing the reviews on this webpage using .

Using the following :

//div[@class='text show-more__control']

The number of elements identified are: 15



Using the following :


The number of elements identified are: 25



So, why does google-chrome-devtools identifies less number of elements through XPath then number of elements identified through CssSelector

1 Answers

kjhughes On Best Solutions

The XPath is checking @class attribute values lexically for the string, text show-more__control.

The CSS expression is checking semantically for @class attribute values that indicate that the div should have both the text and the show-more__control styles.

There are 10 div elements that satisfy the CSS semantic selection criteria that fail the XPath lexical criteria because their @class lexically is

text show-more__control clickable

The usual workaround for testing @class is to pad and check each class separately:

//div[    contains(concat(' ',@class,' '), ' text ')
      and contains(concat(' ',@class,' '), ' show-more__control ') ]

This XPath returns 25 div elements, just like the CSS selector.

Note: Particularly tricky here is that clickable parts of the div/@class attribute value are not present in the static source, only in the dynamic properties on the div objects.