A-A+

Chrome中使用JQuery抓取数据——headless应用(三)

2017年08月05日 自动化测试 暂无评论 阅读 282 次

使用Chrome抓取页面一个非常方便的地方就是它可以执行JS,也就是说我们可以通过JS函数获取我们想要的数据。一个非常强大易用的库就是Jquery,本文就简单的介绍一下使用Chrome获取数据时Jquery的常用用法。

 

注入Jquery:

Jquery是一个第三方库,在浏览器中并不是原生支持。虽然Jquery比较流行,但很多网站还是没有引入Jquery库的。此时我们可以通过执行JS注入Jquery模块,从而支持后续的操作,注入的方式也非常简单:

function injectJquery()
{
if(typeof(jQuery) == 'undefined')

return;

var jq = document.createElement('script');

jq.src = "http://libs.baidu.com/jquery/1.9.0/jquery.js";

document.getElementsByTagName('head')[0].appendChild(jq);

}
injectJquery();

原理比较简单,就是在Head中注入了一段JS。由于众所周知的原因,Jquery官网有时会迁移到火星上去,一次这里我用的是百度的镜像,可以根据实际情况修改上述代码。

 

CSS选择器:

Jquery是通过CSS选择器来获取Dom节点的,关于CSS选择器本身语法的内容就比较多,这里就不一一介绍,详细介绍可以参看MDN文档:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

如果要快速入门可以参看些国内教程:

当然,我们也可以用ChromeDevTool快速构建CSS选择器:

 

基本查询:

获取到Dom节点后,我们可以进一步获取其属性信息,常见Jquery获取属性函数有:

  • attr() - 获取属性
  • text() - 获取文本内容
  • html() - 获取元素的内容(包括 HTML 标记)

 

子查询:

有的时候,我们需要在查询内容里面细分,这时就要用到子查询了,Jquery子查询支持两种方式,

//将父对象缓存起来以备将来的使用
var header = $('#header');
var menu = header.find('.menu');

或者

var menu = $('.menu', header);

 

输出数据格式化:

直接输出的Jquery查询结果是一个Object对象,我们通过DevProtocol不是很容易解析,为了容易解析它,我们可以通过map对象来将其格式化,并且用将序列化为为字符串输出。例如,获取园子首页标题信息的方式如下:

function hrefToData()
{
return {text:this.text, href: this.href};
}
var o = $('#post_list div.post_item_body > h3 > a').map(hrefToData).get();
JSON.stringify(o, null, 4)

另外一个示例:

var o = $('div.post_item').map(function()
{
var title = $('h3 > a', $(this));
var img = $('img.pfs', $(this));
return {icon:img.attr('src'), title:title.text(), href:title.attr('href')};
}).get();
JSON.stringify(o, null, 4)

 

模拟输入:

很多时候,我们还需要模拟用户输入,如登陆,提交表单等,此时用Jquery相关函数也是非常方便的。

  • text() - 设置文本内容
  • val() - 设置表单字段的值
  • click() - 模拟点击

当然,我们也可以直接通过JS调用Dom节点的函数模拟输入。对于反爬虫比较厉害的网站,我们也可以通过Chrome DevProtocol的Input Domain直接模拟键盘鼠标的原始输入。

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录