«

»

CasperJS中querySelector使用的一些问题

casperjs phantomjs queryselectorCasperJS是PhantomJS(一个Webkit内核的无界面浏览器)和SlimerJS(对应于Gecko内核)的一个封装,用于简化一些操作和功能调用。虽然CasperJS主要应用场景是Web测试,但它也常常用于数据抓取。CasperJS有助于解决网页上JavaScript渲染的问题。因为JavaScript和Ajax常常用来改变HTML的DOM结构,导致实际页面内容和从Web服务器直接抓取到的HTML文件并不一致。这是很多HTML操作库难于彻底解决的问题。

一种解决方法是使用微软的WebBrowser控件之类模仿浏览器操作,但该控件类似于一个小浏览器,界面显示会消耗不少资源,用于数据抓取的话成本太高。PhantomJS和CasperJS这样的headless浏览器就可以解决这些问题。另一个广泛使用的工具是ThoughtWorks公司的Selenium,支持除了JavaScript之外的其它语言编写的用例脚本,在此不作赘述。

学习使用CasperJS,可能需要一些JavaScript的背景知识。本人对JavaScript只能说是略知一二,这几天在学习CasperJS时遇到不少问题。比如DOM操作时的document.querySelector方法,问题如下:

这段简单代码,本意是打开百度,然后查询id为setf的HTML元素的内容。但运行时报如下错误:

百思不得其解。测试时发现document的其它属性也无法正确获取。

最后才在CasperJS文档上看到,跟PhantomJS一样,必须用Casper对象的evaluate方法对页面的DOM对象及元素进行操作。也就是说,不能象在普通页面上的JS脚本一样,直接在CasperJS脚本中调用document对象的属性和方法。需改成如下方式:

官方文档中的例子明确的用evaluate方法调用document.querySelector方法。但这样修改之后,运行时又报如下错误:

取得的innerHTML值为空?

由于习惯用xpath选择器,所以上述querySelector中也使用了xpath选择器,而不是CSS选择器。但看官方文档中的querySelector中的方法使用的却是CSS选择器,难道跟这个有关系?改成CSS选择器试试:

然后再运行:

结果正确了。查找原因,原来querySelector是浏览器支持的JS方法,并不是CasperJS内置方法,所以只支持标准CSS选择器,而不能用CasperJS的xpath选择器。

1 星2 星3 星4 星5 星 (尚无评分)
Loading...Loading...

相关文章

CSS中的属性选择器 有句谚语叫“条条大路通罗马”,本意是说到一个城市可能有许多路径可选。对于CSS选择器也是一样。使用HTML...
用CasperJS抓取京东的价格数据 初学CasperJS,很多问题困惑不解。比如京东的价格数据采集。打开一个有商品的京东页面。在Chrome中检查...
Python中安装使用Selenium及PhantomJS Selenium是一种流行的Web测试工具,但也常用于数据采集方面。Selenium常用的是WebDriver,顾名思义就是...
浏览器中元素的定位类型 网页中元素的定位用由position属性确定,分为绝对定位,相对定位。除此之外还有浮动定位。position的取...
浏览器中CSS的盒模型 首先是CSS中画布的概念,根据CSS2规范,名词“画布”描述为“格式化的结构渲染所用的空间”---也就是浏览器...
浏览器的绘制阶段 在浏览器的绘制阶段,会遍历渲染者树,并调用渲染者的“paint”方法在屏幕上显示内容。绘制需要用到UI基础...
浏览器的布局 下来就是浏览器的布局过程。当渲染者被创建并且增加到树上时,它并没有位置和尺寸。计算这些值被称为布...
浏览器样式表的规则匹配和级联顺序 浏览器中CSS样式的匹配并非总是那么简单,某些情况下可能需要对规则加以处理以使匹配更容易。下面是几个...

发表评论

电子邮件地址不会被公开。