JScriptでIEを操作 画面キャプチャ

前回に引き続き、JScriptでIEを操作する関数のメモ。
今回は画面キャプチャを行う関数。
画面キャプチャのフリーソフトのWinShotを利用する。

//***********************************************
//画面のキャプチャを取得する関数
//***********************************************
function capturePage( ie ) {
  var h1 = ie.document.body.clientHeight;//表示領域の高さ
  var h2 = ie.document.body.scrollHeight;//ページ領域の高さ
  for(var i = 0; i <= h2; i+=h1) {
    ie.document.parentWindow.scrollTo(0, i);
    runWinShot();
  }
}

//***********************************************
//WinShotを実行する関数
//***********************************************
function runWinShot()
{
  //WinShot.exeのファイルパス
  var WinShotExeFile = "C:\\ws153a\\WinShot.exe";
  //Shell関連の操作を提供するオブジェクトを取得
  var sh = new ActiveXObject( "WScript.Shell" );
  // コマンドを実行（アクティブウィンドウのキャプチャを取得）
  var e = sh.Exec( WinShotExeFile + " -j -a -x" );
  while (e.Status == 0) {
    WScript.Sleep(100);
  }
  sh = null;
}

以下のサイトのように、Excelを使って画面キャプチャを取得する方法もある。
　画面のスクリーンショットを，Excelブック内に自動的に保存するバッチ

ちなみに、上記サイトは他にもブラウザの自動操作に関するテクニックが色々のってるので参考になる。

JScriptでIEを操作

JScriptでIEを自動操作するための関数のメモ。テスト等で使う。
素直にSelenium等のテストツールを使えばいいのだが、客先の環境でなかなかフリーソフトを導入できない場合に使う。
IEしか操作はできないけどね．．．。

①テキストフィールドに入力するための関数。
テキストタグの指定はid属性もしくはname属性。

//****************************************************************
//テキスト、パスワードを入力
//****************************************************************
function input_text( objIE, input_type, tag_id, input_name, input_value )
{
  var objDoc = objIE.document;
  if(! objDoc) return 1;
  if( tag_id ) return input_text_specified_id( objDoc );
  else if( input_name ) return input_text_specified_name( objDoc );
  else return 1;
  //id属性がである要素に対して入力
  function input_text_specified_id( objDoc ) {
    var objTxt = objDoc.getElementById( tag_id );
    if( ! objTxt ) return 1;
    var tag_name = objTxt.tagName;
    var type = objTxt.type;
    if( ! tag_name || ! type ) return 1;
    if( tag_name.toUpperCase() == "INPUT" && type == input_type ) return input(objTxt);
    return 1;
  }
  //name属性がである要素(1番目の要素)に対して入力
  function input_text_specified_name( objDoc ) {
    var objInputs = objDoc.getElementsByTagName("input");
    if(! objInputs) return 1;
    for(var i = 0; i < objInputs.length; i++) {
      var type = objInputs.item(i).type;
      var name = objInputs.item(i).name;
      if( ! type || ! name ) continue;
      if( type == input_type && name == input_name ) return input(objInputs.item(i));
    }
    return 1;
  }
  //入力
  function input(objTxt) {
    objTxt.focus();
    WScript.Sleep( interval );
    objTxt.value = input_value;
    return 0;
  }
}

②ボタン、ラジオボタン、チェックボックスを押下するための関数。
 タグの指定はid属性、name属性、もしくは任意の属性。

