Edited at

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

More than 3 years have passed since last update.

最近また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は開発中のアプリの情報を含むため表に出せない…あとでなんか別のサンプルを用意する)

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