拡張スクリプト（user-extensions.js）のつくり方

拡張スクリプト（エクステンション）の作り方その１

皆さんこんにちは。アイフラッグの品質管理チームKです。
今回はSelenium IDEの拡張スクリプト（user-extensions.js）のつくり方について、ざっとまとめておきたいと思います。

Selenium IDEでエクステンションを使えるように設定する方法は、こちらの記事の「エクステンションのインストール」を参照してください。
では実際にuser-extensions.jsの中身をどう書くのでしょうか。 サンプルを見てみます。

Selenium.prototype.doTypeToday = function(locator) {
    var date = new Date();
    year = date.getFullYear();
    month = date.getMonth() +1;
        if(month < 10){
            month = '0'+month;
        }
    day = date.getDate();
        if(day < 10) {
            day = '0'+day;
        }
    
    var restored = year + '/' + month + '/' + day;
    this.doType (locator,restored);
}

今日の日付をyyyy/mm/dd形式で指定した場所に入力する、という動作をする関数を作ってみました。

Selenium.prototype.do[オリジナルのコマンド名] と記載すると、Selenium IDEの「コマンド」として認識されオリジナルのコマンドを設定する事が出来るようになります。
function(locator)  locator という引数を指定すると、Selenium IDEの「対象」に指定した場所（id=○○など）を使用する事が出来ます（不要な場合は空欄で大丈夫です）。

this.doType オリジナルコマンド関数の中で別のSeleniumコマンドを使いたい場合、do[コマンド名]と記述すると利用できます。
ファイルを保存してSelenium IDEを起動し、動作を確認します（以下のテストケースは、Googleホームページを開き、検索窓に日付を入力します）。

正常にエクステンションが読み込まれていれば、dateTodayというコマンドが設定できるかと思います。実行すると、Googleホームページの検索窓に日付が入力されます。

少しカスタマイズしてみましょう。
例えば日付の区切り文字をテストごとに変更したい場合があるとします（Aテストではyyyy/mm/dd形式、Bテストではyyyy-mm-dd形式など）。
user-extensions.jsのサンプルスクリプトを以下のように書き換えます。

Selenium.prototype.doDateToday = function(locator,separator) {
    var date = new Date();
    year = date.getFullYear();
    month = date.getMonth() +1;
        if(month < 10){
            month = '0'+month;
        }
    day = date.getDate();
        if(day < 10) {
            day = '0'+day;
        }
    
    var restored = year + separator + month + separator + day;
    this.doType (locator,restored);

function(locator,separator)　と言った感じで
オリジナルコマンド関数の第二引数に区切り文字（separator）を設定することによって、Selenium IDEの「値」入力欄の情報を持ってくる事が出来るようになりました。

user-extensions.jsを再度保存します。先ほど作成したSelenium IDEのテストケースに戻り、dateTodayコマンドの「値」に任意の区切り文字を入力します。

yyyy-mm-dd 形式で入力できれば成功です。非常に簡単で申し訳ありません。。

テスト対象のシステムに応じて、汎用化できる部分はuser-extensions.jsにまとめてしまうと効率が更に上がりますね。
ちなみにuser-extensions.jsを修正中に、頻繁に読み込みを行いたい場合は、設定＞オプション＞一般タブの
「アクティブに開発者向けツール」というチェックボックスをONにすると、拡張スクリプトパス入力枠の右側に「リロード」ボタンが表示されます。
修正後リロードを行って、user-extensions.jsの修正をすぐに反映させる事が出来ます。

皆様のお役に立てば幸いです。ありがとうございました。

2013/07/29
アイフラッグ担当 K

1. Seleniumとは（インストールと起動方法）（2013-03-07）
2. Selenium IDEの画面UI説明（2013-03-14）
3. テストケースとテストスイート（2013-03-14）
4. テストケースを書いてみる（2013-03-14）
5. テストスイートの作成、保存(2013-04-01)
6. 変更されるデータを使ってテストする(2013-04-01)
7. Selenium IDE でループ処理（n回ループ）を行う(2013-04-12)
8. Selenium IDE でAjaxページをテストする(2013-04-25)
9. Selenium IDE 2.0.0リリース（2013-05-08）
10. Selenium IDEとjavascript（2013-05-16）
11. ポップアップ画面のテスト(2013-05-27)
12. ドラッグアンドドロップのテスト(2013-06-05)
13. Selenium IDE Flow Controlを使用してforeachループを実行(2013-06-11)
14. Selenium IDE 2.1.0リリース -FireFox22での不具合対応(2013-07-03)
15. Selenium IDE 2.2.0リリース -2.1.0リリースの追記(2013-07-09)
16. 拡張スクリプト（user-extensions.js）の作り方(2013-07-29)
17. Selenium IDE 2.5.0リリース(2014-01-10)