【新入社員ブログ】~3~ 「初心者向け!自動化テストツールmablでテストをつくってみた!事前準備編」

こんにちは!

夏の暑さも和らいで半袖のシャツでは肌寒く感じることが増えてきた9月の半ば、いかがお過ごしでしょうか。

今年はサンマが不漁だそうです。

新入社員シリーズも今回で3回目ですね。

今月もどうぞよろしくお願いします。

前回はmablってそもそもなんだっけ?という前提的なテーマでした。

今月は

1.簡単なダッシュボードの紹介

2.実際にテストをつくってみる

この2つについて書いていきます。

お手柔らかにお願いします。

※前回の記事でhairlogyのSTG環境でテストを作成していくとお伝えしましたが、

mabl sandboxという便利そうなものを発見したのでそちらを使用していくことにします。

1.ダッシュボード

まずこちら、ログインしたてほやほやの画面(ダッシュボード)です。

(※ログイン方法やその他事前準備等は過去の記事で紹介しているのでこちらを参考にしてください。)

ではまず、ざっとダッシュボードの中身を見ていきましょう。

ダッシュボードでは既に作成したテストの実行状況を確認できます。

また、画面左側に並んでいるナビゲーションバーから各ページに飛ぶことができます。

ダッシュボードに戻る

よくあるやつ

新しいテストケースの作成するページ

テスト結果の確認ページ

テスト実行の日時指定

これまでのテストケース一覧

テスト実行時に確認された事が報告されるページ

リンク切れが確認された場合や画面遷移にかかる時間が長かった場合など

テスト実行中に撮影されたスクショ一覧ページ

※mablはテスト実行中にスクリーンショットを自動取得しているのでここからテスト対象のビジュアルの確認等ができます。

テスト実行の分析結果を確認するページ

テスト実行の際に使用する各情報を登録・編集するページ

設定画面

と、まぁこんな感じです。

それぞれの詳しい中身についてはテスト作成・実行後に実際の結果を用いて見ていこうと思います。

2.テスト作成

2-1.事前準備

2-1-1.mablの構成を理解する

mablを使いこなしていくうえで構成要素を理解することは大変重要になってきます。

mablは上記のような構成です。

Workspace

Environment

App

Plan

Test

のようなツリー状になっています。

初期状態ではWorkspaceが与えられているだけの状態なのでまずは環境(Environment)の登録から始める必要があります。

環境登録が完了すればテスト対象となるWebアプリ(App)、必要であればプラン(Plan)の登録に進みます。

※今回はプランについては触れずに進めます。

そして任意の環境のWebアプリを指定してテストケースを作成していく、という流れになります。

2-1-2.EnvironmentとAppの登録

Environment・Appいずれもconfigurationから登録することができます。

初期状態のconfiguration画面です。

+Newを選択し、環境・アプリの登録を進めましょう

入力する内容は上記を参考にしてください。

Base URL入力欄下にエラーメッセージが出てますが、入力したURLが不適切な場合に出てくるものです。

入力値が適切な場合は

`Everything looks good! mabl’s cloud servers can connect to this environment.`

と表示されます。

すべて入力が完了したらSaveを選択してください。

個人的に感じた点は、

BaseURLに入れるURLはなんでもいいの!?

https://dev.hogehoge.jpとかhttps://stg.hogehoge.jpとかあるけど、どれ!?

Baseってなんだぁ?

Monitoring意味わからん。

の2点です。

BaseURLに関してですが、Baseという箇所は無視して問題ありません。

テスト対象のURLが 'https://dev.hogehoge.jp’ の場合、

プロトコルを’https://’、Base URLは’dev.hogehoge.jp’と入力します。

このとき、環境名を’dev環境’などとすると分かりやすいでしょう。

Monitoringに関してですがBasic認証の自動ログインです

なんでMonitoringなんだろう。。。分かる人教えてください。

Save後は以下のような画面に切り替わります。

環境・アプリを追加したい場合は

+New environment

+New application

から追加可能です。

3つの環境(dev・STG・Testing)と複数アプリを登録しました。

こんな感じになります。

今後はmabl sandboxをテスト対象としてテストケースを作っていきます。

お疲れ様です。ここまでで準備完了です。

あとは体力が許す限りテストを作っていくだけです。

2-2.テスト作成

New testを選択するとポップアップが表示され、ブラウザテストかAPIテストを行うか聞かれます。

今回はブラウザテストにします。

必要箇所を入力し、ページ下部のCreate testを選択します。

mablにはラベル機能があります。

ラベルをつけることで今後テストケースの数が増えてきたときに管理しやすくなります。

例えば、ブラウザテストには’browser’というラベル、APIテストには’API’とつけることで

テストの種類ごとにソートすることが可能です。

シンプルでよくある機能ですが使いこなせば非常に強力なものになると思います。

別タブが開いてmabl Trainerが起動すれば完了です。

以降、ステップを追加してテストケースを作っていくことになります。

ここから先は来月にさせてください。。。

けっこう疲れました。。。

続きから始めますのでmabl TrainerでSaveすることをお忘れなく…。

3.おわりに

いかがでしたでしょうか。

最小限の内容で進めてきたのであまりつまづくポイントはなかったと思います。

mablが威力を発揮できる適切な環境をつくるフェーズが一番タフで大切なんだろうと感じました。

テストケース作成自体は最初は手こずるだろうけど、調べればなんとかなりそう…

ヘルプページ充実してますし(先輩が教えてくれるし…)。

それでは、このあたりで失礼します。

明日から3連休です。週末は七輪でサンマ焼いて食べてきま~す。

皆さんよい週末を!

Posted by IMAMURAMai