reg-suitをCapybaraで試してみた
この記事は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を使ってます。
Scenario: svg画像をダウンロードできる
Given svg画像を登録
Then "svg画像リンクがあるURL"にアクセスする
And "svg画像をダウンロード"のリンクをクリックする # ここでsvgデータを作成していた。
And スクリーンショット
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は
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です。よろしくー!
Author And Source
この問題について(reg-suitをCapybaraで試してみた), 我々は、より多くの情報をここで見つけました https://qiita.com/TsuMakoto/items/d55cbd8a2f3aeb0b30d7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .