Почему google-chrome-devtools идентифицирует меньшее количество элементов через XPath, чем количество элементов, идентифицированных через CssSelector

Question

Я пытаюсь определить элементы, содержащие рецензии на этой веб-странице , используя google-chrome-devtools .

Используя следующее xpath :

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

Количество идентифицированных элементов: 15

Снимок:

Использование следующих css-селекторов :

div.text.show-more__control

Количество идентифицированных элементов: 25

Снимок:

Итак, почему google-chrome-devtools определяет меньшее количество элементов через XPath затем число элементов, идентифицированных с помощью CssSelector

Answer 1

XPath проверяет @class значения атрибута лексически для строки, text show-more__control.

Выражение CSS семантически проверяет значения атрибута @class, которые указывают, что div должен иметь стили text и show-more__control.

Существует 10 div элементов, которые удовлетворяют критериям семантического выбора CSS, которые не соответствуют лексическим критериям XPath, поскольку их @class лексически равно

text show-more__control clickable
                       ^^^^^^^^^^

Обычный обходной путь для тестирования @class состоит в том, чтобы дополнить и проверить каждый класс отдельно:

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

Этот XPath возвращает 25 div элементов, как селектор CSS.

Примечание: Особенно хитроумно здесь то, что clickable частей значения атрибута div/@class отсутствуют в статическом источнике, только в динамических свойствах объектов div.