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
```

参考情報