Seleniumで『CodeMirror』のエディタに入力する方法

  • 2017年2月24日
  • by 
Seleniumで『CodeMirror』のエディタに入力する方法

こんにちは。M.Sです。

久々にSeleniumで悪戦苦闘しながら、新たな発見をしました。
今回は悪戦苦闘した一部始終をご紹介したいと思います。

■Selenium関連記事
<bitWave関連記事『SeleniumでInternet Explorer11を動かす方法』>
<bitWave関連記事『SeleniumでMicrosoft Edgeブラウザを動かす方法』>
<bitWave関連記事『Selenium構築で活躍する女性』>
<bitWave関連記事『SeleniumとGoogle Spreadsheet(1~7)』>

Seleniumと『CodeMirror』は相性が悪いの??

悪戦苦闘の元凶は『CodeMirror』です。
まずはそもそも『CodeMirror』が何なのかを簡単にご説明します。
<参照:公式ページ『CodeMirror』>

『CodeMirror』はブラウザで動くテキストエディタのライブラリになります。
HTML、CSS、javascriptなどの言語を入力するとハイライト表示され、ソースが見やすくなるというものです。

では、なぜ私がここまで『CodeMirror』と格闘していたのかというと、それはいつもどおりにSeleniumにコードを書いていた時のことです。
Seleniumで対象の要素にテキストを入力しようとしました。特に難しいものでもなく、下記のようにとてもシンプルなプログラムです。

しかし、このプログラムを流用してある要素にテキスト入力をしようとしても、一向に入力ができません。うーん。。なんでできないの???
そこでソースを見て確認してみると、『CodeMirror』というclass名が。
つまり『CodeMirror』を使っているプログラムであることが判明しました。

入力したい対象の要素は

配下にあります。
そして、入力したい要素付近にtextareaがあり、そのtextareaはCSSで非表示にされています。画面上表示されている入力エリアは、非表示のtextareaの代わりに作成された入力エリアです。直接手入力することはできますが、Seleniumではその要素に入力ができません。

む~、Seleniumと『CodeMirror』は相性が悪いということなのでしょうか。。。

『CodeMirror』のエディタに入力する方法をいくつか考えてみた

本来入力したい対象の要素は、前記のとおり非表示になっているtextareaです。
どうやら、Seleniumは画面上では非表示になっている要素に対してクリックを実行したり、何か入力したりといったアプローチをすることができないようです。

とはいえ、そのままでは検証業務に支障も出てきてしまうため、いくつか解決方法を模索してみました。

方法1:非表示されているtextareaを表示させて入力!!

結構強引ですが、まず思いついたのは一番シンプルなこの方法でした。
非表示のtextareaを一旦表示(CSSを変更)させて入力します。

当然ながら表示されたtextareaにはアクションが効きますので、問題は解決します。
ただし、元々のレイアウトを無視したやり方になりますので、あまり良い解決法だとは言えないでしょうね。

方法2:javascriptのsetValueで入力

問題が解決したとはいえ、納得感が得られないのは腑に落ちません。
そこで更に色々試してみて、ようやくたどり着いた方法がコレ。

これなら元の仕様を崩すことなく処理が走りますので、こちらの方が良さそうです。

一難去ってまた一難。
プログラムはそうやって学んでいくんですね(汗)。

ただ、腑に落ちない解決法をそのまま採用するのではなく、追求すれば最適な方法も浮かんでくることもあるという実例ができたという点では、非常に有意義な時間を過ごしたと言えるのではないでしょうか。

コメント