WordPressでビジュアル回帰テストを簡単に行う方法

先週、複数のWordPressサイトを管理している友人からパニック状態の電話があった。定期的なプラグインの更新で、彼のクライアントのナビゲーションメニューが壊れてしまったのだが、カスタマイザーからクレームが来るまで気づかなかったという。

これは私が数え切れないほど見てきた一般的な問題であり、WordPressサイトオーナーにとって視覚的回帰テストが非常に重要な理由でもある。

ビジュアル回帰テストは複雑に聞こえるかもしれません。しかし、実際には、手作業によるチェックの時間を節約し、恥ずかしいレイアウトの問題を防ぐことができるシンプルなソリューションです。

通常、ページのスクリーンショットの前後を自動的に比較することで機能します。これにより、サイトの外観を崩すような小さな変更もキャッチすることができます。🔍

このガイドでは、WordPressサイトでビジュアル回帰テストを行う方法を紹介します。数多くのツールや方法をテストした結果、コーディングの知識や技術的な専門知識を必要としない、最も信頼性の高いソリューションを見つけました。

ビジュアル回帰テストとは何か、なぜ重要なのか？🤔

WordPressコアの更新、新しいプラグイン、テーマの変更、ちょっとしたコードの調整など、サイトを更新するたびにフロントエンドの何かがずれてしまう可能性があります。

例えば、ボタンが消えたり、レイアウトが崩れたり、商品画像が正しく読み込まれなくなったりします。

問題は何か？このような視覚的なバグは、問い合わせフォームやデザインフィードバックアンケートを通じて訪問者から指摘されるまで気づかれないことが多い。

その時すでに、サイトのユーザー体験へのダメージは終わっているかもしれない。

そこで視覚的回帰テストの出番となる。

やり方は簡単で、更新前と更新後のページのスナップショットを撮り、それを見比べて何か変わったところがないか見つけるのだ。

また、ステージングサイトでテストしている場合（私たちはこれを推奨する）、本番前に安全に更新や比較を行い、視覚的な問題を発見することができる。

新規: いいニュースだ。手動でやる必要はない。

VRTs、Percy、BackstopJSのようなビジュアル・リグレッション・テスト・ツールを使用すれば、スクリーンショットの比較を自動化し、異なる画面サイズでのサイトの見え方をチェックすることができます。

なぜWordPressユーザーにとって重要なのでしょうか？

WordPressサイトを管理しているなら、ビジュアル回帰テストは時間を節約するセーフティネットです。更新後にすべてのページをクリックする代わりに、このツールは何が変更されたのか、そしてそれが修正する必要があるものなのかを視覚的にレポートしてくれます。

複数のWordPressサイトで更新作業を行っている代理店、クライアントのサイトを管理しているフリーランサー、商品や購入手続きをそのままのページで確認したいオンラインストアのオーナーなど、さまざまな場面で特に役立ちます。

つまり、ビジュアル回帰テストは、イライラするような驚きを避け、時間を節約し、WordPressサイトをスムーズに運営するのに役立ちます。

ということで、WordPressでビジュアル回帰テストを簡単に行う方法を紹介します。このガイドで取り上げるすべてのステップを簡単に説明します：

ステップ1：Visual Regression Testingプラグインのインストールと有効化

このチュートリアルでは、VRTsプラグインを使用します。VRTsプラグインは初心者に優しく、ビジュアル回帰テストにとても使いやすいからです。レイアウトのずれ、ボタンの欠落、更新後の要素の破損など、VRTsを使えば早期に発見することができます。

仕組みはこうだ：プラグインは選択したページのスクリーンショットを撮ります。そして、プラグインの更新やテーマの調整など、サイトに変更を加えた後に、手動で比較をトリガーしたり、自動的に実行するようにスケジュールを設定することができます。

その後、プラグインは「変更前」と「変更後」のスクリーンショットを並べて比較し、視覚的な違いを強調表示します。

すべてのページを手作業でチェックする代わりに、何が変更されたのか、何か問題があるのかを視覚的に素早くレポートすることができる。

