ウェブサイト検索

WordPress 用の 5 つのビジュアル回帰テスト ツール

WordPress Web サイトではユーザー エクスペリエンス (UX) を優先することが重要です。そうしないと、直帰率が高くなり、現場での滞在時間が短くなる可能性があります。ただし、自分自身が訪問者にならない限り、ユーザーが直面している問題を特定するのは難しい場合があります。

幸いなことに、ビジュアル回帰テスト (VRT) を使用すると、フロントエンドの問題を特定できます。さらに良いことに、一部の VRT ツールは完全に初心者向けで、WordPress とシームレスに統合されます。

この投稿では、ビジュアル回帰テストについて詳しく見ていきます。次に、WordPress Web サイトに最適な 5 つのツールを確認します。始めましょう！

ビジュアル回帰テストの概要

ビジュアル回帰テスト (VRT) は、サイト上の視覚的な変更、問題、バグを検出します。一般的な機能テストのほとんどでは視覚的なエラーの微妙な部分を特定できないため、これは不可欠です。

ビジュアル回帰テストは、Web サイトのスキャンを実行することによって機能します。ソフトウェアはすべての Web ページのスクリーンショットを取得し、定期的に追加の画像を作成します。このようにして、ツールはスクリーンショットを比較し、発生した変更を特定できます。

VRT が検出できるエラーには、次のようなさまざまなタイプがあります。

  • コンテンツが正しく読み込まれないなどのサーバーの問題
  • デザイン要素の位置ずれや重複を引き起こす可能性のあるコード変更
  • 正しく取得されない API 統合
  • 異なる画面サイズ間で調整されないレイアウト
  • サイトに問題を残す問題のあるリンクや更新など、Web サイト全体に損害を与える可能性のある重大な問題

WordPress サイトに変更を加えると (WordPress コアの更新やテーマやプラグインの更新を含む)、エラーが発生するリスクがあります。 VRT がなければ、Web サイトの訪問者になるか、すべてのページを手動でスキャンすることなく、これらの問題を知る方法はありません。したがって、この種のツールは UX を維持するのに役立ちます。

ビジュアル回帰ツールで何を探すべきか

Web サイトにビジュアル回帰ツールを追加する場合は、考慮すべき重要な要素がいくつかあります。

  • プログラミング スキル: 一部のビジュアル回帰ツールでは、サーバー ソフトウェアのインストールやコード化されたテスト スクリプトの作成など、高度な技術的経験が必要です。一方で、より初心者に優しい自動ツールも見つかります。
  • 誤検知: 最高の VRT ツールは、サイト上の視覚的なバグと無害な変更を区別できます。過度に単純なソフトウェアはすべての変更にフラグを立てる可能性があり、ふるい分けるのに時間がかかる可能性があります。
  • コンテンツ: VRT ツールを選択する際に考慮すべき最も重要な要素の 1 つは、インターフェースが変更される頻度です。たとえば、静的な Web サイトは通常、単純なツールで実現できます。一方、動的コンテンツは、高度な機能を備えたツールの方が適している可能性があります。
  • オープンソース: オープンソース ツールは無料でダウンロードして変更できますが、問題が発生した場合は実践的なサポート チームにアクセスできません。
  • 価格: スケーラビリティに対応できない長期契約に縛られないよう注意してください。さらに、サイトで正常に実行するためにプランに十分なリソースがあることを確認することが重要です。

上記の要素を考慮すると、ニーズに最適なビジュアル回帰テスト ツールが見つかる可能性が高くなります。

ビジュアル回帰テストについて詳しく理解できたところで、WordPress に最適な VRT ツールを 5 つ紹介します。

1. VRT – 視覚的回帰テスト

VRT – Visual Regression Tests は、WordPress Web サイト向けに特別に設計された強力で使いやすいツールです。このリストの他のオプションは外部サービスと技術的な経験を必要としますが、ビジュアル回帰テストは既存の Web サイトにシームレスに適合します。 WordPress ダッシュボードからすべてを制御できるようになります。

さらに良いことに、このツールは自動化をサポートしています。したがって、コーディングのスキルや継続的なメンテナンスは必要ありません。インストールすると、Visual Regression Tests はすぐに機能するようになるため、初心者にとって理想的です。

ビジュアル回帰テストは、サイトでアクティブ化された瞬間から参照スナップショットを取得することで機能します。その後、プラグインは毎日、およびコンテンツを更新するたびに写真を撮影します。不一致がある場合は電子メール通知が届き、プラグインの [アラート] セクションで変更を確認できます。

主な特長

  • インスタントメールアラートで安心します。
  • GDPR への準拠により、訪問者のプライバシーと安全が確保されます。
  • 分割画面モードと並列モードを切り替えて、スクリーンショットを簡単に比較できます。

価格

Visual Regression Tests プラグインは無料で使用できます。あるいは、より多くのテストのロックを解除するには、月額 39 ドルからの有料プランを始めてください。

2. スクリーンスター

Screenster は、UI の視覚的な変化を検出する多目的テスト ツールです。 Screenster は視覚的な回帰テスト以外にも、他のサービスも提供しています。たとえば、このツールはユーザーがページを操作するときにサイトを記録し、記録されたテストを再実行し、Web アクションの最適化に役立ちます。

