Testing)」という機能を持っています。機能のテストが「アプリの動き」をチェックするものであれば、ビジュアルテスティングは「アプリの見た目」をチェックを担当してくれます。スポンサーリンクビジュアルテスティング概要mablは機械学習を使って、テスト対象アプリのビジュアルモデルを構築します。表示のたびに変わっていいバナーや、動きのあるビデオ、アニメーションといった変わってしまう部分を除いて、見た目が大きく変わった部分だけを検知してくれます。たくさんの顧客が、本番環境のパフォーマンスモニタリングにもmablを活用しています。Cloud)で動作するため、顧客の本番環境に影響を与えずに実行できるからです。以下のようにビジュアルテスティングを活用できます。意図した変更であればベースライン(ビジュアルベースラインと呼んでいる)となるビジュアルモデルの更新ビジュアルベースラインの再構築mablはテストが作られたり、更新されたり、削除されたりするたびにビジュアルモデルを自動更新します。Changeをご検知しないようにしています。Changeを検知してもテストをエラーにしたりせず、Warningとして通知してくれます。見た目の差分はテスト結果から確認でき、Insightsに通知を作成し、重要な変更だけに気がつけるような仕組みになっています。Planごとに設定できます。普通に使うのであれば、デフォルトでOnにしておくといい気がします。overviewビジュアルエクスプローラーの活用Explorerメニューからビジュアルエクスプローラーを確認できます。mablが自動取得したスクリーンショットが並んでいるはずです。画像をクリックすると、特定のスクリーンショットを確認できます。この画面からは以下のような点をチェックできます。Planを使ってテスト実行をはじめると、mablは自動的にスクリーンショットを取得していきます。それらは、クリックしたとき、入力したときなどのステップごとに撮影されるため、テスト結果として活用できます。mablは約10回ぐらいのテスト実行によって、ビジュアルベースラインモデルを構築していきます。changeは自動検知されます。detected」と表示され、差分をスクリーンショットで確認できます。たしかに、検知はしていますが、テストとしては成功になってますねー。steps」から実行可能です。」を活用して、デプロイされるごと(つまり画面が変わる可能性が高いタイミングごと)に再構築するのも手です。以下のような設定が可能です。オンにすると対象のテストごとにモデル構築を行うようになります。よって全スクリーンショットを撮影し、全差分が見えるようになるみたいです。rebaselining見た目の問題をレポートするJIRAのようなIssueトラッキングシステムと連携できるよとのこと。Slack通知だと流れちゃいますが、こういう連携があれば確認作業の効率化につながりますね。issuesビジュアルスモークテストビジュアルスモークテストによって、以下のような確認をmablにまかせられます。changeの確認リンク切れの確認JSエラーの確認ネットワーク通信の確認ビジュアルスモークテストは、他のテストと比較して以下の点が異なります。changeを検知できます。changeを確認し、ベースラインを更新、予期せぬ変更がないかどうかを見分けるスマートなワークフローを構築できるはずですリンク切れはユーザにとって不利益であるのと同時に、Googleなどの検索結果にも影響が出てしまいますが、ビジュアルスモークテストによってそれらを回避できるはずです。ビジュアルスモークテストは、STGや本番といった環境を超えて、継続的なテスト実行につながっていきます。以下のような事例が考えられます。マーケティング用ウェブサイトの主要なページの確認トライアル依頼、デモリクエスト、資料のダウンロードといった、広告を通したランディングページの確認Webアプリにおけるログイン、ユーザ設定といった機能ページの確認さらに、以下のような流れで実装まですすめられるはずです。analyticsなどのページ分析サービスを活用して主要ページを特定するそれらのページのURL一覧を使って、ビジュアルスモークテストを作成する定期実行する。デプロイごとの実行でも良し結果を確認してOK、NGを判断していく。NGなものにはフラグを立てていく問題があればキャプチャを撮るなどして問題を特定していくmablだと簡単にビジュアルスモークテストを作成できます。確認したいURLを設定するだけで、mablは自動的にステップを構築します。test」をクリックするだけです。mablは各URLに移動して以下の確認を行います。changeを活用するには、最低でも2回はテスト実行しなければなりません。URL一覧を更新したら、新しくベースラインを作るために数回の実行が必要になります。Insights「Insight」メニューから以下の情報を確認できるようになります。changeの検知リンク切れJSエラーこれらをSlackなどに通知することも可能です。ビジュアルスモークテストの実行結果を見ると、すべてのページのサムネイル画像を確認できます。サムネイルをクリックすれば、フルスクリーンショットも確認可能です。changeの数が表示されるようになります。changeがあった画面には、サムネイルに黄色いカメラアイコンが表示されます。side-by-sideで比較表示できますし、以下のようなアクションがとれます。changeを受け入れる判断をする(Accept)無視する(Dismiss)修正しなければならないと判断してフラグを立てるフラグを立てた場合は、リンク切れ数やキャプチャなどをJIRA登録したり、CSVで取得して貼り付けたりできます。testsまとめビジュアルテスティングはmabl、というか最近のテスト自動化プラットフォームサービスの主要機能とも言えます。「画面崩れ検知」は随分昔から続く問題の1つであり、がんばれば実装も可能でしょうが、実装とメンテコストを考えると、サービスを使ったほうが安い時代になってきました。ソフトウェア開発の実現に向けて奮闘中。週末に娘と息子とお昼寝しながら世界のビーチや離島を旅する夢を見る。お仕事募集中!daipresentsをフォローする857翻訳しました。赤ちゃんの肌にやさしいおしりふき10種類を夫婦でガチ比較してみた2015.08.252020.01.082016年アジアベストビーチに選ばれたミャンマーのガパリに行ってきた。t("").html(tocplus.visibility_show).text():default:t(this).html(tocplus.visibility_hide),t.cookie&&(o?t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"}):t.cookie("tocplus_hidetoc",null,{path:"/"})),t("#toc_container").css("width",tocplus.width).removeClass("contracted"),t("ul.toc_list").show("fast")}})}}});タイトルとURLをコピーしました。