227
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
227
Help us understand the problem. What are the problem?