画面の崩れやリンク切れを検知するには?

12月のある寒い日の、晴れた日の午後です。ソフトウェア開発チームは、ウェブアプリとマーケティングサイトのアップデートを終えたところです。あなたは快適なオフィスチェアに座りながら、不思議に思わずにはいられません。アップデートの結果、ユーザーエクスペリエンスや継続的なマーケティングキャンペーンに悪影響を与えるようなバグは起きていないだろうか?

マーケティングチームは、トライアルユーザーの獲得や新規顧客につながるランディングページにユーザーを誘導するための広告に、毎月何万、何十万円も費やしているのです。では、プロダクトやウェブサイトの更新後、すべてがうまくいっているかどうかをすばやく検証するにはどうしたらよいでしょうか。

A screenshot of Google search results for flights Boston to London with a green arrow pointing to the second result.

あなたのチームは、多くの自動化されたユニットテストと統合テストを実行しているので、CI/CDパイプラインとリリースプロセスでバグのあるままプロダクトをアップデートさせないために、それらのテストを信頼しています。さらに、アプリやウェブサイト全体の主要なユーザージャーニーを検証する自動化されたE2Eテストもあります。結局のところ、物事はすべてうまくいくに違いありません。心配する必要はないのです。

でも、ちょっと待ってください。顧客体験に悪影響を与える可能性のある画面の崩れなどのビジュアルの不具合がないことをどうやって確認するのでしょうか?機能が正常に動作しているように見えても、リンク切れなどが発生している場合はどうでしょう。例えば、ページ上で間違った画像を表示していたり、主要なボタンが他の要素によって隠されていたりするとしたらどうでしょう?

画面表示が崩れているページを訪れたり、どこにもリンクしていないリンクをクリックしたときの不快感は、誰もが知っていることでしょう。さらに、リンク切れはSEOに悪影響を及ぼし、Googleなどの検索エンジンでのウェブサイトのランキングに悪影響を及ぼします。

A screenshot showing a broken link to a Jet Blue page.

では、視覚的な変化とリンク切れの共通点は何でしょうか?それはユーザーエクスペリエンスの低下 、つまり顧客を満足させる機会の損失です。

mablでは、顧客視点でのユーザージャーニーと、 マーケティングウェブサイト、ウェブアプリ、ヘルプドキュメント、 PDFのダウンロード、Eメールの送信、その他のタッチポイントにまたがる総合的なユーザエクスペリエンスを包括的にテストすることを非常に重要視しています。そこで、ウェブアプリケーションやマーケティングウェブサイトの主要なページのビジュアルスモークテストを5分以内に作成するお手伝いをさせていただきます。

ここでまず、ビジュアルスモークテストとはいったい何かを説明します。

これは、インテリジェントなE2Eテストソリューションであるmablでのテスト例です。ページのURLのリストを受け取り、各ページを訪問して、SafariやInternet Explorer 11などの主要なブラウザで、正しく読み込まれているか、視覚的変化、リンク切れ、JavaScriptエラー、ネットワークアクティビティに問題がないかをチェックします。 

A screenshot of mabl visual smoke tests that passed.

このようなテストを作成するために必要なのは、URLのリストを mablに登録するだけで、mablが全ての作業を自動的に行います。コードを書いたり、技術的なスキルセットを持つ必要はありません。また、それらのテストは、ボタンをクリックするだけで、スケジュール通りにチームのCI/CDビルドプロセスの一部として実行することができます。 

A gif showing how you can run smoke tests with a click of a button, on schedule, and as part of the CI/CD build process.

テストはmablクラウドで実行され、mablが指定されたブラウザーの視覚的変化、リンク切れ、JavaScriptエラーを検出すると、mablアプリでインサイト通知が届き、設定されていればSlackチャンネルへも通知が届きます。

A screenshot showing links broken and new visual changes after a test.

無料トライアルに登録し、mablのダッシュボードから「新規」ボタンをクリックしてビジュアルスモークテストを選択してください。もっと詳しく知りたい方は、ヘルプドキュメントをご覧ください。常に高品質なユーザーエクスペリエンスを提供するためにお役に立てることを願っています。何かお困りのことがありましたら、support@mabl.comまでご一報ください。