Ruby on Rails開発のインターン (Day 29)
こんにちは、皆さん!
今日はなぜCapybaraテストでドロップダウンをクリックできないのかを調べるところからスタート。それと、どうやって効率的にテスト用のデータを作るかだな。今日はどのくらいできるのか見てみよう。
- トピック:
- 疑問:
- なんでわざわざブラウザではドロップダウンの形式を変えてくるのだろうか?
- 問題:
- Capybaraテストからドロップダウンをクリックすることができない
- コンソールで作ったデータがテスト時に消えている
- 学習した内容:
- 今後やってみたいこと:
- リソース:
僕がどうやってCapybaraテストからドロップダウンをクリックしようとしたのか
今回はドロップダウンの中身を見ていくのだが、面白いことに、ドロップダウン自体は一つのボタンであり、その内容は下記のようにoption
タグで定義したのにもかかわらずそうではなかった。
<select id="gender"> <option id="option" value="male">Male</option> <option id="option" value="female">Female</option> </select>
それで、ディベロッパーツールで見たのだが、下記のようなものが出ていた。
つまり、option
タグ内に定義されたドロップダウンの内容はoption
タグの中にはもはや存在しないので、他の方法でli
にアクセスする形でアクセスする必要がある。
幸運にも、Capybaraテストのfind()
関数はCSSのセレクターと同じようにHTML要素を選択できるので、どこにそのドロップダウンの内容が隠れているかさえわかればよかったのだ。
ドロップダウンに関しては、もう一つ問題があった。僕たちが実際にドロップダウンから選択したい選択肢を選ぶときにそのドロップダウンをまず開く必要があるのと同じように、Capybaraテストでもそれを開くところから始まる。ということで、まず、Capybaraテストにドロップダウンのボタンを押すように指示した。
クリックする前:
クリックした後:
クリックした後に、選択肢の内容部分が色を変えて、有効になっているのが分かる。
なので、下記のようにボタンにクリックし、
find('button.dropdown-toggle').click()
そして、二個目の選択肢を下記のように選んだ。
find('ul.dropdown-menu li[data-original-index="1"]').click()
このCSSセレクターが見づらいのはわかる。単純に言うと、二つある順序のないリストの二つ目を選ぶという意味だ。
よって、ドロップダウンの二つ目の選択肢を選択するためのCapybaraテストコードは僕の場合、下記のようになる。
# Choose female from the dropdown find('button.dropdown-toggle').click() find('ul.dropdown-menu li[data-original-index="1"]').click()
完璧!今日もまた一つ問題を解決した。
まとめ
ご精読ありがとうございました。では、また次回まで✌