NightmareはElectronベースのヘッドレスブラウザです。主にテストに利用されますが、スクレイピングに使われているケースも多いようです。Phantom.jsなどに比べて簡素にかけるのがうけています。 そんなNightmareのプラグインとしてNightmare Animated GIFを紹介します。Nightmareの操作をアニメーションGIFにできるソフトウェアです。

Nightmare Animated GIFの使い方

Nightmare Animated GIFのサンプルコードです。 animatedGif.captureAs が肝です。

var Nightmare = require('nightmare');
var animatedGif = require('nightmare-animated-gif');
var nightmare = Nightmare();

nightmare
  .goto('http://yahoo.com')
  .use(animatedGif.captureAs('search'))
  .type('form[action*="/search"] [name=p]', 'github nightmare')
  .use(animatedGif.captureAs('search'))
  .click('form[action*="/search"] [type=submit]')
  .wait('#main')
  .use(animatedGif.captureAs('search'))
  .end()
  .then(() => {
    animatedGif.generate('search', './search.gif', {
      repeat: 0, // forever
      delay: 1000,
      quality: 10,
    });  
  });

これを実行すると、次のようなアニメーションGIFが生成されます。

Nightmare Animated GIFを使えば、Nightmareを使ったテストやスクレイピングの結果を画像として残せるようになります。そもそもWebブラウザのデモなどをアニメーションGIFにするといった目的にも使えそうです。

Nightmare Animated GIFはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

cakecatz/nightmare-animated-gif: Nightmare plugin for generating animated gif.