Vue.jsユーザーに贈る、Reg suitを使った画像回帰テスト

Reg suitで画像差分テスト

おとべ氏：おとべです。このタイトルでLTしようと思うんですけど、ちょっとお気づきの方いらっしゃるかと思いますけど、スライド68枚あって大変で、5分じゃ収まりそうになりないので、マジでライトニングにすっ飛ばしつつ進めたいと思います。

自己紹介です。おとべです。僕も読み方がわからないIDでTwitterやGitHubとか全部やっているので、よかったら見てください。

また、ゆめみですね。出ました、ゆめみ。「全員CEO」とか「有給取り放題」とかいろいろ言ってるんですけど、僕はまだアルバイトなのでCEOではないみたいですね。

フロントエンドエンジニアとしてゆめみに採用されたはずなんですけれども、最近、業務の6〜7割がデザインですね。Figmaでデザインを書かされています。

あと、ポケGOのフレンドを募集しているので、よければあとで声かけてください。「Maker Faire Tokyo」に来る人もいたら、あとで声かけてください。

はい。本題に入りましょう。Storybook、知っている方いますか？

（会場挙手）

けっこういますね。半分ぐらいですかね。

残りの半分のために軽く説明すると、デザインカタログとかよく言われるんですけど、コンポーネント一覧が見られるツールで、いろいろ便利になるよと。じゃあ、Reg suitを使っている人っていらっしゃいますか？

（会場挙手）

1人、2人ぐらいですね。

今日はこれについて紹介するんですけど、画像差分テストというものですね。本名が「Visual Regression Test」で「画像回帰テスト」というものなんですけど。

何かというと、フロントエンドは要はユーザーが見る部分なので、その過去のスクショと現在のスクショを比較して行うテストです。CSSをちょっくら変えたらぜんぜん違うところが微妙にスタイル崩れを起こしちゃったとか、けっこうあると思うんですけれども、そういうのを防止できます。

このReg suitというのが、それをよしなにやってくれるツールですね。今日はそれを紹介します。入門と書いてあったのでこういう記事になってるんですけど、正直やっている時間がないのでパパッといきます。

GCPのSDKをインストールをして、Storybook、Vueのプロジェクト、Vue/cli3で作っているプロジェクトに、この「vue add」というコマンドでStoryookを入れると、全部いろいろ設定を書いてくれるので、ほぼどこかのReactみたいにいろいろ面倒くさいことをしなくてもStorybookが使えるようになります。

Storybookが起動したら、この2つですね。今回の主役なんですけれども、まずzisuiというのがStorybookをスクショしてくれるやつですね。

あとは、これがよしなにやってくれるReg suitをインストールしましょう。

package.jsonにscreenshotとregressionという2つのコマンドを書き足して、これを実行することで画像の差分テストを行います。

「Reg suit init」というコマンドを使いたいので、グローバルにもインストールして。あと、これを忘れるとエラーが出るので、Google Cloudのログインもしておいてください。これで準備が終わって、これがinitですね。

今回はAWSじゃなくてGCPのほうに画像を保存したいので、下の「GCP」を選んで、あとSlackも使ってみましょうということですね。

保存されているのがこのscreenshotにさっきのzisuiがスクリーンショットを保存してくれるので、そこに保存してあるよという指定をしたり。

GitHubはたぶん言われたとおりにやればいいと思うんですけど、GitHubのトークンを取ってきたり、SlackのWebhookのURLを書き込んだりすると、今触れなかったところはたぶんEnterで大丈夫だと思うんですけど、勝手に終わりますね。

Slackにテストのメッセージが流れて設定が終わります。

画像差分テストの実践

使ってみましょう。ちょっと端折っているんですけど、StorybookなのでStoryを書かないとそのコンポーネントのスクショは撮れません。「yarn screenshot」というコマンドでStorybookが立ち上がってスクショが保存されます。

「yarn regression」ってやると……来ましたね。Slackに通知が来ました。

このURLがGCPにデプロイされているもので、今これ、「えっ、画像差分テストなのに差分ないじゃん？」と思ったと思うんですけど、今、上から3つコンポーネントが並んでいます。なぜかというと、どこと比べるのかを指定しないので、いまだなにもない。

ここでCircleCIが出てきます。CircleCIと連携すると、マージリクエストを出したときにマスターとそのマージなど、今の状態を比較してくれます。

CircleCIの連携がいろいろあって、いろいろ書いています。さきほど（パネルディスカッションの）セッションに出ていたkahiroさんがQiitaにまとめてくれていたので、ほぼコピペなんですけど、その記事がちょっと1つだけ違っていて困ったのがイメージです。kahiroさんは独自のやつを使ってたんですけど、ノードのバージョンがちょっと古かったので、Reg suitが公式で出しているやつに換えました。

というところでGitHubにPushして、CircleCIの設定ですね。CircleCIの設定をしていろいろやって、こういうふうにCircleCIのビルドが通るようになれば成功です。

さっきのkahiroさんのやつを使ってたって言ったじゃないですか。それを使わなかったことによって出てきた問題が、わかると思うんですけど、日本語フォントが文字化けしているんですね。kahiroさんのやつはちゃんと文字化け対策でいろいろ入れていたみたいなんですけど、それがないので文字化けしてしまうと。要対策って感じですね。

これで一応環境が完成したので、実際にブランチを切って変更してマジリクを出すと。そうすると差分のレポートが振ってきます。

さっきと色が違いますね。要はテストをパスしていない差分があります。

GitHubにも通知が来て、これですね。これでやっと差分なんですけれども、ビフォーとアフターと違う部分が赤く表示されるようになっています。

こんなふうにさまざまな方法でどこがどう違うのかを比べることができます。

まとめです。Reg suitはこのVisual Regression Testをいい感じにやってくれるツールで、実はそんなに導入は難しくないですね。CIをSlackへ連携して実際業務へ適用するのもすごくやりやすいんじゃないかなと思います。

コンポーネントに分割された、それこそVue・React・Angularなどの開発だとそういう意図しない差異がCSSで出やすいので、恩恵があるんじゃないかなと思います。

以上になります。ありがとうございました。

（会場拍手）