ace_logo

Ace - The High Performance Code Editor for the Web


selenium_test_ace


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