时间戳

首页 > 解决方案 > 为什么 google-chrome-devtools 通过 XPath 识别的元素数量少于通过 CssSelector 识别的元素数量

css - 为什么 google-chrome-devtools 通过 XPath 识别的元素数量少于通过 CssSelector 识别的元素数量

问题描述

我正在尝试使用识别包含此网页上评论的元素。

使用以下：

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

确定的元素数量为：15

快照：

xpath_15

使用以下：

div.text.show-more__control

确定的元素数量为：25

快照：

cssSelectors_25

那么，为什么google-chrome-devtools通过XPath识别的元素数量少于通过CssSelector识别的元素数量

标签： cssgoogle-chromexpathcss-selectorsgoogle-chrome-devtools

解决方案

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对象的动态属性中。

推荐阅读