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

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...