Help us understand the problem. What is going on with this article?

reg-suitをCapybaraで試してみた

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

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

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

reg-suit

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

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

大まかな流れ

本家のデモでは

スクリーンショット 2019-12-14 18.54.55.png

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

さて、どうするか?

こうします。

スクリーンショット 2019-12-14 19.11.42.png

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です。よろしくー!

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした