WebDriver不要のTestCafeを使ったE2EテストをChatOpsに導入してみた - 平日インプット週末アウトプットぶろぐ

今回はE2EテストをつくれるTestCafeをつかってみたエントリです。

devexpress.github.io

以前のエントリではSelenideをつかったE2Eテストの紹介をしました。Selenideも特徴がありますがTestCafeも抜群の特徴があります。
TestCafeではテストコードはNodeで書いていきます。そのため広くエンジニアメンバーがE2Eテストを書けるメリットがあります。ES2016 using をつかってテストコードが書かれているためasync/awaitなどの特徴的な構文も使えます。

最大の特徴はテストをリモートで実行できること

TestCafeのプリインストールでテストするブラウザとしてchromeとsafariが用意されています。ブラウザを指定したテストの実行は次のようになります。

f:id:n_soushi:20170224192652p:plain

実行するとchromeとsafariが立ち上がり`tests/test.js`のテストが実行されます。
この方法は予めブラウザを指定する方法ですがテストを実行するURLを生成するremoteというオプションがあります。
実行は次のようになります。

f:id:n_soushi:20170224192938p:plain

remote:1としている箇所がリモートで確認するURLの生成数を指定しています。TestCafeは指定されたURL数を生成して返します。テスターはURLをコピーして好きなブラウザにアクセスしてテストを実行できます。ブラウザにアクセスした後の実行結果は次のようになります。

f:id:n_soushi:20170224192759p:plain

TestCafeは自身でテスト用のブラウザを持たずユニークなURLを生成してテスターにブラウザを選ばせることで多種多様なブラウザのテストを可能にします。

このリモート機能を活用してE2EテストをChatOpsに組み込むアイデアを考え実装してみました。

TestCafeのRemoteConnetionをChatOpsに導入する

E2Eテストの運用にChatOpsを導入します。テスターはslackからBot経由でテスト開始を通知してBotとTestCafeが連携します。
それぞれ図にすると次のようになります。

リモートURLをslackで受け取るまで

f:id:n_soushi:20170224170519p:plain

テスターはslackに@bot test webを送信する。
Botはイベントを受け取りTestCafeにリモートURLの生成依頼を通知する。
TestCafe（hapi）は生成依頼を受け取りリモートURLを生成してBotへ返す。
BotはリモートURLをルームに送信する。

こんな感じの流れで補足として次のような内容があります。

docker-composeでHubotとTestCafeのサビースをつくりコンテナ化した。
HubotとTestCafeはHTTP通信でリモートURLのやり取りを行う。
TestCafeにはHubotのようなwebhookはないのでhapi.jsで簡易的なAPIを作成した。
リモートURLの生成はドキュメントにもあるように簡単に行える。

createTestCafe('localhost', 1337, 1338)
    .then(testcafe => {
        runner = testcafe.createRunner();
        return testcafe.createBrowserConnection();
    })
    .then(remoteConnection => {

        const url = remoteConnection.url
        // ここでslackにリモートURLを送信する
        
        remoteConnection.once('ready', () => {
            runner
                .src('tests/test.js')
                .browsers(remoteConnection)
                .reporter('custom-reporter')
                .run()
                .then(function () { /* ... */ })
                .then(failedCount => { /* ... */ })
                .catch(error => { /* ... */})
        });
    });