php-webdriverでSOY CMSの記事作成画面のテストコードを作成する時に苦戦した。

php-webdriverでconfirmダイアログをクリックする


どこで苦戦したか?というと、



記事作成画面の本文に値を入力するところで、

SOY CMSの記事作成画面ではTinyMCEというWYSIWYGエディタを利用していて、

SOY CMSの記事投稿画面でYouTubeの動画の挿入ボタンを追加しました

TinyMCE | The Most Advanced WYSIWYG HTML Editor


TinyMCEの表示箇所は一見すると<textarea>で表示されていると思いきや、

<textare>の上の箇所に

<iframe id="entry_content_ifr" allowtransparency="true" title="" style="width: 100%; height: 300px; display: block;" frameborder="0"></iframe>

こんな感じのiframeタグが挿入される。


つまるところ、

記事本文に対してphp-webdriverで値を挿入したければ、

一度、iframeを指定してから値を挿入して、iframeから戻るという操作を行わなければならない。


これを踏まえた上で、公式のマニュアルを頼りながら下記のコードを書いてみた。

Alert, tabs, frames, iframes · facebook/php-webdriver Wiki


//TinyMCEのiframeを取得して値を挿入する
$element = $driver->switchTo()->frame(WebDriverBy::id("entry_content_ifr"))->switchTo()->activeElement();
$element->clear();
$element->sendKeys("hoge");

//TinyMCEのiframeから離れる
$driver->switchTo()->defaultContent();

このコードで挿入できた。

※事前に$driverは取得していることとする。

php-webdriverで指定のフォームに値を入力してみる


最後のiframeから離れる処理は、

この処理がないと、記事作成画面の作成ボタンや更新ボタンが押せなくなるため、

必ずiframeから親のフレームに戻っておく。




次に苦戦したのが、TinyMCEに入力した値を取り出すところで、

こちらも公式を頼りに下記のコードを書いてみた。


$element = $driver->switchTo()->frame(WebDriverBy::id("entry_content_ifr"))->switchTo()->activeElement();
$val = $elenemt>getText();
/** 何らかの処理を書く **/

//TinyMCEのiframeから離れる
$driver->switchTo()->defaultContent();

こちらも上記のコードで上手くいった。