mocha + chai + SeleniumによるE2Eテスト方法についてメモする。
e2eテストとは
End to Endテストの略称。
システム全体が正しく動作することを確認するテスト。
Webサービスの場合：ユーザと同様にブラウザ操作を行い、サービスが期待通りの挙動をしているか確認する。
mocha
テスティングフレームワーク
テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能を持つフレームワーク。
以下の記述方法に対応している。
TDD（テスト駆動開発）: メソッド動作をテストで表現しながら設計していく考え方
BDD（振る舞い駆動開発）: 振る舞い（要求仕様）をテストで表現しながら設計していく考え方
アサーションツールはバンドルされていない。
chai
アサーションツール
テストの実行結果を判定する。
selenium
Web ブラウザの操作を自動化するためのフレームワーク。
テスト以外にもタスクの自動化や Web サイトのクローリングなど様々な用途で利用される。
Selenium を使ってブラウザを自動で操作するには以下をインストールする必要がある。
Web ブラウザ
Google Chrome, Firefox, など
WebDriver
ブラウザを操作するための API を公開するモジュール
Selenium
WebDriver と通信しプログラムからブラウザを操作するライブラリ
事前準備
node.jsインストール
ライブラリインストール
npm install -D selenium-webdriver mocha chai chromedriver@89.0.0
※chromedriverバージョンは使用中のGoogle Chromeバージョンに合わせる。
テストコード
test/test.js
表示ページのtitle要素検証
検索ボックス入力によるページ遷移検証。
const { Builder, By, Key } = require("selenium-webdriver");
var chai = require('chai');
var assert = chai.assert;
let driver;
// テスト対象の宣言
describe("BDD Test", () => {
// describeの前に実行される前提条件を記述。
// Google Chrome起動
before(() => {
driver = new Builder().forBrowser("chrome").build();
});
// describeの後に実行される後処理を記述。
// Google Chrome終了
after(() => {
return driver.quit();
});
// 検証内容を記述。
// 1. 表示ページの`title`要素検証
it("正常系 Qiitaページタイトル検証", async () => {
// 指定したURLへ遷移
await driver.get("https://qiita.com");
// title要素を取得する。
const title = await driver.getTitle();
// 検証
assert.strictEqual(title, "Qiita");
});
// 2. 検索ボックス入力によるページ遷移検証。
it("正常系_Qiita検索ページ遷移検証", async () => {
// 指定したURLへ遷移
await driver.get("https://qiita.com");
// 検索ボックスに「selenium」を入力し、検索。
await driver.findElement(By.xpath('/html/body/div[1]/div[1]/div/div/div/div[1]/form[1]/input')).sendKeys("selenium", Key.RETURN);
// URLを取得
const currentUrl = await driver.getCurrentUrl();
// 検証
assert.strictEqual(currentUrl, "https://qiita.com/search?q=selenium");
});
});
テスト実行
package.jsonにmochaでテスト実行をするnpm scriptを追加する。
"scripts": {
"test": "mocha test/test.js --timeout 20000"
}
以下のコマンドを実行する。
npm run test
参考情報
JavaScript(Node.js)でSeleniumを使って自動UIテストをする方法
Node.jsとSeleniumでWebアプリのUIテストを自動化（2018年版）
mocha / chai チートシート
Mochaを使ってJavaScriptのテストをブラウザで実行してみよう
mochaとchaiの最も基本的な使い方
↧
