ブラウザで自動実行できるテストツールを作ってみた

######2018/01/12 13:08 文章のインデント修正をしました。

#0. 今回お話しすること

• ブラウザ自動テスト計画を作ったよ
• ファイルをダブルクリックするだけでブラウザが自動で立ち上がり、自動で画面遷移するよ
• 単純な遷移だけでなく、ページ内のjavascript関数をキックすることもできるよ

#1. 背景

webサイトに組み込んでいるjsライブラリを更新することを検討し始めました。

いわゆるリッチテキストエディタを更新しようと思ったのですが、これまで書いた文章を新エディタで開いて保存する際、htmlのタグ構造が変わったりすることで画面崩れしないかが心配になりました。

そのため旧エディタで作成したテスト的な旧文書を、ひたすら新エディタで開いては保存し、開いては保存し、その前後のhtmlに差分がないかを確認しようという話が出てきました。

もちろん人力でやるのはしんどいので、自動でできないものかと思い、このJSツールを作ってみました。

#2. 実際のコード

##2.1 参考

以下のサイトを参考にしました
JScript / VBScript (WSH)で，IEを自動操作しよう

このサイトでは、単純な画面遷移や、プロパティの変更についての説明がありますが、
javascript関数のキック方法がなかったので、それも併せて紹介します。

##2.2 コード

test.js

// main関数を実行
main();

function main(){
    // IEのオブジェクトを作成する
    var ie = WScript.createObject("InternetExplorer.Application");
    // IEを画面表示する
    ie.visible = true;
    // 指定したページを表示する
    ie.navigate("http://hoge.test.com/PATH/login");

    // ページが表示されるまで待機
    waitIE( ie );
    
    // 画面上にあるログイン情報を入力
    ie.document.getElementsByName("loginid").item(0).value  = "hoge";
    ie.document.getElementsByName("password").item(0).value = "fuga";
    // submitしてログイン
    ie.document.FORM_NAME.submit();

    waitIE( ie );
    
    // 登録画面を表示表示
    ie.navigate("http://hoge.test.com/PATH/create");

    waitIE( ie );
    
    // javascriptをキックして、保存処理を実行(もちろん引数も入れられます)
    ie.navigate( "javascript:formSubmit(1);");

}

// IEでページが表示されるまで待機
function waitIE( ie ){    
    while( ( ie.busy ) || ( ie.readystate != 4 ) ){
        WScript.sleep( 100 );
    }
}