CircleCI+alpine+Rails+Percyでビジュアルテストを導入した話

はじめに

Percyっていうビジュアルテストのサービスがあります
少し前にCircleCIで紹介されていて、使ってみよう〜と思ってやってたんですが、いろいろ詰まったりもして苦労したので記録しておくのもよいかなと思い

結局詰んで妥協した部分もあったりするのでこの内容がベストプラクティスとは思ってません
一応動いているし、現時点では十分という感じではあります

Railsの設定

RailsのE2EテストではだいたいCapybaraを使うと思うんですが、Percyではそれ用にカスタマイズされたPercy::Capybaraというのが用意されているのでそれを使います

ここでいきなり冒頭で述べた妥協した部分になるんですが、このPercy::Capybaraが、最新のドキュメントで書かれているv4だとうまくいきませんでした
v3とv4でPercyのファイナライズ処理が変わっていて、v4からはnodeのpercy-agentを使わないといけないんですが、それが自分の環境ではうまくいきませんでした

結構いろいろ試したんですが、最終的には諦めてこちらのドキュメントを見てv3で設定しました
ここはドキュメント通りに設定すれば問題ないと思います

CircleCIの設定

当方はローカルの開発環境をalpineなrubyイメージで作っていて、揃えるためにCircleCIのイメージもalpineなrubyを使用しています
スクリーンショットが撮れるように、alpineでちゃんとchromeが動くようにしないといけないので、その設定を .circle/config.yml にします

      - run:
          name: apk install
          command: |
            echo @edge http://nl.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories && \
            echo @edge http://nl.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories && \
            apk add --update --no-cache \
              alpine-sdk \
              udev \
              chromium \
              chromium-chromedriver \
              fontconfig \
              font-noto-cjk@edge \
              nss@edge \
              freetype@edge \
              freetype-dev@edge \
              harfbuzz@edge \
              ttf-freefont@edge

まあ各々ほかにも入れないといけないものがあると思いますがchrome周りで必要なのはこの辺かと
試行錯誤をしていくうちに無駄にedgeになってるものもありそうですが、重要なのは font-noto-cjk@edge です
notoはお馴染みのフォントですね
これがないと日本語がお豆腐になってしまうので
後から手で入れるという方法もありますが、edgeにあったのでこちらを利用しました

CircleCIのOrb

これ、v3でもいるのかな？
でもこの処理がないと、正常にファイナライズできないんですよね
というわけでOrbも入れておきます

orbs:
  percy: percy/agent@0.1.3

workflows:
  main:
    jobs:
      - test
      - percy/finalize_all:
         requires:
           - test

PERCY_TOKEN

忘れずに設定してください

詰まったところ

一応上記で問題なく動くと思います
v4で苦戦したり紆余曲折あったので僕は散々詰まりましたが…
他に詰まったところは、Railsのmetaタグを1つ忘れていていつまでも日本語が文字化けしていたことです
豆腐にならないものの文字化けしてしまい、なんじゃそりゃって結構長い時間悩んでました
が、なんてことはなく
Railsのlayoutで
meta[charset="utf-8"]
し忘れていただけっていう……
これなくても開発環境では普通に表示されるんですけどね（OS/ブラウザがよしなにやってくれている？)
ちゃんと忘れずに書きましょうねっていう教訓でした

で、Percyどうなの？

わかりやすいです！
特にレスポンシブなサイト作ってると、Percyでスマホの見た目も簡単にチェックできちゃうのがいいですね
あと、開発環境とか見られない人に対してプルリクの変更を確認してもらうのも、Percyのアカウントだけ作ってログインしてもらえれば確認できるので便利です

ネックはお値段ですかね
スクリーンショットの枚数で課金なんですが、CircleCI回るたびにスクリーンショット撮ってると、ページ数によってはあっという間に枚数が増えていくので…
これについては対象のブランチを制限するとか、いろいろやりようがあるかなと思いました
あと、開発者が各々ローカルで実行する意味合いは薄いと思うのでそれはスキップするようにするとか
スクリーンショットの節約術が問われそうです
あと時間もね
ページ増えると地味に時間かかるので
その辺も考えていかないとなーとは思います

その辺さえ気をつけておけば、サービスとしてはかなり満足です
人数の少ない開発環境ではこういうツールがあるとやはり助かりますね
興味のある方は是非使ってみてください