WebDriver不要のTestCafeを使ったE2EテストをChatOpsに導入してみた

• February 24, 2017
• ChatOps  
• E2E  
• TestCafe  
• Node  

今回はE2EテストをつくれるTestCafeをつかってみたエントリです。Automated browser testing for the modern web development stack | TestCafe以前のエントリではSelenideをつかったE2Eテストの紹介をしました。Selenideも特徴がありますがTestCafeも抜群の特徴があります。
TestCafeではテストコードはNodeで書いていきます。そのため広くエンジニアメンバーがE2Eテストを書けるメリットがあります。ES2016 using をつかってテストコードが書かれているため_async/await_などの特徴的な構文も使えます。

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

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

TestCafeのRemoteConnetionをChatOpsに導入する

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

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 => { /* ... */})
        });
    });

※ 抜粋したコードなので詳細はgithubで確認できます

リモートURLを好きなブラウザで開きテスト結果を受け取るまで

1. テスターは好きなブラウザでリモートURLを開く。
2. TestCafeはリモートURLのアクセスを検知してテストを実行する／テスト結果をHubotに送信する。
3. Hubotは受け取ったテスト結果をルームに送信する。

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

• TestCafeにはReporterクラスをカスタマイズすることでテスト結果のフォーマットを拡張することができる
• コンソールにテスト結果を表示するのではなくHubotのwebhookに送信したいのでRerporterクラスを拡張した

実際のslackでBotとやり取りしている画面キャプチャ

テスターはslackをコントローラーにしてE2Eテストを開始から完了（レポート受信）までワンストップで行えます。

まとめ

• 当初のTestCafeのリモート機能を利用したE2EテストをChatOpsに組み込むアイデアを実現できた。
• slackと連動してattachmentをつかってレポート通知をリッチな表示にできた。
• レポート内容は他にもあるので実運用に必要な情報の精査が必要。
• TestCafeでテストを書いてみた、というテーマには触れていないので次回はPageModelをベースにTestCafeでE2Eテストを書いてみる。

ソースを公開しています