外部ツール無し(iframe+contentsメソッドの組み合わせによる取得)で、Seleniumのような自動化を実現しよう

はじめに

セキュリティ上の理由により、プラグイン等のインストールを実施できない中で、
なんとかSeleniumのような動作を実現できないか調査した所、
少し無理矢理ながらもできたので、メモを残したいと思います。

課題整理

単純に画面へJavascriptを埋め込むのでは、遷移時にクリアされてしまいます。
では、遷移する度に埋め込むのか？そのような事では自動化とは言えません。
ということで、iframeにて操作したい画面を描画し、
親画面からcontentsメソッドを使用して操作する事にしました。

問題発生

試しに以下のスクリプトを実行した所、エラーが発生しました。

// 流したスクリプト
$("#iframeのid").contents().find("#操作したいtextのid").val("hoge");

// エラーメッセージ
VM183:1 Uncaught TypeError:$(...).contents is not function
   at<anonymous>1:11

存在するはずのメソッドが使用できない、、、？なぜ？？
というわけで調査した所、どうやらクロスドメイン制約によるものという事がわかりました。
（参考サイト https://qiita.com/growsic/items/a919a7e2a665557d9cf4）

先人の方々も調査を行っているようで、既に対策も確認する事ができました。
（参考サイト http://shinimae.hatenablog.com/entry/2015/12/09/183057）

同じ方法でやってもなぁ、、、さて、どうするか。

斜め上の発想で対応

同一ドメインであれば問題ないのであれば、
一度、操作したいページを描画し、そのhtmlを書き換えてしまえばいいのでは？
※具体的にはbodyの中身をクリアし、そこへiframe要素を追加してそこで描画し、操作してみる。

というわけで試してみたところ、、、成功しました！
これはセキュリティ的に大丈夫なのか？という怪しい所を残しながらも突破できたので、とりあえずは良しとすることにしました。
※この手法を採用する際は、自己責任でおねがいします。

// 埋め込み時
$("body").html("<iframe id='hoge' src='操作したいurl' width='好きな幅' height='好きな高さ'/>");

// 操作時
$("#hoge").contents().find("#書き換えたいtextのid").val("test");

// 画面遷移判定
$("#hoge").load(function() {
  console.log("遷移完了");
}

最後に

アカウント情報等の利用者毎に事なる値を入力する運用に使用したい場合は、
html書き換え時にtext等を配置し、その値を使用するのも良いかと思います。
ただ、amazonなどは、iframeでの表示を制限した作りになっているようなので、注意ですね。