用CasperJS抓取京东的价格数据

初学CasperJS，很多问题困惑不解。比如京东的价格数据采集。打开一个有商品的京东页面。在Chrome中检查元素，可以看到有价格数据。但如果选择查看页面源码，就会发现价格的位置是空的。查看页面源码功能可能只显示从服务器获得的HTML文件本身，所以这里价格数据为空也正常。但是CasperJS不是可以执行JS渲染吗？为什么在CasperJS里抓取这个价格数据，甚至在设置了几十秒的延迟之后，仍然是空呢？

到处搜索答案，在Q群里求教，终于遇到位大神分析出原因：

原来京东的这个页面类似于瀑布流布局。就是说商品数据并非一开始就呈现的，而是随着读者往下滚动页面，而逐步加载的。虽然仍是执行JS从后台获取数据，但这JS的执行却需要一个触发条件，就是浏览器窗口的向下滚动。如果不滚动，等待多久也不会触发数据的加载。自然CasperJS就抓不到东西。

大神用Fiddler分析出了问题所在。用Chrome开始者工具里的“网络”一栏，也能看到随着页面往下滚动，逐渐加载了更多的图片等内容。

用：

casper.start('http://sale.jd.com/act/6xHXtaAgsK.html',function(){
    this.scrollToBottom();
});

这段代码执行页面的滚动。然而滚动之后的JS对数据的加载何时结束却不知如何判断。也许可以拿页尾的最后一张图片来执行this.waitForResource。但是这种等待需要对具体页面进行分析了。所以要在滚动之后延迟若干秒钟再开始捕获数据。

所以结论是，CasperJS对JS渲染的执行并无问题。相反自己需要补习一下各种Web前端技术的知识。

由此联想到页面数据采集的一些复杂场景，比如需要登录，需要cookie，需要点击某个按钮才会出现相应页面数据等。看来试图制作一个通用的页面采集程序还是非常困难的一件事情。