• このエントリーをはてなブックマークに追加

SeleniumでSelect2実装のセレクトボックスを指定する方法

  • このエントリーをはてなブックマークに追加

20160121-002

こんにちは。Zaco shinです。

Selenium IDEを使ってセレクトボックスを選択する動作でなかなか上手くいかない事があったので、備忘的に残しておきたいと思います。

スポンサーリンク
Sponsords Link

上手くいかなかったこと

SeleniumIDEで下記のようなセレクトボックスからとある値を選択したかったのですが、Seleniumにある操作を記録する機能でも全然記憶されずに、困っていました...

20151216-11

調べてみるとこのセレクトボックスはSelect2というjQueryのプラグインで実装されているものでした。Select2で実装すると通常のセレクトボックスよりリッチな感じに作ることができるみたいです。詳しく所までは調べてないので、気になったら確認してみてください。

実施したこと

記録されないのであれば、自力で要素を探して入力するまで!なので、次の操作を作りました。

1.セレクトボックスをクリックして選択画面を開く

2.入力したい値を絞り込む

3.選択する

①セレクトボックスをクリックして選択画面を開く

F12ボタンで開発ツールを出して対象を探してみます。とりあえず、idを探して、それを指定すれば良いいかなと単純に思っていましたが、これではダメでした。画面が動きません。。

CSS形式で選択すると良いみたいなので、選択すると上手くいきました。あとコマンドはclickだと上手くいかず、clickAtだと上手くいきました。

コマンド 対象
clickAt css=.select2-choice

②入力したい値を絞り込む

これも苦戦しましたね。まずはCSS形式で該当の個所を見つけます。私の方法が正しいかは分かりませんが、まず大元のIDっぽいのを探して、その配下に存在するclassやtypeを指定しました。あとコマンドはtypeだとテキストに入力されますが、絞り込みまでされないので、調べるとsendkeysというコマンドが有効のようだったので、それを使いました。

※開発ツールで要素を調べる時のもの(下の図)を使うと色が指定した該当個所の色が変わるのでそのあたりを手当たり次第に試しながら画面が正常に動くものを見つけました。

20160121

コマンド 対象
sendkeys css=.select2-drop input.select2-input  zacodesign

③選択する

これは①と同じような感じで、設定をしてあげるとOKでした。ポイントしては、Seleniumで①→②まで動かしてみて、そこから要素を探してあげると良いかなと思います。動的に変化するものだと、このやり方がベストだと思います!

コマンド 対象
clickAt css=.select2-match

いやーなかなか難しいですね。慣れればサクサクできるんでしょうけど、初心者の私にはハードルが高かったです。今後も使っていく中で課題ができると思うので、解決したら記事にしてみます。

スポンサーリンク
Sponsords Link
  • このエントリーをはてなブックマークに追加

ZacoDesign

スポンサーリンク
Sponsords Link