casperJsを使ってポップアップ画面でファイルアップロードするまで

はじめに

casperjsを使ってログイン、ポップアップ画面、ファイルアップロード、までを実施したので、
その時のメモとハマったことをまとめておきます

casperjsインストールからログインまではCasperJSでブラウザ操作を自動化しようを参考にさせていただきました。
それ以降、困ったことはCasperJS documentationを利用しました。
利用したバージョンは、casperjs: 1.1.4、phatomjs: 2.1.1です

サイトにログインしてキャプチャをとる

参考にさせていただいたリンクにもある通りfillを利用する

capser.thenOpen("${url}", function() {
  this.fill('form', {'login_id':'id', 'password': 'password'}, true);
});
casper.then(function() {
  this.capture('login.png');
});

login_id, passwordどちらもinputタグのnameに合わせる

iframeを利用した画面に対するアプローチ

ログイン後の画面でclick(slector)を利用して、リンクを押した遷移をしようとしたができず。
iframeを利用している場合、withFrameを利用する必要があった（もうあまりないと思うが。。。）

casper.then(function() {
  this.withFrame(1, function(){
    this.click("a.button:nth-clild(3)");
  });
});

withFrameの引数には何個目のiframeかを入れる（1個目なら0）
clickにはselectorを渡す、今回は同じスタイルのaタグがいっぱいあったので、<a class="button">の3つ目を指定

ポップアップ画面でファイルアップロード

ポップアップ画面もiframeと同様で、withPopupを利用する（試してないが、おそらく別タブも可能）
ファイルアップロード（今回は画像）は、uploadFileを利用する

casper.then(function() {
  this.withPopup({windowName: "target"}, function(){
    this.page.uploadFile('input[type=\"file\"][value=\"uploadFile1\"]', '/app/tool/upload_file/gazo1.jpg');
    this.page.uploadFile('input[type=\"file\"][value=\"uploadFile2\"]', '/app/tool/upload_file/gazo2.jpg');
    this.page.uploadFile('input[type=\"file\"][value=\"uploadFile3\"]', '/app/tool/upload_file/gazo3.jpg');
    this.click("img#submitButton");
  });
});

withPopupのwindowNameには、window.openで指定した画面名を指定する
uploadFileもselectorを渡すので、idやclassがあればシンプルにかける
アップする画像はフルパスで記載（相対パスは試してない）

おわりに

思ったより、さくっとできた。
今回は「作業の自動化」だったけど、「画面テストの自動化」もやってみたいな、と思った。
なので、もう少し色々作ってみようと思います