在控制器中用JS验证CSS_Selector和Xpath

0：引言

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

1：CSS Selector验证

css_selector = '#bs_form_main input[value=buchen]'
document.querySelector(css_selector)

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

2：Xpath验证

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，可以使用下面的方法。

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唯一性。》

相关文章

BLOG双线部署+https

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://blog.sci.ci/2021/07/25/%E5%9C%A8%E6%8E%A7%E5%88%B6%E5%99%A8%E4%B8%AD%E7%94%A8JS%E9%AA%8C%E8%AF%81CSS_Selector%E5%92%8CXpath/