プラグインをインストールするには、まずVRTsのサイトにアクセスし、「無料で始める」ボタンをクリックしてプランにサインアップする必要がある。

その後、いずれかのプランを選択することができます。無料プランでは、1つのドメインで1日3ページまでのテストが可能で、毎日のテストをスケジュールすることができます。

一方、有料プランでは、より多くのページをテストし、手動テストを実行し、WordPressコア、プラグイン、テーマの更新後に自動的にビジュアル回帰テストを実行することができます。

ご希望のプランの下にある「今すぐ購入」または「今すぐインストール」をクリックしてください。

その後、指示に従ってVRTsのサイトでアカウントを登録し、支払い情報を追加する。

お支払いが完了すると、VRTsのダッシュボードに移動し、プラグインを.zipファイルとしてダウンロードすることができます。

次に、プラグイン ” プラグインを追加に向かい、’プラグインのアップロード’ボタンをクリックしてください。ここから、先ほどダウンロードしたVRTsプラグイン.zipファイルを選択できます。

プラグインをインストールしたら、必ず有効化してください。詳しくは、WordPressプラグインのインストール方法をご覧ください。

ステップ2：VRTsプラグインの設定

プラグインを有効化したら、ビジュアル回帰テストを実行するタイミングを設定しましょう。

WordPress管理メニューの VRTs ” Settingsにアクセスしてください。

中に入ったら、”Triggers “セクションまでスクロールダウンすることができます – ここでは、自動的にスナップショットを取って比較するタイミングをプラグインに指示します。

利用可能なオプションは以下の通り：

• Run Tests every 24 hours(Free) – これは初期設定です。VRTは、選択した投稿またはページを1日1回自動的にチェックし、視覚的な変化を確認します。
• WordPressやプラグインの更新後にテストを実行（Pro） – 更新によって発生するレイアウトの問題を、更新が発生した時点ですぐにキャッチするのに最適な機能です。
• お気に入りのアプリでテストを実行（Pro） – Webhookを使用して、VRTを外部ツールやワークフローと接続します。
• オンデマンドでテストを実行(Pro) –WordPress ダッシュボードから直接、必要なときに手動でテストを実行できます。

ワークフロー（またはライセンス）に合ったトリガーを選択したら、ページ下部の「変更を保存」ボタンをクリックするだけです。

ステップ3：新規ページまたは投稿をテストに追加する

プラグインの設定が完了したら、ビジュアル回帰テストにどのページや投稿を含めるかを選択します。

それでは、ビジュアルテストを管理・実行する「テスト」タブに切り替えてみましょう。

ここから「新規追加」ボタンをクリックします。これでテストする投稿やページを選ぶことができます。

表示されるポップアップで、ビジュアル回帰テストを実行したいページまたは投稿日を選択する必要があります。

次に、「Add New Test（新規テストの追加）」をクリックし、選択を確認します。

VRTsプラグインは、選択した各ページの初期スナップショットを取得します。これは基本的に、投稿やページが今どのように見えるかの「前」のバージョンです。

テストをセットアップすると、ページを更新して最初のスナップショットをロードするよう指示が表示されます。そうしてください。

これで、テスト用に追加したページや投稿スナップショットへのリンクが見つかります。

また、’Test Status’が自動的に翌日の’Scheduled’に設定されていることもわかります。これは、VRTsの無料版が24時間のスケジュールでテストを実行するためです。

View Snapshot」リンクをクリックすると、初期スクリーンショットを確認できます。

このように新しいタブで開きます：

これで、サイトに必要な変更を加えることができる。そして、明日また戻ってきて、比較を見直し、予期せぬ視覚的な問題を発見してください。

ステップ4：見た目の違いをチェックする

テストが完了し、視覚的なバグが検出されると、VRTs ” Runsタブに通知アラートが表示されます。

中に入れば、変化を検出したランの上にマウスオーバーすることができる。

表示されたら「Show Details」リンクをクリックする。

次の画面では、ページのビフォー・アフターを並べて比較することができます。

プラグインは自動的に視覚的な違いを強調表示するので、すぐに見つけることができる：

