こんにちは@glassmonkeyです。
この記事はGitHub Actions Advent Calendar 2020最終日の記事です。
みなさんクリスマスはいかがお過ごしだったでしょうか？
私はこの記事のネタのactionを作ることを忘れてて夜なべでつくりました。
わりと私自身の個人開発で使うことをメインに据えているので、機能など色々足りていないところは少しずつ足していけたらとは考えています。
はじめに
今回はビジュアルリグレッションテストを行うGithub Actionを作ってみました。
マーケットプレイスにあげているので、興味がある方はご覧ください。
ソースコードもglassmonkey/image-regression-notificationに置いています。
実装の詳細に関しては過去の私が書いたGitHub Pagesをビジュアルリグレッションテストをしてみたに詳細を記載しているので気が向いたらご覧ください。
どんなactionか
下記のようにBASE_URLとCOMPARE_URLの２つのURLを与えてそのスクリーンショットを撮影し、
差分画像をSlackに投稿するActionです。
- uses: glassmonkey/image-regression-notification@v1.1
with:
BASE_URL: https://example.com
COMPARE_URL: https://test.example.com
SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
SLACK_CHANNEL: ${{ secrets.SLACK_CHANNEL }}
ENABLE_SHOW_DIFF: false
なおSLACK_TOKENにはSlackのbotのトークンを指定します。
files.uploadを行う必要があるのでそれが可能なbotを作成していただく必要があるのでご注意ください。
例
実験でhttps://ore-timer.xyz/と変更差分を表すhttps://stage-ore-timer.netlify.app/での変更を比較してみます。（ページは私の個人開発のLPです）
h1テキストを作業の集中を可視化から作業の集中を可視化しますと変更してみたのですが、
変更部分が赤い矩形で囲まれていることがわかります。
このような感じで、簡単に表示の変更影響がslackで確認できるようになります。
PRの際はローカルでdocker-composeなどでCI環境でホスティングしたページをCOMPARE_URLに指定あげることで、PRに対応した差分検知に利用することもできます。
課題
Github Container Resistoryをチャレンジしようと思ったのですが、
時間の関係上断念しちゃいました。アクションの実行時間はこれで大幅に短縮できる見込みです。
スクリーンショットのサイズも柔軟にできるようにしようと思ってるので、ここも変更予定です。
まとめ
画像回帰をslack通知するactionを追加してみました。とりあえず個人で使う分で色々やってみようかなという感じなのでフィードバックなどあったら嬉しく思います。