はじめに

前回の記事「E2E自動テストを実装するためのロケーターの基礎」では、WebのE2E自動テストを実装するためのロケーターの指定の仕方についてご紹介しました。
今回は応用編(応用編というほどの内容ではありませんが)として、実際のプロダクトによくあるUIの操作方法をまとめてみました。
1回目のお題は「DatePicker」です。

テスト対象システム(SUT)

テスト自動化の学習用のサイト HOTEL PLANISPHERE を用います。

DatePickerの操作

日付を選択するときに出てくるカレンダーコントロールです。
テスト自動化においては、カレンダーから当日の日付を選びたい、翌日の日付を選びたいという場面があると思います。

SUTを操作して 宿泊予約 > 任意のプランのこのプランで予約 > 宿泊日をクリックしてみましょう。

今回のSUTはホテルの予約サイトなので、初期状態で翌日の日付が選択されています。
また、過去の日付で予約をすることはできないので、日付を固定し5日固定にするといったことは難しいです。

宿泊日としてテスト実施日の翌日を選ぶという手順があったとき、どのように実装すれば良いでしょうか。

使用しているツールや言語で日付を取得することができるのであれば、
a[data-date={日}](CSSセレクター)などで選択ができます。

もう一つのやり方として、UIの見た目が変化している場合、何らかのデザインを適用しているはずなので、
その違いに着目してUI要素を選択する方法があります。

現在選択されている14日と15日の要素をDeveloper Toolsで見比べてみましょう。

14日の要素

<td class="  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="5" data-year="2023">
    <a class="ui-state-default ui-state-active" href="#" aria-current="true" data-date="14">14</a>
</td>

14日の要素には、td要素のclass属性にui-datepicker-current-day、
a要素のclass属性にui-state-activeが付与されていることがわかります。

15日の要素

<td class=" " data-handler="selectDay" data-event="click" data-month="5" data-year="2023">
    <a class="ui-state-default" href="#" aria-current="false" data-date="15">15</a>
</td>

これを用いてDatePickerを開いた時の初期状態、つまり翌日の日付を選択することができます。
td.ui-datepicker-current-day(CSSセレクター)

今回のSUTでは確認できませんが、もし当日の日付を選択したい場合は、
よくあるDatePickerだと当日の日付のみ異なるデザインになっていたりするので、
当日の要素とそれ以外の要素を比較してみて、todayというキーワードがあったら、
そのキーワードを利用して要素を特定できないか検討してみましょう。

バックナンバー

E2E自動テストを実装するためのロケーターの基礎