[salesforce][DevOps][CI] CasperJSを利用したキャプチャ取得
Force.com Advent Calendar 2013の10日目として執筆させて頂きました。
CasperJSは前に当ブログでも紹介したphantomJSやSlimerJSといったヘッドレスブラウザの上で動作するユーティリティです。
今回はwindows環境にさくっとセットアップを行い動かしてみました。
インストール方法は他サイトが多数ありますので詳細は割愛させて頂きますが、phantomjs.exeとcasperjs.batをダウンロードしてパスを通しただけです。（本家にはpythonが必要とあり試したPCにもインストールされています）
今回は下記ステップをシミュレートしています。
１．Salesforceにログイン
２．ダッシュボードタブをクリックしダッシュボードページに遷移し
３．ダッシュボードヘッダーのキャプチャを取得（更新前）
４．更新ボタンをクリック
５．ダッシュボードヘッダーのキャプチャを取得（更新後）
・dashboard.js
[html]
"use strict";
//インスタンス生成
var casper = require("casper").create({
viewportSize:{
"width": 1280,
"height": 800
}
});
//ユーザ名およびパスワードをパラメータから取得
var usernm=(casper.cli.has(‘usernm’))?casper.cli.get(‘usernm’):"";
var passwd=(casper.cli.has(‘passwd’))?casper.cli.get(‘passwd’):"";
//ユーザ/パスが未設定
if(usernm=="" || passwd==""){
casper.die("Username Or Password is not input!!",1);
}
//初回用の確認コードをパラメータから取得
var checkcode = (casper.cli.has(‘checkcode’))?casper.cli.get(‘checkcode’):"";
//ログイン処理
casper.start("https://login.salesforce.com/", function() {
this.fill("form", {
"username":usernm,
"pw":passwd
}, true);
});
//確認コード要求
casper.then(function(){
//確認コードを入力
this.waitForSelector("#content .verifyform",function(){
//確認コード登録フォーム
if (this.exists("#content .verifyform #save") && this.exists("#content .verifyform #code")) {
this.echo("input checkcode!");
this.fill("form#editPage",{
"code":checkcode
},false);
return this.click("#content .verifyform #save");
//確認コード送信画面
}else if(this.exists("#content .verifyform #save")) {
this.echo("displaied send checkcode!");
return this.click("#content .verifyform #save");
}
},function(){
return;
},3000);
});
//携帯電話番号の登録ページ
casper.then(function(){
this.waitForSelector("#content .verifyoptions a",function(){
this.echo("throw Mynumber!");
//後で通知してください。ログインするをクリック
return this.click("#content .verifyoptions a");
},function(){
return;
},3000);
});
//ダッシュボードページに遷移
casper.then(function() {
this.waitForSelector("li#Dashboard_Tab",function(){
//ダッシュボードタブを選択
this.echo("select dashboard!");
return this.click("li#Dashboard_Tab a");
},function(){
this.echo("Timeout select dashboard!");
},10000);
});
//ダッシュボードページで更新ボタンをクリック
casper.then(function() {
this.waitForSelector(".dashboardViewPageHeader #refreshMenu",function(){
//更新前のページをキャプチャ
this.captureSelector("dashboard_before_refresh.png",".dashboardHeader");
//更新ボタンをクリック
this.click("#refreshMenu a.firstMenuItem");
//更新中ラベルチェック（ダッシュボードの更新は時間がかかる場合があるのでタイムアウトを30秒にセット）
this.waitForSelectorTextChange("#refreshLabel",function(){
//更新後のページをキャプチャ
this.captureSelector("dashboard_after_refresh.png",".dashboardHeader");
},function(){
this.echo("Timeout click refresh!");
},30000);
},function(){
this.echo("Timeout refresh dashboard!");
},10000);
});
//実行
casper.run();
[/html]
起動コマンド
[html]
> casperjs dashboard.js –usernm="ユーザ名" –passwd="パスワード" [–checkcode="確認コード"]
[/html]
基本的にSalesforceページのタグに付与されているid/classを利用してページの操作を行っています。
ポイントとしてはSalesforceではアカウントを作成した後、別IPなどでログインを試みると確認コードによる認証が必要となります。
なので最初の起動では確認コードの送信処理のみを行います。
メールで確認コードを取得したら–checkcodeパラメータに確認コードを渡して再度起動します。
キャプチャでは特定の部品のみ指定する事が可能なので、今回は更新時間の違いを確認するためダッシュボードヘッダーの部分のみキャプチャしました。
実際にキャプチャした画像は下記となります。
・更新前
・更新後
またLinux環境でも上記コードを利用して試してみましたが問題なく動作しました。
（Linux環境では日本語の文字化け対応のためIPAフォントをインストールしました。）
今回はお試しで動かしてみましたが、Salesforce自体のメンテナンス時などはガイダンスなどが表示されるため、起動部分にはもう一工夫必要です。今度Salesforceのメンテナンスのガイダンスが確認できた際に試してみたいと思います。