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

Snapshot:

xpath_15

Using the following :

div.text.show-more__control

The number of elements identified are: 25

Snapshot:

cssSelectors_25

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

1 Answers

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