読者です 読者をやめる 読者になる 読者になる

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

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

devexpress.github.io

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

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

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

f:id:n_soushi:20170224192652p:plain

実行するとchromesafariが立ち上がり`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

  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の生成はドキュメントにもあるように簡単に行える。
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を好きなブラウザで開きテスト結果を受け取るまで

f:id:n_soushi:20170224180736p:plain

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

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

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

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

f:id:n_soushi:20170224183659p:plain

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

まとめ

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

ソースを公開しています

github.com