SeleniumでJavaScriptを使ってWYSIWYG(CKEditor)の内容を取得/設定する方法

すごく頑張ってSeleniumを使ってiFrameの中を操作してたんだけど、JavaScriptでやれば楽々だった。。

前提

CKEditorがこんな感じで設置してある場合。
(他の人がつくったページのテストを書いてるだけなので、CKEditorの設置方法？を知らないんだけど、↓の hoge という textarea を置き換えるとかそんな感じ？らしい？？)

source_page

<textarea id="hoge" style="visibility:hidden; display: none;"></textarea>
<span id="cke_article_body">
  (…省略)
</span>

サンプルコード

テキスト入力

Rubyで受け取った変数はそのままJavaScriptで使うことはできないので #{} で使う。

set_text

# hogeの部分を環境に合わせて変更する
def set_text(text)
  @driver.execute_script("CKEDITOR.instances.hoge.setData('#{text}');")
end

テキスト取得

return を入れて JavaScript の実行結果(CKEditorから取得したテキスト)を受け取る。

get_text

# ※hogeの部分を環境に合わせて変更する
def get_text
  text = @driver.execute_script("return CKEDITOR.instances.hoge.setData();")

  return text
end

参考サイト(参考というかそのまんま)

■CKEDITOR で値を取得・設定する方法 « をぶろぐ
http://tetsuwo.tumblr.com/post/12457516199/ckeditor

■[CKEditor] WYSIWYGで編集中のデータを取得する | umbrella_process blog
http://www.umbrellaprocess.com/archives/233