• レイアウトの移動と要素のずれ：プラグインの更新やテーマの変更によって、ボタンの位置がずれたり、テキストが飛び跳ねたりするなど、デザインが変更された場合、VRTはフラグを立てます。
• 要素の欠落や破損：画像の欠落、CTAボタン、埋め込みフォームなど、VRTを使えば、突然消えてしまったものを簡単に見つけることができます。
• 予期せぬコンテンツの変更：このプラグインは、テキスト、リンク、画像の変更を警告するため、ユーザーによる不正な編集や公開エラーを未然に防ぐことができます。

画面中央のドラッグハンドルを使って新旧バージョンをスライドさせ、正確な変更点を視覚的に確認できる。

ステップ5：レビューと行動

ビジュアル・リグレッション・テストを実行した後、その結果に基づいてアクションを取ることができます。次にできることは次のとおりです：

• 手動でページを編集する：変更が小さい場合は、レイアウトの調整、要素の移動、足りない機能の追加など、ページを編集することで問題を直接修正することができます。
• バックアップに戻す：変更の規模が大きかったり、修正が難しい場合は、サイトのバックアップやバージョン履歴を使用して、ページを以前のバージョンに戻すことができます。これにより、サイトに問題を残さないようにすることができます。

WordPressでビジュアル回帰テストを実行するためのFAQ

もしあなたがビジュアル回帰テストを始めたばかりなら、あなたは一人ではありません。ここでは、WordPressユーザーや開発者からよく聞かれる質問に対する簡単な回答を紹介します。

スナップショットテストとビジュアル回帰テストの違いは何ですか？

スナップショットテストは、サイトのコードやコンテンツが変わらないかどうかをチェックするもので、あるべき状態のバックアップを保存しておくようなものです。

一方、ビジュアル回帰テストは、サイトの外観に焦点を当てます。更新前と更新後のスクリーンショットを比較し、レイアウトの変更、要素の欠落、またはすぐには気づかない視覚的なバグを検出します。

WordPressのビジュアル回帰テストに最適なツールは？

最も簡単な設定はVRTs – Visual Regression Testsプラグインです。初心者に優しく、コーディングの必要がなく、ダッシュボードから直接実行できる。さらに、超簡単に使える無料版もあります。

リグレッション・テストを手動で行う方法を教えてください。

手動リグレッションテストとは、新しいプラグインのインストールやテーマの更新などの変更を行った後に、サイトを見て主要なページをチェックすることです。

ホームページ、お問い合わせページ、購入手続き（ある場合）、カスタム・レイアウトを訪問し、すべてが見た目どおりに機能していることを確認します。これは効果的ですが、大規模なサイトや多忙なサイトを管理している場合、時間がかかることがあります。

回帰テストをスピードアップするには？

時間を節約する最善の方法は、自動化することです。VRTs – Visual Regression Testsのようなプラグインを使えば、重要なページのスナップショットを作成し、更新後に素早く比較することができます。

すべてのページを手動でクリックする必要はありません – プラグインがあなたのために視覚的なチェックを行います。

また、まずステージングサイトで更新をテストすることで、ライブサイトで問題を修正する必要がなくなります。

WordPressサイトのデザインをテストする最良の方法とは？

WordPressのデザインをテストするためのヒントをいくつかご紹介します：

• VRTs – Visual Regression Testsのようなビジュアル回帰ツールを使って、設計変更を発見してください。
• ステージングサイトでテーマやプラグインの更新をプレビューできます。
• 複数の画面サイズ（デスクトップ、タブレット、モバイル）でテストする。
• ブラウザー開発ツールを使って、異なるビューポートでサイトがどのように見えるかをチェックしましょう。
• ユーザーや顧客からのフィードバックを求める。

この投稿が、WordPressでビジュアル回帰テストを行う方法を学ぶのに役立てば幸いです。次に、WordPressでユーザー用のチャットルームを作成する方法と、サイト訪問者に質問するのに最適なユーザーエクスペリエンスフィードバックの質問についての投稿をご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.