<section><div><div><div><a><div><img></div><div>AWS</div></a><a><div><img></div><div>JavaScript</div></a><a><div><img></div><div>Test</div></a><a><div><img></div><div>フロントエンド</div></a><a><div><img></div><div>Playwright</div></a><a><div><img></div><div>tech</div></a></div><div><div><p>日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない（と思っていた）ページで表示が崩れてしまったことってありませんか？</p>
<p>私はたびたび経験があります。</p>
<p>毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。<br>
自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。</p>
<p>どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。</p>
<h1>
<a aria-hidden="true"></a> ビジュアルリグレッションテストとは</h1>
<p>ざっくりいうと「見た目の比較」をするテストのことです。<br>
変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。<br>
<img alt></p>
<h1>
<a aria-hidden="true"></a> どうやって使うの</h1>
<p>ビジュアルリグレッションテストを導入するための方法はいくつかあるのですが<br>
今回は下記の２つを採用して実装しました。</p>
<ul>
<li>
<strong>Playwright</strong><br>
Webテストと自動化のためのフレームワークです。<br>
ローカルでChromium、Firefox、WebKitを使用し様々なブラウザ操作をすることができます。<br>
今回はページの表示、スクリーンショットの撮影を担当しています。</li>
</ul>
<p><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://github.com/microsoft/playwright</a></p>
<ul>
<li>
<strong>reg-suit</strong><br>
ビジュアルリグレッションテストのためのツールです。<br>
以前の画像と現在の画像を比較し、それらの違いをまとめたHTMLレポートを作成します。<br>
今回はスクリーンショットの比較、AWS S3への結果レポートの保存を担当しています。</li>
</ul>
<p><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://github.com/reg-viz/reg-suit</a></p>
<h1>
<a aria-hidden="true"></a> 実装してみる</h1>
<h2>
<a aria-hidden="true"></a> playwrightの準備</h2>
<div>
<div><span>zsh</span></div>
<pre><code>% npm init playwright@latest

// ✔ TypeScriptとJavaScriptのどちらを使用しますか？
✔ Do you want to use TypeScript or JavaScript? · JavaScript
// ✔ エンドツーエンドテストをどこに置くか？
✔ Where to put your end-to-end tests? · tests
// ✔ GitHub Actionsのワークフローを追加しますか？
✔ Add a GitHub Actions workflow? (Y/n) · false
</code></pre>
</div><p>まずはplaywrightのインストールと初期設定をおこないます。<br>
選択肢が出てくるので回答していきます。</p>
<h2>
<a aria-hidden="true"></a> reg-suitの準備</h2>
<div>
<div><span>zsh</span></div>
<pre><code>% npm install -D reg-suit
</code></pre>
</div><p>合わせてreg-suitもインストールしておきます。</p>
<p>ここでインストールするプラグインが尋ねられるので<br>
下記3つのプラグインをインストールしておきます。</p>
<ul>
<li>
<p><strong>reg-keygen-git-hash-plugin</strong><br>
Gitのコミットハッシュを利用して、比較対象となるスナップショットのキーを検出するためのプラグインです。</p>
</li>
<li>
<p><strong>reg-notify-github-plugin</strong><br>
テスト結果をGitHubのリポジトリに通知するためのプラグインです。<br>
このプラグインをインストールすると、PRへのコメントとコミットのステータスが設定されます。</p>
</li>
<li>
<p><strong>reg-publish-s3-plugin</strong><br>
スナップショット画像を取得し、AWS S3に公開するためのreg-suitプラグインです。</p>
</li>
</ul>
<div>
<div><span>zsh</span></div>
<pre><code>% npx reg-suit init

// ? reg-suitの作業ディレクトリ。
? Working directory of reg-suit. .reg
// ? .gitignoreファイルに".reg "エントリーを追加します。
? Append ".reg" entry to your .gitignore file. Yes
// ? ディレクトリには実際の画像が含まれています。
? Directory contains actual images. __screenshots__
// しきい値、範囲は0から1。 値が小さいほど、比較の感度が高くなる。
? Threshold, ranges from 0 to 1. Smaller value makes the comparison more sensitive. 0.01
[reg-suit] info Set up reg-publish-s3-plugin:
// ? 新しいS3バケットを作成する
? Create a new S3 bucket No
</code></pre>
</div><p>合わせてreg-suitの初期設定をおこないます。</p>
<div>
<div><span> regconfig.json</span></div>
<pre><code>  "plugins": {
    "reg-keygen-git-hash-plugin": true,
    "reg-publish-s3-plugin": {
      "bucketName": "S3バケットの名前"
    },
    "reg-notify-github-plugin": {
      "clientId": "GitHub AppのクライアントID"
    }
  }
