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

  • 2017年2月24日
  • by 
Seleniumで『CodeMirror』のエディタに入力する方法
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

こんにちは。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を変更)させて入力します。

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。