【初心者向け】Seleniumをまわしてみよう④

  • 2017年4月10日
  • by 
【初心者向け】Seleniumをまわしてみよう④

こんにちは。M.Sです。
今回は初心者向けSelenium講座の第4回目です。早いものでこの連載を開始してから1カ月が経ちました。
<bitWave関連記事『【初心者向け】Seleniumをまわしてみよう①』>
<bitWave関連記事『【初心者向け】Seleniumをまわしてみよう②』>
<bitWave関連記事『【初心者向け】Seleniumをまわしてみよう③』>

第4回目は「便利な待機処理」と「スクリーンショットの撮り方」についてご紹介します。

まずは前回作成したSeleniumを一旦動かして、おさらいをしてみましょう。

前回のあらすじ

①Chrome起動
②ショーケース・ティービーのトップページを開く
③グローバルメニュー内の [お問い合わせ] をクリックする
④[お名前] 項目に任意の文字列を入力する
⑤ブラウザを閉じる
そして適度に待機処理を施しました。

ショーケース・ティービーのお問い合わせページにはフォームアシストが設定されています。
今回は入力ページのフォームアシストが正常に動作し、次の確認ページへ遷移可能な状態に
なるかどうかをテストしていきます。

<ソース(※macを使用しています)>

ほかにもあるぞ、便利な『待機処理』

前回は2種類の待機処理についてご説明しました。

1:ページ上に指定した要素が表示されるまで待機
2:指定した時間まで、ただひたすら待機

この2つだけでもほとんどの待機はまかなえてしまうのですが、今回はさらに効率的な待機処理についてご紹介します。

3:ページ上の指定した要素が非表示になるまで待機

フォームアシストには「送信ボタン制御」という機能を実装しています。これは必須項目の入力が完了するまで次ページへ遷移するための導線(大抵の場合はサブミットボタン)をふさぐというものです。

※左の画像にあるオレンジ色のオブジェクトが「送信ボタン制御」。必須項目がすべて解除された際に外れ、通常のサブミットボタン(画像右)が表示される
この「送信ボタン制御」が正常に働いている場合、必須項目の入力が完了した時に、フォームアシストが付与する送信ボタン(上記画像でいうオレンジ色のオブジェクト)が非表示になることを確認します。仮に非表示にならない場合は、Seleniumがエラー終了します。

4:要素のテキストが変更になるまで待機

上記の「送信ボタン制御」に合わせ、必須項目の入力が完了したことを示す「ナビゲーションウインドウ」の文言が変わっているかを確認します。

※ページのスクロールに合わせて追従する「ナビゲーションウインドウ」は入力状況に応じて、表示されるメッセージ内容を変えることができる。ちなみに画像左は入力項目が残っている状態、そして画像右が入力項目をすべて入力し終えた状態
「入力が完了しました。確認画面へお進みください。」という文言が完全一致したら正常とみなすつもりでいたのですが、Seleniumがエラーで止まりました。なぜ??

答えはカンタン、「入力が完了しました」の後の句読点が間違っていただけ……。
(「。」と「、」)です。。。
ねっ、このような些細なヒューマンエラーも発見できるんですよ!!

5:ページに要素が現れるまで待機(表示されているか不問)

かつて、Seleniumはページ上では見えていない要素に対して何かしらの処理をすることができないといったことを別記事でご紹介させていただきました。
<bitWave関連記事『Seleniumで「CodeMirror」のエディタに入力する方法』>

しかし「presenceOfElementLocated」は要素の可視状態に関係なく、HTMLに存在しているかを確認できます。
今回は「input type=”hidden”」のvalue値が一致しているかを確認するために利用しました。

検証作業のおもてなし『スクリーンショット』の撮り方

スクリーンショットはエビデンスを残すために撮ります。スクリーンショットを撮る作業を何度も行うのは面倒ですよね。

Seleniumであれば入力したり、クリックしたりといった繰り返し行う通常操作は当然のこと、スクリーンショットを撮ったりといった面倒な作業も自動で行ってくれるんですね。最初のコーディングこそ面倒ですが、1度コーディングしさえすれば使いまわせるので、Seleniumを使い続けるのであればあっという間に作業コストを焼却できます。

改めて便利だな~、Selenium。

さて、横道に逸れてしまいましたが、話をスクリーンショットに戻します。

事前準備として「SampleTestScreenshot」というフォルダを作成します。

先ほど用意した「SampleTestScreenshot」フォルダに「1.ショーケース・ティービーTopページ開く.png」というファイル名でスクリーンショットが保存されていきます。
ちなみにファイル名のアタマに数字を振っているのは、フォルダに保存されたとき番号順に保存され、後で確認しやすくなるためです。これは個人的なルールとして番号を振っているのですが、何気に便利ですのでお試しください。

それではさっそく、エビデンスを残したいテスト結果のスクリーンショットを撮っていきましょう!

今回は以下のようなフローでSeleniumを回してみました。

①Chrome起動
 ↓
②ショーケース・ティービーのトップページを開く(※スクリーンショットを撮る) 
 ↓
③グローバルメニュー内の [お問い合わせ] をクリックする
 ↓
④「input type=”hidden”」のname値「subject」のvalueが「お問い合わせフォーム」になるまで待機する
 ↓
⑤フォームアシストの「ナビゲーションウインドウ」が表示されるまで待機する
 ↓
⑥必須項目に入力する(※郵便番号一覧表示のスクリーンショットを撮る)
 ↓
⑦フォームアシストの「ナビゲーションウインドウ」の文言が変更されるまで待機する
 ↓
⑧フォームアシストの「送信ボタン制御」が解除されるまで待機する
 ↓
⑨ブラウザを閉じる

適度に待機処理(sleep)、スクロール処理を施しています。
待機処理(sleep)とスクロールは関数を作成しました。

検証工程で撮影したスクリーンショットが、ちゃんとフォルダに格納されていることが下の画像で確認ができます。

では、肝心のスクリーンショットの中身はどうなんでしょうか……


ファイル名「1.ショーケース・ティービーTopページ開く.png」
アクション①:
「ショーケース・ティービーのトップページを開く」より

ファイル名「2.郵便番号.png」

アクション⑥:
「必須項目に入力する」より

うん、バッチリ。きちんと撮れていますね。

今回は以上です。
次回は “メンテナンスしやすいコーディング方法” についてご説明します。
お楽しみに!

コメント