JavaScript カスタム・コード・オプションを使用して、独自のコードを作成し、そのコードを Web UI テストのステップとして追加できます。
この例では、独自の JavaScript コードを作成し、そのコードを Web UI テストのステップとして追加する方法を示します。この例では、単純なログイン・フォーム用のカスタム JavaScript コードを作成する基本シナリオについて説明します。ご使用の機能に従い独自の JavaScript コードを作成できます。
ログイン・フォームには、Username と Password という 2 つのフィールドがあります。
最初に、Web UI プロジェクトに JavaScript ファイルを追加し、そのファイルにコードを入力する必要があります。単純なログイン・フォーム用に作成された以下のサンプル・コードを参照してください。
//Simple JS function to fill up login page data
function simpleUserLogin(){
console.log("Signing In...");
//Click At User Name Edit Box
document.getElementById("uname").click();
//Enter the UserName
document.getElementsByName("username")[0].value="billy";
//Click on Password Field and Enter the password
document.getElementsByClassName("form-control-passwd")[1].click();
document.getElementById("password").value="Cuper@tino";
//Click on Login button
document.getElementsByTagName("input")[3].click();
}注: JavaScript により、DOM コントロールと対話するための一連のライブラリーが提供され、それらのライブラリーを使用して、ユーザー・インターフェース、ブラウザー、および文書設定を操作できます。JavaScript コードのリファレンスについて詳しくは、https://developer.mozilla.org/en-US/docs/Web/JavaScriptを参照してください。
Web UI プロジェクトで、作成した JavaScript ファイルの詳細を更新できます。以下のイメージに示されているように、メソッド名を指定し、JavaScript ファイルを更新する必要があります。
上のサンプル・コードでは、ユーザー名、パスワードなどの入力値は既にハード・コーディングされています。ただし、戻り値を取得する対象の JavaScript コードに対して Web UI テストから入力値を渡す場合、以下の図に示されているように、別の JavaScript ファイルを作成し、カスタム・コード・ステップでメソッドを呼び出す必要があります。
以下は、Web UI から値を受け取り、値を返すことができるメソッドを定義するためのサンプル・コードです。
//username and password are being passed from the JS Custom Code step in Web UI Test & some value is being returned which would be stored in the variable defined in JS Custom Code step
function userloginThroughArgsAndReturnSomeValue(username, password){
var returnVar = "false";
var userName = username;
var pwd = password;
console.log("Waiting for the browser load...");
//sample code - wait for document to load based on browserState
var myVar = true;
while(myVar === true){
var browserState = document.readyState;
if(browserState.indexOf("complete") !== -1){
myVar = false;
}
}
console.log("Signing In...");
//Enter the UserName
document.querySelectorAll("*[name='username']")[0].click();
document.querySelectorAll("*[id='uname']")[0].value = userName;
//Enter the password
document.querySelectorAll(".form-control-passwd")[1].click();
document.getElementById("password").value=pwd;
//Click on Login button
var submitButtonOccurances = document.querySelectorAll("*[type='submit']").length;
document.querySelectorAll("*[type='submit']")[0].click();
//return some value which can be stored in a variable in JS Custom Code step in Web UI Test
console.log("Returning some value...");
if(submitButtonOccurances >= 1){
returnVar = "true";
}
return returnVar;
}戻り値に基づいて、if 条件が実行されます。