ビジュアルスモークテスト

mablを使用すると、各種ブラウザーで重要なWebアプリケーションやWebサイトのページを自動的にチェックし、ページが正しく読み込まれるかどうか、視覚的変化、リンク切れ、JavaScriptのエラー、ネットワークアクティビティの問題を確認するスモークテストを簡単に作成できます。これらのテストは、mablでページのURLを指定するだけで簡単に作成できます。mablで自動生成され、テストを実行して結果を確認します。

テストカバレッジを向上させ、5分足らずで結果を確認することができます。

ビジュアルスモークテストの結果のイメージビジュアルスモークテストの結果のイメージ

ビジュアルスモークテストの結果のイメージ

ビジュアルスモークテストと他のmablテストの違いは、以下のとおりです。

  • 他のテストではChromeのみで視覚的変化を検出しますが、ビジュアルスモークテストでは、テストが実行される各ブラウザーで視覚的変化を検出します。
  • すべてをクローリングするのではなく、指定された各ページでリンク切れをチェックします。
  • より詳細なワークフローを利用して、設定した各ブラウザータイプでの視覚的変化の確認、ベースラインの更新、リグレッションのフラグ付けを行うことができます。

リンク切れがあるとユーザーエクスペリエンスが損なわれるだけでなく、検索エンジン (GoogleやBingなど) のランキングにも悪影響が生じる可能性があります。マーケティングWebサイトは、アプリケーションや「製品のエクスペリエンス全体」の基本的な要素であるため、特に注意が必要です。

ユースケース

ビジュアルスモークテストは、ステージング環境および本番環境を対象とした継続的テストで以下の検証を行うのに適しています。

  • マーケティングWebサイトの顧客が参照する主要なページ (ホームページ、製品概要、価格など)
  • 広告を介してアクセスされるマーケティングWebサイトの主要なランディングページ (試用の申請、デモの依頼、ホワイトペーパーのダウンロードなど)
  • Webアプリケーションの主要なページ (サインアップ、ログイン、ユーザー設定など)

ワークフロー

  • 分析に基づいて、WebアプリケーションやWebサイトの主要なページを特定します。
  • 特定したページのURLに対して、mablアプリケーションでビジュアルスモークテストを作成します。
  • 作成したテストをスケジュールやデプロイイベントに基づいて手動で実行します。
  • テスト結果を確認し、視覚的変化を承認、無視、またはフラグ付けします。
  • テスト対象のアプリケーションやWebサイトの問題を把握して対処します。

ビジュアルスモークテストの作成

ビジュアルスモークテストの作成は簡単で、mabl Trainerを使用する必要はありません。ジュアルスモークテストを新規に作成するには、以下の2つの場所のボタンをクリックします。

  • ダッシュボードページの [New] ボタン
  • [Tests] ページの [New test] ボタンオプション

URLを指定するためのフォームが表示されます。このフォームでは、特定のテストプランでテストするページのURLを最大50個指定できます。このフォームに記入してテストを作成します。

📘

URLリストの簡単な作成方法

Chromeのブックマークマネージャーでは、ブックマークを複数選択し、これらをコピーしてテストに貼り付けることができます。

ビジュアルスモークテストの作成フォームビジュアルスモークテストの作成フォーム

ビジュアルスモークテストの作成フォーム

テスト作成フォームの記入が完了すると、指定したページのURLのリストと、mablで生成されたテストステップの説明が表示されます。ページのURLとその他のテストプロパティ (説明やラベルなど) は編集できますが、テストステップはmablのアルゴリズムに基づいて自動生成されたものですので編集することはできません。

ビジュアルスモークテストの詳細ビジュアルスモークテストの詳細

ビジュアルスモークテストの詳細

*** URLでの変数の使用
ステージング環境や本番環境などの複数の環境で同じテストを実行する場合は、システム変数{{@web.defaults.url}}を使用してURLを作成できます。このシステム変数は、mablで環境用に設定したベースURLに置き換えられます。

たとえば、URLに{{@web.defaults.url}}/productと入力した場合、ステージング環境でテストを実行する際にはhttps://staging.mabl.com/productというURLになり、本番環境で実行する際にはhttps://mabl.com/productというURLになります。

ビジュアルスモークテストの実行

ビジュアルスモークテストを実行するには、テストの詳細ページで [RUN TEST] ボタンを使用するか、mablの他のテストと同じようにプランの一部として実行します。テストを初めて実行する場合、mablは各ページのURLにアクセスして、以下の処理を行います。

  • 正しく読み込まれることを確認します (ステータスコード200の応答)。
  • ページのスクリーンショットを取得して、視覚的変化の固定ベースラインを作成します。
  • ページ上のリンク切れやJavaScriptのエラーをチェックします。
  • 診断用にDOMスナップショットとページのすべてのネットワークアクティビティを取得します。

1回目のテストで視覚的変化のベースラインを作成するため、視覚的変化を確認するには、少なくとも2回テストを実行する必要があります。これはページのURLを更新したときも同様です。mablでは、更新後のURLに対して視覚的変化のベースラインを新たに作成する必要があります。

インサイト

ビジュアルスモークテストを実行すると、以下のインサイトが表示されます。

  • 視覚的変化の検出
  • リンク切れ
  • JavaScriptのエラー

これらのインサイトは、mablアプリケーションの [Insights] セクションに表示されます。また、設定している場合は、Slackにも表示されます。

🚧

ビジュアルスモークテストの制限事項

  • ビューポートを変更することはできません。現在、ビューポートはすべてのブラウザーで1366 x 3072に設定されています。
  • 現在、ビジュアルスモークテストでは、動的コンテンツ領域を識別する視覚的変化の学習はサポートされていません。
  • また、視覚的変化の検出で無視する領域を手動で指定することは現在できません。

これらの制限事項の中で優先的に対処してほしい項目がある場合や、追加機能に関する要望がある場合は、feedback.mabl.comからお寄せください。

ビジュアルスモークテストの結果の確認

ビジュアルスモークテストの結果を表示する場合、すべてのページのスクリーンショットのサムネイルが左側に表示され、選択したページの完全なスクリーンショットが右側に表示されます。また、検出された視覚的変化とリンク切れの数が上部に表示されます。

ビジュアルスモークテストの結果ビジュアルスモークテストの結果

ビジュアルスモークテストの結果

視覚的変化のある各ページのサムネイルには、黄色のカメラアイコンが表示されます。これをクリックすると、並べて表示して視覚的変化を確認することができます。視覚的変化のある現在のスクリーンショットで次のいずれかのアクションを実行します。

  • 承認: これが今後のテストの新しいベースラインになります。
  • 無視: 承認やフラグ付けを行わずに確認済みとして指定します。
  • フラグ付け: 修正を行うため、ビジュアルリグレッションとしてフラグ付けします。

課題の取り込み

視覚的変化をリグレッションとしてフラグ付けすると、このフラグはテスト実行の一部として保持されます。このテスト実行へのリンクをソフトウェア開発チームと共有すると、ソフトウェア開発チームはこの結果を確認できます。また、Jiraとのインテグレーションを設定している場合は、テスト結果ページから直接Jiraにリグレッションの課題を取り込むことができます。

リンク切れのリストを取得するには、リンク切れの数をクリックし、CSVファイル形式のレポートをダウンロードします。


Did this page help you?