Ruby on Rails開発のインターン (Day 29)

こんにちは、皆さん!

今日はなぜCapybaraテストでドロップダウンをクリックできないのかを調べるところからスタート。それと、どうやって効率的にテスト用のデータを作るかだな。今日はどのくらいできるのか見てみよう。


  • トピック:
  1. 僕がどうやってCapybaraテストからドロップダウンをクリックしようとしたのか


  • 疑問:
  1. なんでわざわざブラウザではドロップダウンの形式を変えてくるのだろうか?


  • 問題:
  1. Capybaraテストからドロップダウンをクリックすることができない
  2. コンソールで作ったデータがテスト時に消えている


  • 学習した内容:


  • 今後やってみたいこと:


  • リソース:


僕がどうやってCapybaraテストからドロップダウンをクリックしようとしたのか

僕が最初にやったのはディベロッパーツールでHTML要素を確認するところだった。これはCapybaraテストをやるときのいつものスタート地点。前回はこれのおかげでグーグルマップ上のマーカーを選ぶ方法を見つけて、無事マーカーの数を数えることができた。

今回はドロップダウンの中身を見ていくのだが、面白いことに、ドロップダウン自体は一つのボタンであり、その内容は下記のようにoptionタグで定義したのにもかかわらずそうではなかった。

<select id="gender">
  <option id="option" value="male">Male</option>
  <option id="option" value="female">Female</option>
</select>

それで、ディベロッパーツールで見たのだが、下記のようなものが出ていた。

f:id:Programming_Shop:20180831162848p:plain

つまり、optionタグ内に定義されたドロップダウンの内容はoptionタグの中にはもはや存在しないので、他の方法でliにアクセスする形でアクセスする必要がある。
幸運にも、Capybaraテストのfind()関数はCSSセレクターと同じようにHTML要素を選択できるので、どこにそのドロップダウンの内容が隠れているかさえわかればよかったのだ。

ドロップダウンに関しては、もう一つ問題があった。僕たちが実際にドロップダウンから選択したい選択肢を選ぶときにそのドロップダウンをまず開く必要があるのと同じように、Capybaraテストでもそれを開くところから始まる。ということで、まず、Capybaraテストにドロップダウンのボタンを押すように指示した。

クリックする前:
f:id:Coding_Studio:20180818034945p:plain

クリックした後:
f:id:Coding_Studio:20180818035031p:plain

クリックした後に、選択肢の内容部分が色を変えて、有効になっているのが分かる。

なので、下記のようにボタンにクリックし、

find('button.dropdown-toggle').click()

そして、二個目の選択肢を下記のように選んだ。

find('ul.dropdown-menu li[data-original-index="1"]').click()

f:id:Coding_Studio:20180818035131p:plain

このCSSセレクターが見づらいのはわかる。単純に言うと、二つある順序のないリストの二つ目を選ぶという意味だ。
よって、ドロップダウンの二つ目の選択肢を選択するためのCapybaraテストコードは僕の場合、下記のようになる。

# Choose female from the dropdown
find('button.dropdown-toggle').click()
find('ul.dropdown-menu li[data-original-index="1"]').click()

完璧!今日もまた一つ問題を解決した。

まとめ

結構数日考えたから、ドロップダウンの内容を選択できたことは僕にとって大きな達成だった。ディベロッパーツールの有用さに気づかされたから、次はもっと早い段階で使っていきたいね。


ご精読ありがとうございました。では、また次回まで✌



Day 30はこちら↓↓
programming-shop.hatenablog.com


Day 28はこちら↓↓
programming-shop.hatenablog.com