</code></pre>
</div><p>GitHub AppのクライアントIDは下記を参考に取得してください。</p>
<p><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://github.com/reg-viz/reg-suit/tree/master/packages/reg-notify-github-plugin#github-app-and-client-id</a></p>
<h2>
<a aria-hidden="true"></a> AWS S3の準備</h2>
<p>reg-suitを使うためにはAmazon S3かGoogle Cloud Storageの用意が必要になります。<br>
今回はAWS S3のバケットを使用しましたので軽く触れておきます。</p>
<aside><span>!</span><div>
<p>今回の設定はセキュリティ的にデフォルトの設定よりもゆるくなっているため、しっかりと理解した上で設定を行ってください。</p>
</div></aside>
<h3>
<a aria-hidden="true"></a> S3のバケット作成</h3>
<p>普通に作成すれば基本的には問題ないのですが</p>
<p><img alt><br>
パブリックアクセスの設定は上２つのチェックを外さないと上手く動きませんでした。</p>
<ul>
<li>
<p>「新しいアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする」をONにする<br>
「画像のアップロード」ができるようになる</p>
</li>
<li>
<p>「任意のアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする」をONにする<br>
「差分を確認できるHTMLファイルの閲覧」ができるようになる</p>
</li>
</ul>
<p><img alt><br>
またオブジェクト所有者のACLも有効にしないとエラーで弾かれました。</p>
<h3>
<a aria-hidden="true"></a> ユーザー作成</h3>
<p>バケットにアクセス可能なユーザーもAWSのIAMで作成しておきます。<br>
<img alt><br>
今回、ポリシーはAmazonS3FullAccessを選択しました。<br>
きちんと設定したい場合は適宜調整してください。<br>
ユーザーの作成時に取得した<strong>ACCESS_KEY_ID</strong>と<strong>SECRET_ACCESS_KEY</strong>はこのあと使用します。</p>
<h3>
<a aria-hidden="true"></a> AWS CLIのインストール</h3>
<p>設定にAWS CLIも必要なのでインストールします。<br>
公式のインストーラーを使ってインストールしました。</p>
<p><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://aws.amazon.com/jp/cli/</a></p>
<div>
<div><span>zsh</span></div>
<pre><code>% aws configure
AWS Access Key ID [None]: ACCESS_KEY_ID
AWS Secret Access Key [None]: SECRET_ACCESS_KEY
Default region name [None]: ap-northeast-1
Default output format [None]:
</code></pre>
</div><p>インストールが終わったので早速CLIで必要な情報を設定します。</p>
<h2>
<a aria-hidden="true"></a> Playwrightでスクリーンショット撮る</h2>
<p>Playwrightのテストコードを書きます。</p>
<div>
<div><span>example.spec.js</span></div>
<pre><code>const { test } = require('@playwright/test');

test('visual regression test', async ({ page }) => {
  await page.goto('https://playwright.dev/', { waitUntil: 'networkidle' });
  await page.screenshot({ path: '__screenshots__/screenshot.png', fullPage: true });
});
</code></pre>
</div><p>まずは試しにスクリーンショットを撮ってみます。</p>
<div>
<div><span>package.json</span></div>
<pre><code>  "scripts": {
    "test": "npx playwright test",
    "regression": "npx reg-suit run"
  },
</code></pre>
</div><p>npm-scriptsでタスクを書いて、楽に実行できるようにしておきます。</p>
<div>
<div><span>zsh</span></div>
<pre><code>% npm run test
</code></pre>
</div><p><img alt></p>
<p>無事スクリーンショットを撮れました。</p>
<h2>
<a aria-hidden="true"></a> テスト用のページを用意してテストしてみる</h2>
<p>今回のテスト用にローカルにこんなページを用意しました。<br>
<img alt></p>
<div>
<div><span>example.spec.js</span></div>
<pre><code>- await page.goto('https://playwright.dev/', { waitUntil: 'networkidle' });
+ await page.goto('http://127.0.0.1:5500/index.html', { waitUntil: 'networkidle' });
</code></pre>
</div><p>スクリーンショットを撮るページをローカルに書き換えて、スクリーンショットの撮影とreg-suitのテストを実行します。</p>
<div>
<div><span>zsh</span></div>
<pre><code>% npm run test
% npm run regression

> visual-regression-test@1.0.0 regression
> npx reg-suit run

[reg-suit] info version: 0.11.1
[reg-suit] info Detected the previous snapshot key: '■■■■■■■■■■■■■'
                                         ■ 0% | ETA: 0s | 0/1[reg-publish-s3-plugin] info Download 1 files from visual-regression-test-2022.
 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 100% | ETA: 0s | 1/1
[reg-suit] info Comparison Complete
[reg-suit] info    Changed items: 0
[reg-suit] info    New items: 0
[reg-suit] info    Deleted items: 0
[reg-suit] info    Passed items: 1
[reg-suit] info The current snapshot key: '■■■■■■■■■■■■■'
                                         ■ 0% | ETA: 0s | 0/7[reg-publish-s3-plugin] info Upload 7 files to visual-regression-test-2022.
 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 100% | ETA: 0s | 7/7
