6. WebDriver APIを直接使用するテストシナリオ
このサンプルは、デモアプリケーションをテストする完全なテストシナリオ例です。
テストシナリオの動作は以下のようになります。
初期画面
アプリケーションの最初のページです。
このページで、「トップメニュー」をクリックして表示されるalertで、alertの操作例としています。
「問い合わせ」をクリックして次のアコーディオンメニューの展開へ進みます。
アコーディオンメニューの展開
アコーディオンメニューのような動的にページ内の状態が変化するケースで、表示の完了を待つ例としています。
また、スクリーンキャプチャを使用する例も含まれています。
「ユーザ登録」をクリックして次のページへ遷移します。
ユーザ登録画面
このページは、キー入力とボタン操作を中心とした例です。
特に、GHOST Operatorの特徴でもあるIMEを使用した日本語入力を行っています。
各項目の入力後「送信する」ボタンのクリックで次のページへ遷移します。
ユーザ登録結果画面
このページの表示でテストシナリオは終了します。
このテストシナリオは一連の操作を実行し、最後のユーザ登録結果画面まで到達できるかを確認しています。
仮に、途中で意図しない動作・挙動があれば要所に挿入されているチェックコードにより検出されるか、WebDriverAPIの呼び出しが失敗して例外がスローされるかで、テストの失敗を検出する仕組みです。
全体の処理方法を明確にするために、Seleniumプロジェクトで提供されるWebDriverライブラリを直接使用しているため、比較的簡易なページのテストですが記述量は多くなっています。
const crypto = require('crypto');
const { Builder, Capabilities, Key, until, By } = require("selenium-webdriver");
const fs = require('fs');
const path = require('path');
(async function doTest() {
let driver = null;
try {
console.log("capabilitiesの設定");
const capabilities = new Capabilities()
.set("scriptFilter",["\\.html"])
.setBrowserName("safari+G.O");
console.log("WebDriverへ接続");
driver = new Builder()
.usingServer("http://192.168.1.147:7000/wd/hub")
.withCapabilities(capabilities)
.build();
console.log("テスト対象アプリのindex.htmlをロード");
await driver.get("http://dev01.nexaweb.co.jp/GHOST_Operator/demo/index.html");
// 「トップメニュー」のクリックによるalert表示
console.log("「トップメニュー」の表示を待つ");
const titleElm = await driver.wait(until.elementLocated(By.xpath("/html/body/div[1]/header/div/h1")), 3000);
console.log("「トップメニュー」をクリックする");
await titleElm.click();
console.log("Alertを待機");
await driver.wait(until.alertIsPresent(), 1000);
const alert = await driver.switchTo().alert();
console.log("Alertを閉じる");
await alert.dismiss();
// JavaScriptによる値の取得
console.log("appData変数の値を取得");
const appData = await driver.executeScript('return appData;');
if(appData !== "hello") {
throw new Error("appData is not true. appData=" + appData);
}
// アコーディオンメニューの選択
console.log("「問合せボタン」を検索");
const contactElm = await driver.findElement(By.xpath("/html/body/ul/li[4]/div"));
console.log("「問合せボタン」の表示をクリック");
await contactElm.click();
console.log("「ユーザ登録」の表示を待つ");
const userregElm = await driver.wait(until.elementLocated(By.id("userreg", 3000)));
await driver.wait(until.elementIsVisible(userregElm),3000);
console.log("「ユーザ登録」の表示OK");
// スクリーンキャプチャによるメニュー表示テスト
console.log("スクリーンキャプチャのために「ユーザ登録」の安定を待つ");
await driver.sleep(700);
console.log("スクリーンキャプチャによるメニュー表示テスト");
const img_b64 = await driver.takeScreenshot();
const hashHex = crypto.createHash('sha256').update(img_b64, 'utf8').digest('hex');
if(hashHex !== "a4cc7834d3f1df879ee9361eb73943735a05792b6a1ed72671692e83ad074bd8") {
try {
const img_bin = Buffer.from(img_b64, "base64"); // base64エンコードをデコードしてバイナリに変換
const dirName = "images";
const fileName = "snapshot";
const fn = path.normalize(path.format({
dir: dirName,
name: fileName,
ext: ".png"
}));
const fnDir = path.dirname(fn);
if (!fs.existsSync(fnDir))
fs.mkdirSync(fnDir, {recursive: true});
fs.writeFileSync(fn, img_bin); // 画像をファイルに保存
console.log("キャプチャイメージを保存しました");
}
catch(ex) {
console.log(ex);
}
throw new Error("screenshot compare error hash=" + hashHex);
}
console.log("「ユーザ登録」をクリック");
await userregElm.click();
console.log("ページ遷移を待つ");
await driver.wait(until.urlMatches(/^http.*\/demo\/reg\.html$/),1000);
console.log("「お名前」入力欄の表示を待つ");
const nameElm = await driver.wait(until.elementLocated(By.id("name1", 3000)));
console.log("「お名前」入力欄をクリック");
await nameElm.click();
await driver.sleep(100);
console.log("「お名前」の入力");
await nameElm.sendKeys("[HanjaMode On]yamada",Key.SPACE,Key.RETURN," ");
await nameElm.sendKeys("tarou",Key.SPACE,Key.RETURN,"[HanjaMode Off]");
await nameElm.sendKeys(Key.TAB);
console.log("「メールアドレス」の入力");
await nameElm.sendKeys("Tarou.Yamada@nexaweb.com",Key.COMMAND,"ac");
await nameElm.sendKeys(Key.TAB);
console.log("「メールアドレス（確認用）」の入力");
await nameElm.sendKeys(Key.COMMAND, "v");
await nameElm.sendKeys(Key.TAB);
console.log("「電話番号」の入力");
await nameElm.sendKeys("080-4321-8765");
console.log("「性別」を検索");
const genderElms = await driver.findElements(By.name("gender"));
console.log("「男性」を選択");
await genderElms[0].click();
console.log("「職業」を検索");
const jobElm = await driver.findElement(By.id("job"));
console.log("「職業」をクリック");
await jobElm.click();
console.log("「職業」のセレクタ表示を待つ");
await driver.sleep(500);
console.log("「Webデザイナ」を選択");
await driver.actions({bridge: true})
.move({origin: jobElm, x:0, y:-270})
.click()
.perform();
console.log("「あなたが学びたいこと」を検索");
const qElms = await driver.findElements(By.name("q1"));
console.log("「デザインについて」を選択");
await qElms[0].click();
console.log("「マーケティングについて」を選択");
await qElms[2].click();
console.log("「送信する」を検索");
const buttonElm = await driver.findElement(By.xpath("/html/body/div[2]/form/div/button"));
console.log("「送信する」をクリック");
await buttonElm.click();
console.log("ページ遷移を待つ");
await driver.wait(until.urlMatches(/^http.*\/demo\/result\.html\?.*$/),3000);
console.log("ページ遷移完了");
console.log("テスト正常終了");
} catch (e) {
console.log(e);
} finally {
if(driver !== null)
await driver.quit();
}
})();
※ このサンプルの関連ファイルはSeleniumSamples.zipのsec6_webDriverAPIに収められています。