SeleniumとNode.jsでWebアプリケーションのUIテストをChromeで実施する

どちらかと言うと、スクリーンショットを自動で撮る、ことを目的としている。

入力値などをチェックしてもよいが、そこはまた今度で。

const { Builder, By, until } = require("selenium-webdriver");

const assert = require("assert");

let driver;

const fs = require('fs');

const { promisify } = require('util');

/*

* 適当に定数を、ターゲットのURL、HTMLコントロールのIDに合わせて定義

* （略）

*/

const takeScreenshotAndSave = async function (targetDir, fileName) {

// スクリーンショット画像をbase64でエンコードしたもの

let base64 = await driver.takeScreenshot();

// bufferに変換

let buffer = Buffer.from(base64, 'base64');

// bufferを保存

return promisify(fs.writeFile)(targetDir + '/' + fileName, buffer);

}

describe("UIテスト", () => {

before(() => {

driver = new Builder().forBrowser("chrome").build();

process.on("unhandledRejection", console.dir);

});

after(() => {

return driver.quit();

});

describe('正常系', ()=>{

it("ログインから入力完了してログアウトする", async () => {

const targetScreenshotDir = SCREENSHOT_DIR;

// テスト対象のページへアクセス

await driver.get(

URL_ENTRANCE

);

await driver.sleep(3000);

await takeScreenshotAndSave(targetScreenshotDir, '001ログイン画面.jpg');

// ログインIDとパスワードを入力してログインする

await driver

.findElement(By.id(ID_ENTRANCE_USERID))

.sendKeys(TARGET_ID);

await driver

.findElement(By.id(ID_ENTRANCE_USERPASSWORD))

.sendKeys(TARGET_PASS);

await driver.findElement(By.id(ID_ENTRANCE_LOGIN_BUTTON)).click();

await driver.sleep(2000);

await takeScreenshotAndSave(targetScreenshotDir, '002ログイン直後.jpg');

// 「ID_CHOOSER_BUTTON」までスクロールしてスクショする

await driver.findElement(By.id(ID_SELECT_IMG_BUTTON)).click();

await driver.sleep(2000);

await takeScreenshotAndSave(targetScreenshotDir, '003案内ダイアログ1上部.jpg');

const elementChooser = await driver.findElement(By.id(ID_CHOOSER_BUTTON));

await driver.sleep(1000);

await takeScreenshotAndSave(targetScreenshotDir, '004案内ダイアログ2下部.jpg');

// ファイルチューザーにファイルを設定

await driver.findElement(By.id(ID_INPUTTAG_FILE)).sendKeys(__dirname + '\\' + TARGET_FILE);

await driver.sleep(1000);

// 登録ボタンが表示されるようにスクロール後、その状態をスクショする

const elementRegist = await driver.findElement(By.id(ID_REGIST_BUTTON));

await driver.sleep(1000);

await takeScreenshotAndSave(targetScreenshotDir, '005ファイル選択済み.jpg');

// ボタン状態の有効無効を直にチェックしたいときは、

// elementRegist.getAttribute('disabled') 等でとれる。

// chaiのexpect()などで検証すればよい。

// ログアウト

await driver.findElement(By.id(ID_LOGOUT_BUTTON)).click();

await driver.sleep(1000);

await takeScreenshotAndSave(targetScreenshotDir, '006ログアウト.jpg');

});

});

});

参考サイト

Mochaで実行する場合の、とりあえずの全体像が分かりやすい

表示待ちとかの仕方

スクロールのさせ方

ファイル選択ダイアログの扱い

Seleniumのメソッドをチートシート的に参照する

→「待ち処理」等も載っている。

Syntheticsのスクリプト化ブラウザリファレンス （モニターバージョン0.5.0+）

の「Selenium Webdriver API」が参照しやすいかも？

Seleniumの公式ドキュメント。左ペインから「Modules＞selenium-webdriver」で辿る