[reg-suit] info Published snapshot '■■■■■■■■■■■■■' successfully.
[reg-suit] info Report URL: https://visual-regression-test-2022.s3.amazonaws.com/■■■■■■■■■■■■■/index.html
[reg-notify-github-plugin] info Update status for ■■■■■■■■■■■■■ .
[reg-notify-github-plugin] info Comment to PR associated with main .
</code></pre>
</div><p>テストをパスしたので問題なしですね。<br>
初回のテストの場合、このスクリーンショットがS3に保存され、次のテストのときに正としてチェックがおこなわれます。</p>
<h3>
<a aria-hidden="true"></a> reg-suitのテスト</h3>
<p>今度は試しにCSSを変更して意図しないスタイルにしてみます。<br>
mainブランチからdevelopブランチを切って、そこに変更したCSSをコミットしてみます。<br>
Githubでdevelopからmainへのプルリクエスト（PR）を出して、もう一度スクリーンショットの撮影とテストを実行します。</p>
<div>
<div><span>zsh</span></div>
<pre><code>% npm run test
% npm run regression
</code></pre>
</div><p><img alt><br>
テストが失敗しました。<br>
差分があるということをPR上で通知してくれています。</p>
<p>this reportのリンクを踏んで詳細を確認してみます。</p>
<p><img alt><br>
CHANGED ITEMSとして<br>
差分が出ている箇所が赤く塗りつぶされています。</p>
<p><img alt><br>
<img alt><br>
5種類の方法で差分を比較することができるので<br>
どこでどんな差分が出ているのかがわかりやすいですね。</p>
<p>cssを修正して再挑戦してみます。<br>
<img alt><br>
今度は差分が出ませんでした。<br>
この状態になれば、意図しないスタイルの崩れは起こっていないのでマージしてOKの状態です。</p>
<p>ちなみに、差分が出た状態で現在の状態が正しければ、そのままマージすることで正しい画像が更新されて以後その画像が正となります。</p>
<h1>
<a aria-hidden="true"></a> まとめ</h1>
<p><strong>ビジュアルリグレッションテストはいいぞ</strong></p>
<p>やはり目視でチェックをしている以上、ミスや見落としは避けられないと思います。<br>
ツールを使ったチェックをすれば、予期せぬ不具合の検知や大量のページのチェックも可能になります。<br>
複数のCSSを読み込んでいたり、CSSの影響範囲が読めなくなっている混沌としたサイトの改修時など、古くから保守しているサイトほどこういったツールが役に立つと思います。</p>
<p>ぜひビジュアルリグレッションテストを導入してみて作業の効率化、品質の安定化に役立てていただければと思います。</p>
</div></div><span></span><a><span><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" height="20" width="20"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></span>GitHubで編集を提案</a><span></span><aside><div><a><img alt="roki_na" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>roki_na</a></div><div><p><span>フロントエンドエンジニアです。</span></p><div><span></span><a aria-label="@rokina" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@roki_na" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a><a aria-label="my-newgear.web.app" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="リンク"><path fill="currentColor" d="M9.6,23.9c-3.6,0-6.5-3-6.5-6.6c0-1.7,0.7-3.4,1.9-4.6l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5l-2.3,2.3 c-1.7,1.7-1.7,4.4,0,6.1s4.4,1.7,6.1,0l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5L14.3,22C13,23.2,11.4,23.9,9.6,23.9z  M10.6,17.5c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8c0.4-0.4,1.1-0.4,1.6,0c0.4,0.4,0.4,1.1,0,1.6l-5.8,5.8 C11.2,17.4,10.9,17.5,10.6,17.5z M18.9,16.9c-0.3,0-0.6-0.1-0.8-0.3c-0.4-0.4-0.4-1.1,0-1.6l2.3-2.3c1.7-1.7,1.7-4.4,0-6.1 c-1.7-1.7-4.4-1.7-6.1,0L12,8.9c-0.5,0.4-1.2,0.4-1.6-0.1c-0.4-0.4-0.4-1,0-1.5L12.7,5c2.6-2.6,6.7-2.6,9.2,0s2.6,6.7,0,9.2 l-2.3,2.4C19.4,16.8,19.1,16.9,18.9,16.9z"></path></svg></a></div></div></div></aside><span></span></div></div><div><div></div></div></section>

見た目の比較を行うテストである。

ユーザーの操作を記録するテストである。

サーバーの応答時間を測定するテストである。

データベースのクエリ性能を評価するテストである。

Webテストと自動化を行うフレームワークである。

データベースの管理を行うツールである。

ネットワークトラフィックを監視するツールである。

APIのドキュメントを生成するツールである。

ビジュアルリグレッションテストのためのツールである。

データベースのバックアップを行うツールである。

ユーザーインターフェースのデザインを行うツールである。

ネットワークのセキュリティを強化するツールである。

パブリックアクセスの設定に注意が必要である。

必ずプライベートバケットを使用しなければならない。

S3のバケット名は必ず英語でなければならない。

予期せぬ不具合の検知や大量のページのチェックが可能になる。

手動でのテストが完全に不要になる。

全てのバグを自動的に修正してくれる。

テストの実行時間が必ず短縮される。