0

ウェブデザイン プロセスを文書化するために、ページをリロードするたびに、または HTML ドキュメントまたはスタイルシートを保存するときに、localhost のページのタイムスタンプを含むスクリーンショットを撮りたいと考えています。

grunt をタスク ランナーとして使用し、ヘッドレス ブラウザーの phantomjs を使用してページをキャプチャします。grunt-localscreenshots https://www.npmjs.org/package/grunt-localscreenshotsを使用すると、ページを手動で簡単にキャプチャできます。しかし、面倒で、タスクが完了するまでに最大 10 秒かかります。スクリーンキャプチャ プロセスは常にバックグラウンドで発生する必要がありますが、ページが変更または保存された場合にのみ発生します。

そこで、ディレクトリのファイル変更を監視し、phantomjs-script を起動するこのシェルスクリプトを作成しました。

while true
do
ATIME=`stat .`

if [[ "$ATIME" != "$LTIME" ]]
then
phantomjs screenshot.js
LTIME=$ATIME 
fi
sleep 0.5
done

これはphantomjsスクリプトです

var page = require('webpage').create();

page.onConsoleMessage = function(msg) {
    console.log(msg);
};

page.open("http://127.0.0.1:8080/screenshot-test/dev", function(status) {
    if (status === "success") {
        window.setTimeout(function() {
            var now = Date.now();
            page.render('screenshots/' + now + '.png');
            phantom.exit();
        }, 1000);
    } else {
        console.log("nono");
        phantom.exit();
    }
});

これはちょっと機能しますが、非常に不安定で、html が変更された場合にのみ起動します。また、実際に何も変更されていない場合は、2 つまたは 3 つの重複したスクリーンショットが作成されます。また、スクリーンショットがまったく作成されない場合もあります。おそらくその理由は、ページのレンダリングに時間がかかりすぎることです。安定した使用可能なソリューションのアイデアはありますか? 理想は単調な作業です

4

1 に答える 1

0

セレンを使用すると思います（phantomjs/ghostdriverを使用）。もちろんJavaや他の言語もサポートされていますが、私が部分的に使用しているpythonバインディングがあります。

page_source を 0.5 秒ごとに取得して違いを確認することで、ページの変更を確認できます。このような変更では、save_screenshot() メソッドを使用してスクリーンショットを保存します。

注: 本当に大きなページの場合、save_screenshot がゼロバイトのスクリーンショットでサイレントに失敗するのを見てきました。通常は 5 ～ 10 MB のスクリーンショットでも問題ありませんが、たとえば数十万行のページでスクリーンショットをキャプチャしようとするたびに、この問題に繰り返し出くわしました。

于 2014-03-24T14:06:21.333 に答える