//****************************************************************
//ボタン、ラジオボタン、チェックボックスをクリック
//****************************************************************
function click_btn( objIE, input_type, tag_id, input_name, attr_name, attr_value )
{
  var objDoc = objIE.document;
  if(! objDoc) return 1;
  if( tag_id ) return click_btn_specified_id( objDoc );
  else if( input_name || (attr_name && attr_value) ) {
    return click_btn_specified_name_and_value( objDoc );
  }
  else return 1;
  
  //id属性が"tag_id"である要素を押下
  function click_btn_specified_id( objDoc ) {
    var objBtn = objDoc.getElementById(tag_id);
    if(! objBtn) return 1;
    var tag_name = objBtn.tagName;
    var type = objBtn.type;
    if(! tag_name || ! type) return 1;
    if( tag_name.toUpperCase() == "INPUT" && type == input_type ) return click(objBtn);
    return 1;
  }
  //name属性が"input_name"である要素(1番目の要素)、かつ
  //"attr_name"属性が"attr_value"である要素を押下
  function click_btn_specified_name_and_value( objDoc ) {
    var objInputs = objDoc.getElementsByTagName("input");
    if(! objInputs) return 1;
    for(var i = 0; i < objInputs.length; i++) {
      var type = objInputs.item(i).type;
      if(! type) continue;
      if(type != input_type) continue;
      if( input_name ) {
        var name = objInputs.item(i).name;
        if( ! name ) continue;
        if( name != input_name ) continue;
      }
      if(attr_name && attr_value) {
        var atr = objInputs.item(i).attributes.getNamedItem(attr_name);
        if( ! atr ) continue;
        if( ! atr.value ) continue;
        if( atr.value != attr_value ) continue;
      }
      return click(objInputs.item(i));
    }
    return 1;
  }
  //クリック
  function click(objBtn) {
    objBtn.focus();
    WScript.Sleep( interval );
    objBtn.click();
    return 0;
  }
}

③リンクをクリックするための関数。
タグの指定はid属性、href属性、内部テキスト、もしくは、内部画像タグのalt属性。

//****************************************************************
//リンクをクリック
//****************************************************************
function click_link( objIE, tag_id, a_href, innerText, img_alt )
{
  var objDoc = objIE.document;
  if(! objDoc) return 1;
  if(tag_id) return click_link_specified_id( objDoc );
  else if( a_href ) return click_link_specified_href( objDoc );
  else if( innerText ) return click_link_specified_innerText( objDoc );
  else if( img_alt ) return click_link_specified_img_alt( objDoc );
  else return 1;
  
  //id属性が"tag_id"である要素をクリック
  function click_link_specified_id( objDoc ) {
    var objLink = objDoc.getElementById(tag_id);
    if( ! objLink ) return 1;
    var tag_name = objLink.tagName;
    if( ! tag_name ) return 1;
    if( tag_name.toUpperCase() == "A" ) return click(objLink);
    return 1;
  }
  //href属性が"a_href"である要素をクリック
  function click_link_specified_href( objDoc ) {
    var objLinks = objDoc.getElementsByTagName("a");
    if(! objLinks) return 1;
    for(var i = 0; i < objLinks.length; i++) {
      var href = objLinks.item(i).href;
      if(! href) continue;
      if(href == a_href) return click(objLinks.item(i));
    }
    return 1;
  }
  //内部テキストが"innerText"である要素をクリック
  function click_link_specified_innerText( objDoc ) {
    var objLinks = objDoc.getElementsByTagName("a");
    if(! objLinks) return 1;
    for(var i = 0; i < objLinks.length; i++) {
      var intxt = objLinks.item(i).innerText;
      if(intxt == innerText) return click(objLinks.item(i));
    }
    return 1;
  }
  //内部画像のalt属性が"img_alt"である要素をクリック
  function click_link_specified_img_alt( objDoc ) {
    var objLinks = objDoc.getElementsByTagName("a");
    if(! objLinks) return 1;
    for(var i = 0; i < objLinks.length; i++) {
      var imgs = objLinks.item(i).getElementsByTagName("img");
      if(! imgs) continue;
      var alt = imgs.item(0).attributes.getNamedItem("alt");
      if(! alt) continue;
      if(alt.value == img_alt) return click(objLinks.item(i));
    }
    return 1;
  }
  //クリック
  function click(objLink) {
    objLink.focus();
    WScript.Sleep( interval );
    objLink.click();
    return 0;
  }
}

④セレクトボックスを選択するための関数。
タグの指定はid属性もしくはname属性。

