Question

我要抓的页面是：http://pcdtattoo.en.alibaba.com/productlist-1.html

共有7页产品，我想捕获每个项目的名称，图片网址和链接。以下是我的代码：

var products = [];
casper.start();
for (i=1;i<8;i++){
  casper.thenOpen('http://pcdtattoo.en.alibaba.com/productlist-' + i + '.html')
  casper.wait(4000,function getItems(){
    var itemArr = this.evaluate(function(){
      var $ = jQuery;
      var c = $('.app-productsGalleryView li');
      var items = [];
      c.each(function(i){
          var product = {};
          product.title = $(this).find('.product-title>a').text().trim();
          product.link = $(this).find('.product-title>a').attr('href');
          product.img = $(this).find('img').attr('src');
          items.push(product);
      })
      return items;
    })

    //To capture product description (has nothing to do with this question)
    itemArr.forEach(function(item,i){
        casper.thenOpen('http://pcdtattoo.en.alibaba.com/'+item.link,function(item){
          var f = function(){
            item.intro = this.evaluate(function(){
              var $ = jQuery;
              return $('#richTextContainer').prop('innerHTML');
            })
          }
          return f;
        }(item))
    })
    for (j=0;j<itemArr.length;j++){
      products.push(itemArr[j]);
    }
  })
}


casper.run(function(){
  //use phantom fs module to write what is captured to a js file for future use
  fs.write('test.js','Products=' + JSON.stringify(products),'w');
  this.exit();
});

抓取顺利，但对于7个页面中的每个页面，只有前2个或3个项目的img网址被正确删除，其他都是加载gif，结果可以在此页面上看到：{{3} （每个产品列表页面有36个项目，你只能看到[0,1,36,37,72,73 ...]的图片网址是正确的，其余的都是加载gif）

我想这是因为产品列表页面上存在“瀑布式”效果，您必须向下滚动以使图像的URL（当前正在加载gif）替换为真实图像URL。

但是如何从我的casper代码中触发这个？我试过casper.wait() 4000，显然不起作用;我也试过把

  for (k=0;k<5000;k+=500){
    window.scroll(0,k);
  }

在evaluate函数中，它也不起作用。我想这是因为evaluate并未真正触发页面上的window.scroll事件。那我该怎么办？

更新

我更改了代码以滚动页面：

 casper.wait(4000,function getItems(){

for (k=0;k<5000;k+=250){
  this.scrollTo(0,k);
  var pos = this.evaluate(function(){
    var $ = jQuery;
    var r = {};

    //getting last item image's position and src
    r.top = $('form ul>li img').get(35).getBoundingClientRect().top;
    r.src = $('form ul>li img').eq(35).attr('src');
    return r;
  })
  this.echo("top:" + pos.top);
  this.echo("src:" + pos.src);
}

输出是这样的：

src：//u.alicdn.com/js/5v/esite/img/loading.gif top：1005 src：//u.alicdn.com/js/5v/esite/img/loading.gif top：755 src：//u.alicdn.com/js/5v/esite/img/loading.gif top：505 src：//u.alicdn.com/js/5v/esite/img/loading.gif top：255 src：//u.alicdn.com/js/5v/esite/img/loading.gif top：5 src：//u.alicdn.com/js/5v/esite/img/loading.gif top：-245 src：//u.alicdn.com/js/5v/esite/img/loading.gif top：-263

显然，窗口已滚动浏览图像，但loading.gif未被替换。另一方面，在浏览器控制台上，如果我window.scroll(0,k+=250)，则链接将被替换。那么问题是什么？我需要等待一段时间才能更换图片的链接吗？

更新

我将代码更改为等待几秒钟：

  this.scrollTo(0,4250);
casper.wait(5000,function(){
  var pos = this.evaluate(function(){
    var $ = jQuery;
    var r = {};
    r.top = $('form ul>li img').get(35).getBoundingClientRect().top;
    r.src = $('form ul>li img').eq(35).attr('src');
    return r;
  })
  this.echo("top:" + pos.top);
  this.echo("src:" + pos.src);
})

输出是：

顶部：5

的src：//u.alicdn.com/js/5v/esite/img/loading.gif

看起来对我来说是个死胡同......

casperjs：如何捕获瀑布内容？

0 个答案: