NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった

最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。

Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita

Nightmareの良い点

• Zero configuration
• というかただのスクレイパー

悪い点

• プロセス立ちあげるのが遅い
• JSわかってないと読みづらい

PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。

僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。

連番のスクリーションショットを取りながらNightmareを走らせるサンプル

Nightmare = require 'nightmare'

class TestRunner extends Nightmare
  constructor: (@capture_dir='') ->
    super()
    @cnt = 0

  init: (url) ->
    @
    .viewport(800, 600)
    .goto url

  zeroPaddingNum = (n) =>
    switch n.toString().length
      when 1 then '00' + n.toString()
      when 2 then '0' + n.toString()
      when 3 then n.toString()
      else
        throw 'too big'

  capture: (name) ->
    r = @screenshot __dirname + "/screenshots/#{@capture_dir}/"+zeroPaddingNum(@cnt)+'-'+name+'.png'
    @cnt += 1
    r

こんな風に使う

test/e2e/main-test.coffee

describe 'Test', ->
  it 'test', (done, reject) ->
    url = path.resolve __dirname + '/../../public/index.html'
    new TestRunner('case1')
    .init url
    .wait()
    .capture('main')
    .click('.js-goto-sub')
    .wait(300)
    .capture('sub')
    .run (err) ->
      if err then return done(err)
      done()

どこから実行するかによるけど、実行したらこんな風に書きだされてるはず

screenshots/case1/001-main.png
screenshots/case1/002-sub.png
...

で走らせ終わったら、 ImageMagick で convert -delay 30 -loop 0 **/*.png e2e.gif で0.3sごとに切り替わるgifが作れる。雑に目視チェックしてホワイトアウトしてないか、ミスって画面切り替わりそこねてないかとか確認して、問題なかったらコミット。みたいな感じ。

(実際に撮影したgifは開発中のアプリの情報を含むため表に出せない…あとでなんか別のサンプルを用意する)

楽になったし、連番スクショは仕様わからない人にも説明しやすい。