0:引言

使用 Beautifulsoup 和 Selenuim 等网页分析工具时,经常需要自己构造一个选择器,最常用的是 CSS 选择器和 Xpath。如何验证选择器构造是否正确呢?我们可以直接在网页的开发者工具 Console 栏里使用 JS 代码来验证选择器的正确性。

1:CSS Selector 验证

1
2
css_selector = "#bs_form_main input[value=buchen]";
document.querySelector(css_selector);

JS 有提供 querySelector 方法,如果返回值不为 Null,则说明选择器构造正确。

2:Xpath 验证

1
2
3
4
xpath = '//*[@id="bs_tr3FE6EE511403"]/td[9]/input';
document
.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null)
.iterateNext();

evaluate 方法返回 XpathResult 对象,通过 iterateNext 可以依次获取符合选择的 Dom。通常情况下,不需要确认是否有多个符合条件的返回值,所以如果返回不是 null,则 xpath 构造正确
如果需要确认,返回一个或者多个符合 xpath 的 dom,可以使用下面的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function x(xpath) {
var result = document.evaluate(
xpath,
document,
null,
XPathResult.ANY_TYPE,
null
);
var i = 0;
while (result.iterateNext()) {
i++;
}
return i;
}

3:参考

JavaScript 技术篇-js 通过 xpath 获取 dom 节点,js 校验 xpath 唯一性。

评论