//****************************************************************
//セレクトボックスを選択
//****************************************************************
function select_option( objIE, tag_id, input_name, select_number )
{
  var objDoc = objIE.document;
  if(! objDoc) return 1;
  if( tag_id ) return select_option_specified_id( objDoc );
  else if( input_name  ) return select_option_specified_name( objDoc );
  else return 1;
  
  //id属性が"tag_id"である要素を選択
  function select_option_specified_id( objDoc ) {
    var objSlct = objDoc.getElementById(tag_id);
    if( ! objSlct ) return 1;
    var tag_name = objSlct.tagName;
    if( ! tag_name ) return 1;
    if( tag_name.toUpperCase() == "SELECT" ) return select(objSlct);
    return 1;
  }
  //name属性が"input_name"である要素を選択
  function select_option_specified_name( objDoc ) {
    var objSlcts = objDoc.getElementsByTagName("select");
    if( ! objSlcts ) return 1;
    for(var i = 0; i < objSlcts.length; i++) {
      var name = objSlcts.item(i).name;
      if( ! name ) continue;
      if( name == input_name ) return select(objSlcts.item(i));
    }
    return 1;
  }
  //クリック
  function select(objSlct) {
    objSlct.focus();
    WScript.Sleep( interval );
    objSlct.selectedIndex = select_number;
    return 0;
  }
}

⑤クリック後に新規画面が開く場合、その画面のオブジェクトを返す。
どの画面かは タイトルで指定する。

function focusWindow( title ) {
  var MAX_COUNT = 10;
  var objShell = new ActiveXObject("Shell.Application");
  var objWins = objShell.Windows();
  if( ! objWins ) return null;
  
  for(var t = 0; t < MAX_COUNT; t++) {
    for(var i = 0; i < objWins.Count; i++) {
      var item = objWins.item(i);
      try {
        var ifn = item.FullName;
        if( ! ifn ) continue;
        if(item.FullName.match(/iexplore.exe$/i)) {
          var objDoc = item.document;
          if( ! objDoc ) continue;
          if( ! objDoc.title ) continue;
          if( objDoc.title == title ) {
            return item;
          }
        }
      }
      catch (e) {}
    }
  }
  return null;
}

使い方は以下のようになる。
以下は乗り換え案内のページの操作例。

var interval = 100;//操作の間（100ms）
var ie = WScript.CreateObject("InternetExplorer.Application");
//乗り換え案内のページを開く
ie.Navigate( "http://www.ekikara.jp/top.htm" );
ie.Visible = true;
//ビジー状態を待つ（参考：http://d.hatena.ne.jp/language_and_engineering/20090713/p1）
waitIE( ie );

//乗り換え案内のオプションリンクをクリック
click_link( ie, null, "http://www.ekikara.jp/cgi-bin/route.cgi", null, null);
waitIE( ie );
//乗車駅入力
input_text( ie, "text", null, "intext", "東京");
//降車駅入力
input_text( ie, "text", null, "outtext", "博多");
//飛行機のチェックをクリックして外す
click_btn( ie, "checkbox", null, "airplane", null, null );
//新幹線のチェックをクリックして外す
click_btn( ie, "checkbox", null, "sprexprs", null, null );
//表示順序で乗車距離をクリックする
click_btn( ie, "radio", null, "sort", "value", "meter" );
//検索ボタンを押下
click_btn( ie, "image", null, null, "alt", "検索" );
waitIE( ie );
//修正画面でもう一度検索ボタンを押下
click_btn( ie, "image", null, null, "alt", "検索" );
waitIE( ie );

あとは、これらの関数を使えば自動操作といきたいところだが、まだできないものもある。
例えば、javascriptのalert等で表示されるダイアログの操作とか。以下のページに詳しく書かれている。
http://d.hatena.ne.jp/language_and_engineering/20100727/p1

テストツールSahiでスクリーンショット取得

Webアプリケーションの自動テストツールSahiでスクリーンショットを取得する関数．（スクリーン全体を取得する）

function takeSnapshot(filepath) {
   try {
      var robot = new java.awt.Robot();
      var toolkit = new java.awt.Toolkit.getDefaultToolkit();
      var screenSize = toolkit.getScreenSize();
      var screenRect = new java.awt.Rectangle(0, 0, screenSize.width, screenSize.height);
      var image = robot.createScreenCapture(screenRect);
      var file = new java.io.File(filepath);
      javax.imageio.ImageIO.write(image, "png", file);
   } catch (e) {
      print(e);
   }
}

保存ファイルを指定してスクリーンショットを取得する．

var filepath = "C:/home/hy/sahi/userdata/scripts/snapshot1.png";
takeSnapshot(filepath);

テストツールSahiでテスト自動化

