E2Eテストのブラウザはこれで決まり！ヘッドレス Chrome を使ってみよう ｜ SiTest (サイテスト) ブログ

みなさんは E2E テストでどのようなブラウザを使用されていますか？

多くの方はローカル環境で E2E テストを走らせていることと思います。
サーバーで E2E テストを走らせるためにはヘッドレスブラウザが必要となりますが、現状のヘッドレスブラウザは最新のブラウザアップデートに追いつくことが出来ていません。

そんな中、Google Chrome 59 から待望のヘッドレスモードが実装されました！
今回は Node.js からヘッドレスモードの Chrome を操作する方法をご紹介します！

E2E（End to end）テストとは、ブラウザ側の UI や Ajax 通信を含めたWebアプリケーション全体を通したテストです。
Selenium などのテストプラットフォームからブラウザを自動操作し、
ページ遷移やページ操作をコードで記述しテストを行うことが出来ます。
ただし、Selenium などのテストプラットフォームは、実際にブラウザを起動してテストを行うため、テスト対象のブラウザがインストールされている必要があります。

サーバーでも E2E テストを行うためにはヘッドレスブラウザとよばれるブラウザが必要となります。
ヘッドレスブラウザはGUIが存在せず、コマンドとして提供されているためどのような環境でも動作させることが出来ます。
有名なヘッドレスブラウザとしては「PhantomJS」と呼ばれるヘッドレスブラウザがあります。
ただ、頻繁に行われるモダンブラウザのアップデートにヘッドレスブラウザが追いつくことができず、なかなか難しい状況となっています。

そんな中、ヘッドレスモードが実装された Google Chrome がリリースされたことにより、サーバー上で最新に近い状態のブラウザエンジンを使用し E2E テストを行うことが出来るようになりました。

それでは、コマンドラインからヘッドレスモードの Chrome を使用してみましょう！

まずは、chrome コマンドを使用するためにエイリアスを貼りましょう。

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

chrome コマンドで SiTest のトップページのスクリーンショットを撮ってみます。

chrome --headless --disable-gpu --screenshot https://sitest.jp

他にも PDF を作成したり、document.body.innerHTML の中身を標準出力するフラグオプションが用意されています。

コマンドラインで使用できるフラグオプションは headless_shell_switches.cc – chromium から確認することができます。

ヘッドレスモードの Chrome は Node.js で制御することも出来ます。

先ほどのコマンドと同じような操作を Node.js でやってみます。
今回は、デフォルトのモジュールを使いやすいようにした OnetapInc/chromy というラッパーモジュールを使用していきます。

const Chromy = require("chromy")
const fs = require("fs")

async function main() {
  let driver = new Chromy({
    additionalChromeFlags: ["--window-size=1200,1000"]
  })
  await driver.goto("https://sitest.jp")
  const capture = await driver.screenshot()
  fs.writeFileSync("./tmp/capture.png", capture)
  await driver.close()
}

main()

たったこれだけでキャプチャを撮ることが出来ました。
Github にサンプルコードをアップしていますので、詳しい構成はこちらをご確認下さい。

chromy は有志の方が作成されたラッパーライブラリのため、
もっといろいろな DevTools Protocol を触りたい方は、 chrome-remote-interface モジュールを使用することで、もっと多くの操作を行うことが出来ます。

mocha などのテストフレームワークと組み合わせることで、
サーバー上での E2E テストを実現することができます。

ヘッドレスモードの Chrome はまだ安定版に実装されたばかりなので、
やはりもとからあるヘッドレスブラウザより出来ることは限られています。
（それでもやりたい事の大半は実現できますが・・・）

それでも最新のモダンブラウザをサーバー上で E2E テストが実施できるという利点はとても大きいと感じます。
Jenkins などの CI ツールと組み合わせることでプルリクエスト作成した段階で E2E テストを自動的に走らせる、なんてこともできるでしょう。
今後のバージョンアップが楽しみですね。