環境
Ruby 2.4.1
Rails 4.2.9
capybara 2.15.1
poltergeist 1.16.0
rmagick 2.16.0
マイグレーションプロジェクトなど、コードの中身はガラっと変わるけど画面としての見た目は変わらないことを担保したい場合がある。
rspecだけを単純に利用してresponse.bodyをhtmlレベルで比較して確認することもできるが
htmlやjsの構造が変わってしまうと「画面の見た目は一緒だけどhtml構造が変わっている」とか普通にある話なので、今回は画面のキャプチャで比較したい。
例えば
id/pw入力欄とログインボタンがあるようなログイン画面を表示→ログインする→トップページが同一であることを確認したいとき、
spec/support/image_utilities.rb
|
1 2 3 4 5 6 7 |
def compare_img(image1, image2) img = Magick::Image.read(image1).first img2 = Magick::Image.read(image2).first puts "I gonna compare image1: #{image1} and image2: #{image2}" expect(img.difference(img2)).to eq [0.0, 0.0, 0.0] puts "Finished!" end |
spec/features/sample_spec.rb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
require 'spec_helper' require 'capybara/rspec' require 'capybara/poltergeist' require 'rmagick' Capybara.javascript_driver = :poltergeist Capybara.register_driver :poltergeist do |app| Capybara::Poltergeist::Driver.new(app, js_errors: true, timeout: 30) end Capybara.configure do |config| config.run_server = false config.default_driver = :poltergeist end feature 'サンプル' do scenario 'ログインする' do # メイン処理 def exec(url, target) # 対象HOST Capybara.configure do |config| config.app_host = url end # トップページ訪問 visit url # キャプチャ files = [] files << (save_screenshot target + '/' + '1_top.png', full:true) # ログインフォームにidとパスワードを入力する fill_in 'loginId', with: 'testid' fill_in 'password', with: 'test' # ログインボタンをクリックする click_on 'ログイン' # キャプチャ files << (save_screenshot target + '/' + '2_login_top.png', full:true) end # 新旧テスト実施 beforefiles = exec('http://sample.com/login', 'before') afterfiles = exec('http://sample.com/login', 'after') # キャプチャ比較 beforefiles.each_with_index {|beforefile, idx| compare_img beforefile, afterfiles[idx] } end end |
上記を実行すると
tmp/capybara/before
tmp/capybara/after
にキャプチャが作成され、そのキャプチャを元に画像をrmagickで比較することができる。
上記は画面のフルスクロールキャプチャをバイナリで比較している。
Poltergeistやrmagickの細かいオプションは公式やgemのページを参照。