Webアプリケーションの自動テストツールSahi．インドの会社Tyto Softwareが開発したオープンソースツール(Apache License 2.0)．SahiはOS，ブラウザから独立して動作するため，様々な環境でテスト可能．

インストール

ここからダウンロードし，適当な場所に解凍する．(Sahi V3 (2010-08-20))

起動

解凍したフォルダのbinフォルダに移動し， sahi.batを実行．

ブラウザ設定

Sahiはプロキシサーバとして動作するため，ブラウザのプロキシ設定を変更する．
(FireFoxの場合)
ツール → オプション → 詳細 → ネットワーク → 接続設定
「手動でプロキシを設定する」を選択
HTTPプロキシに「localhost」，ポートに「9999」を設定
(IE，Chromeの場合)
インターネットのプロパティ → 接続 → LANの設定
「LANにプロキシサーバを設定する」を選択
アドレスに「localhost」，ポートに「9999」を設定

ユーザ操作の記録

①ブラウザ上でAlt(またはCtrl+Alt)を押しながらダブルクリックし，Sahiのコントローラウィンドウを立ち上げ， Script Nameにスクリプトファイル名を入力，Recordボタンを押下し，ブラウザ上のユーザ操作の記録を開始．

②ブラウザ上で入力，ボタン押下等の操作を行うと記録される．

③html要素の値の比較をスクリプトに追加したい場合は，まずCtrl押しながらhtml要素の上にマウスポインタをかざし，Append to Scriptボタンを押下．

④Stopボタンを押下して記録を終了． スクリプトはjavascriptに似たSahi独自のスクリプトで記述される．
スクリプト例：

_setValue(_textbox("q"), "医龍");
_click(_submit("Google 検索"));
_click(_link("医龍-Team Medical Dragon- - Wikipedia"));
_assertExists(_heading1("医龍-Team Medical Dragon-"));
_assert(_isVisible(_heading1("医龍-Team Medical Dragon-")));
_assertEqual("医龍-Team Medical Dragon-", _getText(_heading1("医龍-Team Medical Dragon-")));
_assertContainsText("医龍-Team Medical Dragon-", _heading1("医龍-Team Medical Dragon-"));

テスト実行

スクリプトを実行する場合は，SahiコントローラのPlaybackタブから，スクリプトファイルとスタートURLを入力し，Setボタン，Playボタンを押下する．すると，テストが自動で実行される．

実行結果は，View Logsから見れる．

Sahiでできないこと

Sahiはフレーム，インラインフレームのページに対応してない．

テストツールwatirのインストール

Webアプリケーションの自動テストツールwatirをwindows7にインストールする。
watirのHPはここ。
最新版はwatir 1.6.6。

1．rubyのインストール。
　　ここからダウンロードしてインストールする。


2．watirのHPによると、次はwatirをインストールをするためにコマンドプロンプトから以下のコマンドを実行する。

gem update --system
gem install watir

が、以下のエラーが出る。

ERROR: While executing gem ... (Gem::RemoteSourceException)
HTTP Response 302

そこで、RubyGemsを最新のものに更新する。
ここからダウンロードし、ファイルを解凍、解凍したフォルダからコマンドプロンプトで ruby setup.rb を実行する。


3．今度こそ以下のコマンドを実行し、watirをインストールする。

gem update --system
gem install watir

4．インストールを確認する。ここからテストケースのサンプル（Google検索のテストケース）をダウンロードして、コマンドプロンプトから ruby google_search.rb を実行してみる。IEの起動、検索フォームに文字入力、検索ボタンクリック、検索結果ページの表示、が自動的に行われる。


5．firefox、chrome上で自動化できるようにする。
firefoxの場合は、firefox用プラグインを導入する。このページの "Windows plugin for Firefox x.x" から導入する。テストケースには、require とブラウザオブジェクトの生成を以下のように記述する。

require "firewatir"

browser = FireWatir::Firefox.new

chromeの場合は、watir-webdriverを導入する。以下のコマンドでインストール。

gem install watir-webdriver

テストケースには、require とブラウザオブジェクトの生成を以下のように記述する。

require "watir-webdriver"

browser = Watir::Browser.new(:chrome)

使い方は、 Watir API Reference 参照。