Ace - The High Performance Code Editor for the Web
Webアプリ内でAceというJavaScript製のコードエディタを設置した箇所があって、Selenium + php-webdriverでテストコードを作成することになった。
Aceエディタを設置した箇所は単純なHTMLのtextareaタグではなかったのでコードの作成は工夫がいる。
なんとか対応できたので、対応方法を記載する。
今回の内容は下記のページを参考にした。
Send text to ace editor with selenium and python - Stack Overflow
はじめにAceの設置は下記のコードにする。
<div id="editor"></div> <!-- editorのサイズに関するCSSの記述は省略 --> <script src="/path/to/dir/ace.js"></script> <script> var editor = ace.edit("editor"); editor.session.setMode("ace/mode/html"); </script>
※太字の変数名がテストコードを作成する上で大事になる
このコードを踏まえ、selenium + php-webdriverのコードを作成する。
//事前に$driverを用意するコードを書いておく //aceの設置の方で決めた変数名 $varName = "editor"; //aceのコードエディタに入力したいHTML $html = "<div class=\"test\">hoge</div>"; $script = "arguments[0].setValue(arguments[1]);"; //第二引数の配列に入れた値が、$script内のargumentsに対応する $driver->executeScript($script, array($varName, $html);
※$driver周りのコードはJenkins + ヘッドレスChromeでテスト自動化の省力化の記事をご覧ください。
Aceのコードエディタに文字列を入力したい場合は、JavaScriptでコードを作成して、エディタに直接セットする必要がある。
executeScript - php-webdriver API