reg-suitをCapybaraで試してみた #CircleCI

この記事はfusicアドベントカレンダー14日目の記事です。

関わっている案件で画像を取り扱うことがありました。
それの検証をするためにわざわざ画面を開いて、ダウンロードして目視確認して、、、

そんなめんどくさいことをやっていたのであります。
自動化できたらありがたいですね！

reg-suit

AWS S3へ事前にアップロードされた画像ファイルを元にテストデータとをcircleci上などで比較し、差分を検証してくれるライブラリです。
https://github.com/reg-viz/reg-suit

導入の方法については、npm i reg-suitでいけます。

大まかな流れ

本家のデモでは

こんな流れで、実証しています。
しかし、私がやりたいことはダウンロードリンクを踏んで画像を保存し、その画像データ（おまけにSVG）を正解データと比較したいのです。
さらに、自分の場合、rubyのコードを使ってsvgファイルを動的に生成した後、ダウンロードする形だったのでそのままスクショではNGでした。

さて、どうするか？

こうします。

Capybaraというe2eテストフレームワークを使って、実行します。
無理矢理感満載ですが、なんだかできちゃいそうですね。

実際に書いてみたコード

turnipを使ってます。

test.feature

Scenario: svg画像をダウンロードできる
  Given svg画像を登録
  Then "svg画像リンクがあるURL"にアクセスする
  And "svg画像をダウンロード"のリンクをクリックする # ここでsvgデータを作成していた。
  And スクリーンショット

test_feature.rb


step ':filenameを保存する' do |filename|
  page.save_screenshot "#{Rails.root}/directory_contains_actual_images/#{filename}.png", full: true
end

これで、一応、ファイルの保存が可能になります。
あとはreg-suitでここを読み取るように仕向ければ良いですね。

残りはというと

https://github.com/reg-viz/reg-puppeteer-demo#configure-reg-suit
で書いてある通りにすればOKです。
ぶっちゃけ、言い換えればcapture.jsの代わりをCapybaraで補うようにしただけです。
タイトル通りです！

ymlは

config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/ruby:2.6.4-node-browsers

    working_directory: ~/repo

# .... yarn installとかbundle installとか

    steps:
      - checkout
      - run: yarn install
      - run: bundle exec rspec
      - run: yarn run reg-suit run

へ置き変えればOKです。
specを実行するついでにダウンロード画像の検証もできるのでお得感はあるかもしれませんね。

おわりに

アドカレ投稿ギリギリになってしまった。
ちょっと適当になったかもしれないので、あとで、実験用リポジトリをはるかもです。🙇‍♂️

明日は、＠masayuki031です。よろしくー！