6977


# 環境

OS:CentOS release 6.6 (Final)  
casperjs:1.1.0-beta3  
phantomjs:1.9.8

## 概要

上記環境からスクレイピングを行い、指定したページの全画面をキャプチャしたいと考えております。  
現状、指定ページの一部キャプチャは保存できるようになりましたが、そのページはマウスの↓スクロール操作で徐々にリストが表示されるタイプ動的サイトのため、全画面を取得できていません。

最下層まで画像取得をするため `scrollToBottom()`
関数を下記の通り用いてキャプチャを撮りましたが、スクロールができておらず、全画面が取得できておりません。  
有識者の方がいましたらアドバイスお願いいいたします。

## 詳細

キャプチャを取っているソースは下記の通りです。

[code]

    casper.thenOpen("https://hoge.hoge/list", function(){
        this.wait(4000,function(){
            this.capture("before.png");
            });
    });
    casper.then(function(){
        this.scrollToBottom();
        this.capture("after.png");
    });
    
[/code]

→before.pngとafter.png差分が出ていない。

* * *

## 参考サイト

<http://casperjs.readthedocs.org/en/latest/modules/casper.html>


CC BY-SA 3.0
2015-02-22T13:40:40.483
6928
2016-10-13T11:00:59.293
2016-02-19T02:52:43.440
76
8476
question
casperjs web-scraping phantomjs
scrollToBottomについて


実際に似たようなサイトで検証してみたところ、同じような状況が再現できました。

[code]

    var casper = require('casper').create();
    
    casper.start("http://isotope.metafizzy.co/v1/demos/infinite-scroll.html");
    
    casper.then(function(){
        this.capture("before.png");
    });
    
    casper.then(function(){
        this.scrollToBottom();
        this.capture("after.png");
    });
    
    casper.run();
    
[/code]

これは続きの読み込みや表示が終わる前に `after.png` を取得しているからです。

例えば、`after.png` を取得する前に1秒待つようにすると、このサイトではうまく取得できます。

[code]

    ...
    
    casper.then(function(){
        this.capture("before.png");
        this.scrollToBottom(); // スクロールして
    });
    
    casper.wait(1000, function(){ // 少し待って
        this.capture("after.png"); // キャプチャ
    });
    
    ...
    
[/code]

一定時間待つ代わりに `waitFor` などで読み込み完了を検知するのもよいでしょう。

参考 <http://www.andykelk.net/tech/web-scraping-with-casperjs>

この記事ではローディングサークルが消えるのを `waitWhileVisible` で待って、再度スクロールを試しているようです。


CC BY-SA 3.0
2015-02-23T15:13:15.073
6977
2015-02-23T15:13:15.073
8000
6928
answer