これに加えて、より詳細な構成設定にアクセスできるようになります。特定の UI 要素を比較から除外したり、ツールが検出したすべての変更を承認したりできます。

さらに良いことに、このツールは他の他のツールよりも高速に動作し、テストの開発に必要な時間は推定 5 ～ 30 分、テストを 1 か月間維持するのに 3 時間かかります。

ただし、Screenster は学習に時間がかかります。まず、Screenster のクラウド上でテストを実行するか、ローカル環境に Screenster Server をインストールする必要があるため、サーバーに関するある程度の知識が必要です。したがって、初心者にとっては最良の選択肢ではない可能性があります。

主な特長

  • Web サイトのニーズに応じてテストを自動化し、スケジュールを設定します。
  • ローカル環境とオフライン環境でテストを実行します。
  • チーム ポータルを使用してチーム メンバーと共同作業します。

価格

Screenster は無料で使い始めることも、月額 25 ドルからアップグレードすることもできます。

3. パーシー

Percy は、BrowserStack によって作成された自動ビジュアル テスト ツールです。これは人気のあるオプションであり、Microsoft、Expedia、Twitter などのブランドから信頼されています。 Percy を使用してスクリーンショットをキャプチャし、ベースラインとピクセルごとに比較できます。その間、UI の変更やバグが強調表示されます。

Percy の最も優れた機能の 1 つは、コラボレーション用に構築されていることです。このプラットフォームは、チームのディスカッションを容易にするコメントセクションを備えた視覚的なレビューを生成します。さらに、チームメンバー全員が最新情報を受け取るための通知を受け取ります。

さらに、この VRT ツールは、現在のワークフローにうまく適合するように設計されています。したがって、Percy をテスト自動化フレームワークと統合したり、アプリケーション内に直接実装したりできます。

主な特長

  • ページの特定の領域を無視し、アニメーションをフリーズして誤検知を最小限に抑えることを選択します。
  • モバイルとデスクトップの異なるブラウザーとプラットフォームで同じページをレンダリングします。
  • GDPR および CCPA 準拠のメリットを享受できます。

価格

Percy の無料バージョンは利用可能ですが、月額 149 ドルからアップグレードすることもできます。

4.レイス

Wraith は、BBC が開発した Web ページのスクリーンショット比較ツールです。ヘッドレス ブラウザ、Imagemagick、Ruby を使用して、フロントエンドの変更に対する迅速なフィードバックを可能にします。これらの機能は UI のバグを減らすのに役立ちます。さらに、ページ全体または特定の CSS セレクターを選択して、対象を絞ったテストを生成できます。

ただし、Wraith は経験の浅いユーザーにとっては少し複雑になる可能性があり、インストールとスクリプトの知識が必要です。画像比較を含む <i>diff PNG ファイルを含む <i>gallery.html パッケージを受け取ります。さらに、変更されたピクセルの割合を通知する <i>data.txt ファイルが送信されます。

主な特長

  • 直接比較、履歴モード、Web サイト クローリングのスパイダー モードの 3 つのオプションを切り替えます。
  • キャプチャ モードを使用して動的コンテンツを比較します。
  • ライブ Web サイトからテストおよびステージング サイトまで、さまざまな環境で Wraith を使用します。

価格

Wraith はオープンソースで完全に無料です。

5.バックストップJS

BackstopJS は、Web アプリケーションの視覚的な回帰テストを提供するオープンソース ツールです。これは、さまざまな画面サイズで Web ページのスクリーンショットを作成することで機能します。また、Chrome ヘッドレス レンダリング、CLI レポート、シナリオ表示フィルタリングも含まれています。

BackstopJS は非常に使いやすいですが、ある程度の技術的知識が必要です。まず、インストールとスクリプトについて理解する必要があります。 BackstopJS は Resemble.js、CasperJS、および PhantomJS を使用します。

このツールの使用を開始するには、URL、Cookie、画面サイズ、インタラクションなどを指定できる新しい BackstopJS インスタンスをセットアップします。次に、BackstopJS は一連のテストを作成し、それらを参照スクリーンショットと比較します。

変更が発生した場合は、視覚的なレポートで通知されます。テストの結果が良好であれば、テストを承認して参照ファイルを最新バージョンに置き換えることができます。

主な特長

  • Playwright または Puppeteer スクリプトとの対話をシミュレートします。
  • BackstopJS をグローバルまたはローカルでスタンドアロン パッケージ アプリとして実行します。
  • 統合された Docker レンダリングを利用して、クロスプラットフォームのレンダリングの問題を排除します。

価格

BackstopJS はオープンソースで無料です。

機能的でユーザーフレンドリーな WordPress サイトを維持することは重要ですが、多くのテスト ツールではサイトの視覚的な変更を検出できません。幸いなことに、視覚的な回帰テストを使用すると、サーバーの問題、コードの変更、API の問題を簡単に発見できます。

WordPress のビジュアル回帰テスト ツールの使用について質問がありますか?以下のコメントセクションでお知らせください。