JavaScript
casperJs

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があればシンプルにかける

アップする画像はフルパスで記載(相対パスは試してない)


おわりに

思ったより、さくっとできた。

今回は「作業の自動化」だったけど、「画面テストの自動化」もやってみたいな、と思った。

なので、もう少し色々作ってみようと思います